diff --git a/README.md b/README.md index e72195b5..5f458ee2 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,3 @@ #OOCSS -[Look into oocss folder for more informations](https://github.com/stubbornella/oocss/tree/master/oocss) +[Look into oocss folder for more information](https://github.com/mbrowne/oocss/tree/master/oocss) diff --git a/oocss/README.md b/oocss/README.md index 64ccb635..ba17cf19 100644 --- a/oocss/README.md +++ b/oocss/README.md @@ -107,9 +107,12 @@ These are the essential commands you'll be interested in: ## Build the project -If you will be doing development on the project, you'll need to know a bit more about the build system. If not, you can happily skip this section. We use Make to create the style guide and the rest of the build directory. + + +We use Make to create the style guide and the rest of the build directory. When building the project for the first time, run: +> `make bw` -Some common commands you'll need: +If you will be making changes to the project, here are some common commands you'll need: * `make build` - Creates the style guide and all the JavaScript, HTML, and CSS files required for it. * `make watch` - Watches JavaScript, handlebars, and Sass files When any changes are saved, it automatically rebuilds the project so you can see the latest changes. diff --git a/oocss/src/components/form/checkboxRadio/_checkboxRadio.scss b/oocss/src/components/form/checkboxRadio/_checkboxRadio.scss index f8be5b03..480c5c3b 100644 --- a/oocss/src/components/form/checkboxRadio/_checkboxRadio.scss +++ b/oocss/src/components/form/checkboxRadio/_checkboxRadio.scss @@ -14,11 +14,15 @@ label { display: block; width: auto; - padding-left: 1.4em; + padding-left: 0; *zoom: 1; - *padding-left: 0; vertical-align: middle; } + //for labels and/or other adjacent text that spans more than one line + .hangingIndent { + padding-left: 1.4em; + } + input { margin-right: 5px; padding: 0; diff --git a/oocss/src/components/form/checkboxRadio/checkboxRadio.handlebars b/oocss/src/components/form/checkboxRadio/checkboxRadio.handlebars index 08b8201c..9a9f3da9 100644 --- a/oocss/src/components/form/checkboxRadio/checkboxRadio.handlebars +++ b/oocss/src/components/form/checkboxRadio/checkboxRadio.handlebars @@ -1,24 +1,44 @@ {{!include "../form.handlebars"}} {{!include "../label/label.handlebars"}} -{{#registerBlock "fradio" "id" "name" "classname"}} - - +{{#registerBlock "fcheckbox" "id" "name" "classname"}} + + - + {{/registerBlock}} -{{#registerBlock "fcheckbox" "id" "name" "classname"}} +{{#registerBlock "fcheckbox_hangingIndent" "id" "name" "classname"}} - {{/registerBlock}} +{{#registerBlock "fradio" "id" "name" "classname"}} + + + +{{/registerBlock}} + +{{#registerBlock "fradio_hangingIndent" "id" "name" "classname"}} + + + + +{{/registerBlock}} +

Checkbox

{{#formpres "" "" "htmlcode"}} {{#ffield}} @@ -26,9 +46,29 @@ {{/ffield}} {{/formpres}} +

If the label for your checkbox spans multiple lines, +or if you prefer not to nest your checkbox inside the label, +use .hangingIndent:

+ +{{#formpres "" "" "htmlcode"}} + {{#ffield}} + {{#fcheckbox_hangingIndent "checkbox1-1" "checkbox1"}}{{/fcheckbox_hangingIndent}} + {{/ffield}} +{{/formpres}} +

Radio

{{#formpres "" "" "htmlcode"}} {{#ffield}} {{#fradio "radio1-1" "radio1"}}{{/fradio}} {{/ffield}} +{{/formpres}} + +

If the label for your radio button spans multiple lines, +or if you prefer not to nest your checkbox inside the label, +use .hangingIndent:

+ +{{#formpres "" "" "htmlcode"}} + {{#ffield}} + {{#fradio_hangingIndent "radio1-1" "radio1"}}{{/fradio_hangingIndent}} + {{/ffield}} {{/formpres}} \ No newline at end of file