Support <label><input></label> style for checkboxes and radio buttons

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)
 

oocss/README.md

@@ -107,9 +107,12 @@ These are the essential commands you'll be interested in:
 
 ## <a id="build"></a>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.
+<!-- commenting because my experience was that the project did not build automatically upon running the mac-start.command and I had to run make bw -->
+<!-- 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. 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.

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;

oocss/src/components/form/checkboxRadio/checkboxRadio.handlebars

@@ -1,34 +1,74 @@
 {{!include "../form.handlebars"}}
 {{!include "../label/label.handlebars"}}
 
-{{#registerBlock "fradio" "id" "name" "classname"}}
-  <span class="fieldItem radio{{#if $classname}} {{$classname}}{{/if}}">
-    <input type="radio" id="{{$id}}"{{#if $name}} name="{{$name}}"{{/if}}>
+{{#registerBlock "fcheckbox" "id" "name" "classname"}}
+  <span class="fieldItem checkbox{{#if $classname}} {{$classname}}{{/if}}">
+    <input type="checkbox" id="{{$id}}"{{#if $name}} name="{{$name}}"{{/if}}>
     <label for="{{$id}}">
-      Label for radio button
+      Label for checkbox
     </label>
-</span>
+  </span>
 {{/registerBlock}}
 
-{{#registerBlock "fcheckbox" "id" "name" "classname"}}
+{{#registerBlock "fcheckbox_hangingIndent" "id" "name" "classname"}}
   <span class="fieldItem checkbox{{#if $classname}} {{$classname}}{{/if}}">
     <input type="checkbox" id="{{$id}}"{{#if $name}} name="{{$name}}"{{/if}}>
-    <label for="{{$id}}">
-      Label for checkbox
+    <label for="{{$id}}" class="hangingIndent">
+      Label for<br>
+      checkbox
     </label>
   </span>
 {{/registerBlock}}
 
+{{#registerBlock "fradio" "id" "name" "classname"}}
+  <span class="fieldItem radio{{#if $classname}} {{$classname}}{{/if}}">
+    <label>
+      <input type="radio" id="{{$id}}"{{#if $name}} name="{{$name}}"{{/if}}>
+      Label for radio button
+    </label>
+</span>
+{{/registerBlock}}
+
+{{#registerBlock "fradio_hangingIndent" "id" "name" "classname"}}
+  <span class="fieldItem radio{{#if $classname}} {{$classname}}{{/if}}">
+    <input type="radio" id="{{$id}}"{{#if $name}} name="{{$name}}"{{/if}}>
+    <label for="{{$id}}" class="hangingIndent">
+      Label for<br>
+      radio button
+    </label>
+</span>
+{{/registerBlock}}
+
 <h3>Checkbox</h3>
 {{#formpres "" "" "htmlcode"}}
   {{#ffield}}
     {{#fcheckbox "checkbox1-1" "checkbox1"}}{{/fcheckbox}}
   {{/ffield}}
 {{/formpres}}
 
+<p>If the label for your checkbox spans multiple lines,
+or if you prefer not to nest your checkbox inside the label,
+use .hangingIndent:</p>
+
+{{#formpres "" "" "htmlcode"}}
+  {{#ffield}}
+    {{#fcheckbox_hangingIndent "checkbox1-1" "checkbox1"}}{{/fcheckbox_hangingIndent}}
+  {{/ffield}}
+{{/formpres}}
+
 <h3>Radio</h3>
 {{#formpres "" "" "htmlcode"}}
   {{#ffield}}
     {{#fradio "radio1-1" "radio1"}}{{/fradio}}
   {{/ffield}}
+{{/formpres}}
+
+<p>If the label for your radio button spans multiple lines,
+or if you prefer not to nest your checkbox inside the label,
+use .hangingIndent:</p>
+
+{{#formpres "" "" "htmlcode"}}
+  {{#ffield}}
+    {{#fradio_hangingIndent "radio1-1" "radio1"}}{{/fradio_hangingIndent}}
+  {{/ffield}}
 {{/formpres}}