diff --git a/README.md b/README.md index 0d27e1af81..6c1aa3a63f 100644 --- a/README.md +++ b/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,13 +45,16 @@ 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 @@ -56,13 +62,7 @@ As a script dependency served from a CDN: 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 - -``` +> 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*: diff --git a/css/react-jsonschema-form.css b/css/react-jsonschema-form.css deleted file mode 100644 index eb4d60cce8..0000000000 --- a/css/react-jsonschema-form.css +++ /dev/null @@ -1,95 +0,0 @@ -.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; -} diff --git a/devServer.js b/devServer.js index f8ee35eb66..147517dcc4 100644 --- a/devServer.js +++ b/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); diff --git a/package.json b/package.json index 00d96197ae..3635f45aba 100644 --- a/package.json +++ b/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",