Updated docs and build commands.

README.md

@@ -3,15 +3,17 @@ react-jsonschema-form
 
 [![Build Status](https://travis-ci.org/mozilla-services/react-jsonschema-form.svg)](https://travis-ci.org/mozilla-services/react-jsonschema-form)
 
-A simple [React](http://facebook.github.io/react/) component capable of building HTML forms out of a [JSON schema](http://jsonschema.net/).
+A simple [React](http://facebook.github.io/react/) component capable of building HTML forms out of a [JSON schema](http://jsonschema.net/) and using [Bootstrap](http://getbootstrap.com/) semantics by default.
 
-A [live demo](https://mozilla-services.github.io/react-jsonschema-form/) is hosted on gh-pages.
+A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) is hosted on gh-pages.
 
-![](http://i.imgur.com/oxBlg96.png)
+![](http://i.imgur.com/bmQ3HlO.png)
 
 ## Table of Contents
 
   - [Installation](#installation)
+     - [As a npm-based project dependency](#as-a-npm-based-project-dependency)
+     - [As a script served from a CDN](#as-a-script-served-from-a-cdn)
   - [Usage](#usage)
   - [Form customization](#form-customization)
      - [The uiSchema object](#the-uischema-object)
@@ -29,6 +31,7 @@ A [live demo](https://mozilla-services.github.io/react-jsonschema-form/) is host
      - [Custom field components](#custom-field-components)
      - [Custom SchemaField](#custom-schemafield)
      - [Custom titles](#custom-titles)
+  - [Styling your forms](#styling-your-forms)
   - [Schema definitions and references](#schema-definitions-and-references)
   - [Contributing](#contributing)
      - [Development server](#development-server)
@@ -42,27 +45,24 @@ A [live demo](https://mozilla-services.github.io/react-jsonschema-form/) is host
 
 Requires React 0.14+.
 
-As a npm-based project dependency:
+
+### As a npm-based project dependency
 
 ```
 $ npm install react-jsonschema-form --save
 ```
 
-As a script dependency served from a CDN:
+> Note: While the library renders [Bootstrap](http://getbootstrap.com/) HTML semantics, you have to build/load the Bootstrap styles on your own.
+
+### As a script served from a CDN
 
 ```html
   <script src="https://npmcdn.com/react-jsonschema-form/dist/react-jsonschema-form.js"></script>
 ```
 
 Source maps are available at [this url](https://npmcdn.com/react-jsonschema-form/dist/react-jsonschema-form.js.map).
 
-Note that the CDN version **does not** embed *react* nor *react-dom*.
-
-A default, very basic CSS stylesheet is provided, though you're encouraged to build your own.
-
-```html
-<link rel="stylesheet" href="https://npmcdn.com/react-jsonschema-form@0.10.0/dist/react-jsonschema-form.css">
-```
+> Note: The CDN version **does not** embed *react* nor *react-dom*.
 
 ## Usage
 
@@ -73,7 +73,7 @@ import { render } from "react-dom";
 import Form from "react-jsonschema-form";
 
 const schema = {
-  title: "Todo Tasks",
+  title: "Todo",
   type: "object",
   required: ["title"],
   properties: {
@@ -98,9 +98,9 @@ render((
 ), document.getElementById("app"));
 ```
 
-That should give something like this (if you use the default stylesheet):
+That should give something like this (if you took care of loading the standard [Bootstrap](http://getbootstrap.com/) stylesheet):
 
-![](http://i.imgur.com/qKFvod6.png)
+![](http://i.imgur.com/DZQYPyu.png)
 
 ## Form customization
 
@@ -458,6 +458,22 @@ render((
 ), document.getElementById("app"));
 ```
 
+## Styling your forms
+
+This library renders form fields and widgets leveraging the [Bootstrap](http://getbootstrap.com/) semantics. That means your forms will be beautiful by default if you're loading its stylesheet in your page.
+
+You're not necessarily forced to use Bootstrap; while it uses its semantics, it also provides a bunch of other class names so you can bring new styles or override default ones quite easily in your own personalized stylesheet. That's just HTML after all :)
+
+If you're okay with using styles from the Bootstrap ecosystem though, then the good news is that you have access to many themes for it, which are compatible with our generated forms!
+
+Here are some examples from the [playground](http://mozilla-services.github.io/react-jsonschema-form/), using some of the [Bootswatch](http://bootswatch.com/) free themes:
+
+![](http://i.imgur.com/1Z5oUK3.png)
+![](http://i.imgur.com/IMFqMwK.png)
+![](http://i.imgur.com/HOACwt5.png)
+
+Last, if you really really want to override the semantics generated by the lib, you can always create and use your own custom [widget](#custom-widget-components), [field](#custom-field-components) and/or [schema field](#custom-schemafield) components.
+
 ## Schema definitions and references
 
 This library partially supports [inline schema definition dereferencing]( http://json-schema.org/latest/json-schema-core.html#rfc.section.7.2.3), which is Barbarian for *avoiding to copy and paste commonly used field schemas*:

devServer.js

@@ -19,10 +19,6 @@ app.get("/", function(req, res) {
   res.sendFile(path.join(__dirname, "playground", "index.html"));
 });
 
-app.get("/react-jsonschema-form.css", function(req, res) {
-  res.sendFile(path.join(__dirname, "css", "react-jsonschema-form.css"));
-});
-
 app.listen(port, "localhost", function(err) {
   if (err) {
     console.log(err);

package.json

@@ -4,11 +4,10 @@
   "description": "A simple React component capable of building HTML forms out of a JSON schema.",
   "scripts": {
     "build:readme": "toctoc README.md -w",
-    "build:css": "cp css/react-jsonschema-form.css dist/",
     "build:lib": "rimraf lib && NODE_ENV=production babel -d lib/ src/",
     "build:dist": "rimraf dist && NODE_ENV=production webpack --config webpack.config.dist.js --optimize-minimize",
     "build:playground": "rimraf build && NODE_ENV=production webpack --config webpack.config.prod.js --optimize-minimize && cp playground/index.prod.html build/index.html",
-    "dist": "npm run build:lib && npm run build:dist && npm run build:css",
+    "dist": "npm run build:lib && npm run build:dist",
     "lint": "eslint src test",
     "publish-to-gh-pages": "npm run build:playground && gh-pages --dist build/",
     "publish-to-npm": "npm run build:readme && npm run dist && npm publish",