Added default stylesheet.

README.md

@@ -18,13 +18,19 @@ $ npm install react-jsonschema-form --save
 As a script dependency served from a CDN:
 
 ```html
-  <script src="https://npmcdn.com/react-jsonschema-form@0.4.1/dist/react-jsonschema-form-0.4.1.js"></script>
+  <script src="https://npmcdn.com/react-jsonschema-form@0.5.0/dist/react-jsonschema-form.js"></script>
 ```
 
-Source maps are available at [this url](https://npmcdn.com/react-jsonschema-form@0.4.1/dist/react-jsonschema-form-0.4.1.js.map).
+Source maps are available at [this url](https://npmcdn.com/react-jsonschema-form@0.5.0/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/[email protected]/dist/react-jsonschema-form.css">
+```
+
 ## Usage
 
 ```js
@@ -43,7 +49,7 @@ const schema = {
   }
 };
 
-const formData =  {
+const formData = {
   title: "First task",
   done: true
 };
@@ -59,6 +65,10 @@ render((
 ), document.getElementById("app"));
 ```
 
+That should give something like this (if you use the default stylesheet):
+
+![](http://i.imgur.com/qKFvod6.png)
+
 ### Alternative widgets
 
 JSONSchema is limited for describing how a given data type should be rendered as an input component, that's why this lib introduces the concept of *UI schema*. A UI schema is basically an object literal describing which UI widget should be used to render a certain field
@@ -100,6 +110,9 @@ $ npm start
 
 A [Cosmos development server](https://github.com/skidding/cosmos) showcasing components with hot reload enabled is available at [localhost:8080](http://localhost:8080).
 
+![](http://i.imgur.com/51KtbqO.png)
+
+
 ## Tests
 
 ```

css/react-jsonschema-form.css

@@ -0,0 +1,95 @@
+.rjsf * {
+  box-sizing: border-box;
+}
+
+.rjsf {
+  padding: 0;
+  font-size: .8em;
+  color: #555;
+}
+
+.rjsf fieldset {
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  margin-top: .5em;
+}
+
+.rjsf fieldset legend {
+  font-weight: bold;
+  margin-left: -.2em;
+}
+
+.rjsf button {
+  display: inline-block;
+  color: #FFF;
+  background-color: #286090;
+  border-color: #122B40;
+  padding: 2px 8px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5em;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+.rjsf input[type=text] {
+  display: block;
+  width: 100%;
+  height: 34px;
+  padding: 3px 6px;
+  font-size: 14px;
+  color: #555;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
+}
+
+.rjsf .errors {
+  color: red;
+}
+
+.rjsf .field {
+  padding-top: 1em;
+}
+
+.rjsf .field label {
+  display: block;
+  font-weight: bold;
+}
+
+.rjsf .field input[type=text] {
+}
+
+.rjsf .field select {
+  display: block;
+}
+
+.rjsf .array-item-list {
+}
+
+.rjsf .array-item-add button,
+.rjsf .array-item-remove button {
+  width: 32px;
+  height: 32px;
+}
+
+.rjsf .array-item-add {
+  margin-bottom: 0;
+}
+
+.rjsf .array-item-remove {
+  margin: .2em 0;
+}
+
+.rjsf .field-array-of-string input[type=text] {
+  width: calc(100% - 38px);
+}
+
+.rjsf .field-array-of-string .array-item-remove {
+  float: right;
+  width: 30px;
+  margin-top: -2.3em;
+}

devServer.js

@@ -19,11 +19,15 @@ app.get("/", function(req, res) {
   res.sendFile(path.join(__dirname, "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);
     return;
   }
 
-  console.log("Listening at localhost:" + port);
+  console.log("Listening at http://localhost:" + port);
 });

dist/react-jsonschema-form.css

@@ -0,0 +1,95 @@
+.rjsf * {
+  box-sizing: border-box;
+}
+
+.rjsf {
+  padding: 0;
+  font-size: .8em;
+  color: #555;
+}
+
+.rjsf fieldset {
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  margin-top: .5em;
+}
+
+.rjsf fieldset legend {
+  font-weight: bold;
+  margin-left: -.2em;
+}
+
+.rjsf button {
+  display: inline-block;
+  color: #FFF;
+  background-color: #286090;
+  border-color: #122B40;
+  padding: 2px 8px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5em;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+.rjsf input[type=text] {
+  display: block;
+  width: 100%;
+  height: 34px;
+  padding: 3px 6px;
+  font-size: 14px;
+  color: #555;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
+}
+
+.rjsf .errors {
+  color: red;
+}
+
+.rjsf .field {
+  padding-top: 1em;
+}
+
+.rjsf .field label {
+  display: block;
+  font-weight: bold;
+}
+
+.rjsf .field input[type=text] {
+}
+
+.rjsf .field select {
+  display: block;
+}
+
+.rjsf .array-item-list {
+}
+
+.rjsf .array-item-add button,
+.rjsf .array-item-remove button {
+  width: 32px;
+  height: 32px;
+}
+
+.rjsf .array-item-add {
+  margin-bottom: 0;
+}
+
+.rjsf .array-item-remove {
+  margin: .2em 0;
+}
+
+.rjsf .field-array-of-string input[type=text] {
+  width: calc(100% - 38px);
+}
+
+.rjsf .field-array-of-string .array-item-remove {
+  float: right;
+  width: 30px;
+  margin-top: -2.3em;
+}