zurb-foundation 3.2.5 → 4.0.0.rc1

data/docs/components/forms.html.erb

@@ -0,0 +1,468 @@
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Forms" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">With Foundation, we set out to create an easy to handle, powerful and versatile form layout system. A combination of form styles and the Foundation grid means you can do basically anything.</h4>
+
+        <form>
+          <fieldset>
+            <legend>Fieldset</legend>
+
+            <div class="row">
+              <div class="large-12 columns">
+                <label>Input Label</label>
+                <input type="text" placeholder="large-12.columns">
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="large-4 columns">
+                <label>Input Label</label>
+                <input type="text" placeholder="large-4.columns">
+              </div>
+              <div class="large-4 columns">
+                <label>Input Label</label>
+                <input type="text" placeholder="large-4.columns">
+              </div>
+              <div class="large-4 columns">
+                <div class="row collapse">
+                  <label>Input Label</label>
+                  <div class="small-9 columns">
+                    <input type="text" placeholder="small-9.columns">
+                  </div>
+                  <div class="small-3 columns">
+                    <span class="postfix">.com</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="large-12 columns">
+                <label>Textarea Label</label>
+                <textarea placeholder="small-12.columns"></textarea>
+              </div>
+            </div>
+
+          </fieldset>
+        </form>
+
+        <hr>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+
+        <h3>Building Forms with HTML</h3>
+        <p>OK, so you have a client that needs a form with an unhuman layout. "You can't back down because of some legal reason," he says. What are you to do? Foundation has you covered with versatile forms that looks great out of the box and are easily customizable as you need.</p>
+
+        <p>Form elements in Foundation are styled based on their type attribute rather than a class. Inputs in Foundation have another major advantage &mdash; they are full width by default. That means that inputs will run as wide as the column that contains them. However, you have two options which make these forms extremely versatile:</p>
+
+        <ul class="disc">
+          <li>You can size inputs using column sizes, like <code>.large-6</code>, <code>.small-6</code>.</li>
+          <li>You can create row elements inside your form and use columns for the form, including inputs, labels and more. Rows inside a form inherit some special padding to even up input spacing.</li>
+        </ul>
+
+        <p>This ultimately adds a bit of code to your forms, but it's worth the trade off! Here's what the example above looks like in HTML:</p>
+
+<%= code_example '
+<form>
+  <fieldset>
+    <legend>Fieldset</legend>
+
+    <div class="row">
+      <div class="large-12 columns">
+        <label>Input Label</label>
+        <input type="text" placeholder="large-12.columns">
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-4 columns">
+        <label>Input Label</label>
+        <input type="text" placeholder="large-4.columns">
+      </div>
+      <div class="large-4 columns">
+        <label>Input Label</label>
+        <input type="text" placeholder="large-4.columns">
+      </div>
+      <div class="large-4 columns">
+        <div class="row collapse">
+          <label>Input Label</label>
+          <div class="small-9 columns">
+            <input type="text" placeholder="small-9.columns">
+          </div>
+          <div class="small-3 columns">
+            <span class="postfix">.com</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+        <label>Textarea Label</label>
+        <textarea placeholder="small-12.columns"></textarea>
+      </div>
+    </div>
+
+  </fieldset>
+</form>', :html %>
+
+        <hr>
+
+        <h4>Inline Labels</h4>
+        <p>Sometimes you want a form with labels to the left of your inputs. Piece of cake. You can put the label inside a different column to the left of the input. Then add a class of <code>.right</code> to the label to have it align to the right.</p>
+
+<%= code_example '
+<form>
+  <div class="row">
+    <div class="small-8">
+      <div class="row">
+        <div class="small-3 columns">
+          <label for="right-label" class="right">Label</label>
+        </div>
+        <div class="small-9 columns">
+          <input type="text" id="right-label" placeholder="Inline Text Input">
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+', :html %>
+
+        <form>
+          <div class="row">
+            <div class="small-8">
+              <div class="row">
+                <div class="small-3 columns">
+                  <label for="right-label" class="right">Label</label>
+                </div>
+                <div class="small-9 columns">
+                  <input type="text" id="right-label" placeholder="Inline Text Input">
+                </div>
+              </div>
+            </div>
+          </div>
+        </form>
+
+        <p>Adding a class of <code>.inline</code> will have it vertically center against an input. You can use one or both of these classes to accomplish the look you want.</p>
+
+<%= code_example '
+<form>
+  <div class="row">
+    <div class="small-8">
+      <div class="row">
+        <div class="small-3 columns">
+          <label for="right-label" class="right inline">Label</label>
+        </div>
+        <div class="small-9 columns">
+          <input type="text" id="right-label" placeholder="Inline Text Input">
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+', :html %>
+
+        <form>
+          <div class="row">
+            <div class="small-8">
+              <div class="row">
+                <div class="small-3 columns">
+                  <label for="right-label" class="right inline">Label</label>
+                </div>
+                <div class="small-9 columns">
+                  <input type="text" id="right-label" placeholder="Inline Text Input">
+                </div>
+              </div>
+            </div>
+          </div>
+        </form>
+
+        <hr>
+
+        <h4>Defining a Fieldset</h4>
+        <p>We don't see them too much, but one of the useful form elements included with Foundation is <code>&lt;fieldset&gt;</code>. This is used as a wrapper right inside the form element. Right after you define a fieldset, you can include a legend title by using <code>&lt;legend&gt;</code>. Here's some HTML to help make copy paste.</p>
+
+<%= code_example '
+<form>
+  <fieldset>
+    <legend>Fieldset Legend</legend>
+
+    <label>Input Label</label>
+    <input type="text" placeholder="Inputs and other form elements go inside...">
+  </fieldset>
+</form>', :html %>
+
+        <form>
+          <fieldset>
+            <legend>Fieldset Legend</legend>
+
+            <label>Input Label</label>
+            <input type="text" placeholder="Inputs and other form elements go inside...">
+          </fieldset>
+        </form>
+
+        <hr>
+
+        <h4>Pre/Postfix Labels &amp; Actions</h4>
+        <p>Foundation forms support actions tied to buttons, and prefix / postfix labels, through a versatile approach using special grid properties. Essentially you can use <code>&lt;row class="collapse"&gt;</code> to create label / action / input combinations. You use the Foundation columns to define the size of the pre/postfix <code>&lt;span class="postfix"&gt;</code> or <code>&lt;span class="prefix"&gt;</code>. Here are a few examples:</p>
+
+<%= code_example '
+<form>
+  <div class="row collapse">
+    <div class="small-3 large-2 columns">
+      <span class="prefix">http://</span>
+    </div>
+    <div class="small-9 large-10 columns">
+      <input type="text" placeholder="Enter your URL...">
+    </div>
+  </div>
+  <div class="row">
+    <div class="large-6 columns">
+      <div class="row collapse">
+        <div class="small-10 columns">
+          <input type="text" placeholder="Hex Value">
+        </div>
+        <div class="small-2 columns">
+          <a href="#" class="button prefix">Action</a>
+        </div>
+      </div>
+    </div>
+    <div class="large-6 columns">
+      <div class="row collapse">
+        <div class="small-9 columns">
+          <input type="text" placeholder="Value">
+        </div>
+        <div class="small-3 columns">
+          <span class="postfix radius">Label</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>', :html %>
+
+        <form>
+          <div class="row collapse">
+            <div class="small-3 large-2 columns">
+              <span class="prefix">http://</span>
+            </div>
+            <div class="small-9 large-10 columns">
+              <input type="text" placeholder="Enter your URL...">
+            </div>
+          </div>
+          <div class="row">
+            <div class="large-6 columns">
+              <div class="row collapse">
+                <div class="small-10 columns">
+                  <input type="text" placeholder="Hex Value">
+                </div>
+                <div class="small-2 columns">
+                  <a href="#" class="button prefix">Action</a>
+                </div>
+              </div>
+            </div>
+            <div class="large-6 columns">
+              <div class="row collapse">
+                <div class="small-9 columns">
+                  <input type="text" placeholder="Value">
+                </div>
+                <div class="small-3 columns">
+                  <span class="postfix radius">Label</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </form>
+
+        <p>You'll notice that on the last postfix element, we've included the class of <code>radius</code>. This adds the border radius on the appropriate edge depending on whether it's a prefix or a postfix element. You can even include buttons with these styles, just apply the <code>.button</code> as well as the pre/postfix class.</p>
+
+        <hr>
+
+        <h4>Error States</h4>
+        <p>Foundation includes error states for labels, inputs and messaging that you can have your app generate programatically. You can attach a class of <code>.error</code> either to the individual elements (label, input, small) or to a column/div.</p>
+
+<%= code_example '
+<form>
+  <div class="row">
+    <div class="large-6 columns">
+      <label class="error">Error</label>
+      <input type="text" class="error" />
+      <small class="error">Invalid entry</small>
+    </div>
+    <div class="large-6 columns error">
+      <label>Another Error</label>
+      <input type="text" />
+      <small>Invalid entry</small>
+    </div>
+  </div>
+  <textarea class="error" placeholder="Message..."></textarea>
+  <small class="error">Invalid entry</small>
+</form>', :html %>
+
+        <form>
+          <div class="row">
+            <div class="large-6 columns">
+              <label class="error">Error</label>
+              <input type="text" class="error" />
+              <small class="error">Invalid entry</small>
+            </div>
+
+            <div class="large-6 columns error">
+              <label>Another Error</label>
+              <input type="text" />
+              <small>Invalid entry</small>
+            </div>
+          </div>
+
+          <textarea class="error" placeholder="Message..."></textarea>
+          <small class="error">Invalid entry</small>
+        </form>
+
+        <hr>
+
+        <h3>Build with Mixins</h3>
+        <p>A lot of elements in Foundation can be created using SCSS mixins so that you can include your own classes and just enough style as needed for the job at hand. To use these mixins, you'll need to have the extension installed or grab <a href="#">_foundation-global.scss</a> and <a href="#">_forms.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+
+<%= code_example '
+@import "foundation/foundation-global", "foundation/forms";', :css %>
+
+        <p>We include most of the form styles by default, but the ones that are attached to HTML classes can be accessed via the mixins below. The error states have mixins, but we suggest using the classes since they are usually only visible temporarily.</p>
+
+        <h5>The Pre/Postfix Mixin</h5>
+        <p>With the form label mixin, you can control which classes make your labels line up how you want them to next to their form elements. You'll use these in conjunction with the grid mixin.</p>
+
+<%= code_example '
+<form>
+  <div class="row collapse">
+    <span class="your-prefix-class">Label</span>
+    <input type="text" class="your-label-class" placeholder="Value">
+  </div>
+</form>', :html %>
+
+        <p>Since you need to wrap columns in a container anyway, we've used a <code>.row.collapse</code> rather than creating our own class to hold those mixins. Feel free to attach those styles to your own class or ID though.</p>
+
+        <h6>The base mixin:</h6>
+
+<%= code_example '
+.your-prefix-class {
+  @include prefix-postfix-base;
+  @include grid-column($columns:3,$float:left);
+}
+
+input[type="text"].your-input-class {
+  @include grid-column($columns:9);
+}', :css %>
+
+        <form>
+          <div class="row collapse">
+            <span class="attached-label">Label</span>
+            <input type="text" class="attached-input" placeholder="Value">
+          </div>
+        </form>
+
+        <h6>The Prefix &amp; Postfix Style Mixins</h6>
+        <p>You can control the style you add to your prefix or postfix elements using this mixin, it looks like this:</p>
+
+<%= code_example '
+.your-prefix-class {
+  @include prefix-postfix-base;
+  @include prefix;
+  @include grid-column($columns:3,$float:left);
+}
+
+input[type="text"].your-input-class {
+  @include grid-column($columns:9);
+}', :css %>
+
+        <form>
+          <div class="row collapse">
+            <span class="attached-label style">Label</span>
+            <input type="text" class="attached-input" placeholder="Value">
+          </div>
+        </form>
+
+        <p>There are two options you can set with the prefix and postfix mixins, these are:</p>
+
+<%= code_example '
+@include prefix($bg, $is-button);
+
+/* Control the background color, which also effect the border and font color */
+$bg: $input-prefix-bg
+
+/* If you prefix or postfix element is a button, make sure to set this to true */
+$is-button: false
+', :css %>
+
+        <form>
+          <div class="row collapse">
+            <span class="attached-label style custom">Label</span>
+            <input type="text" class="attached-input" placeholder="Value">
+          </div>
+        </form>
+
+        <h5>Default SCSS Variables</h5>
+<%= code_example '
+/* We use this to set the base for lots of form spacing and positioning styles */
+$form-spacing:                       emCalc(16px);
+
+/* We use these to style the labels in different ways */
+$label-pointer:                      pointer;
+$label-font-size:                    emCalc(14px);
+$label-font-weight:                  500;
+$label-font-color:                   lighten(#000, 30%);
+$label-bottom-margin:                emCalc(3px);
+$input-font-color:                   rgba(0,0,0,0.75);
+$input-font-size:                    emCalc(14px);
+$input-bg-color:                     #fff;
+$input-focus-bg-color:               darken(#fff, 2%);
+$input-border-color:                 darken(#fff, 20%);
+$input-focus-border-color:           darken(#fff, 40%);
+$input-border-style:                 solid;
+$input-border-width:                 1px;
+$input-disabled-bg:                  #ddd;
+$input-box-shadow:                   inset 0 1px 2px rgba(0,0,0,0.1);
+
+/* We use these to style the fieldset border and spacing. */
+$fieldset-border-style:              solid;
+$fieldset-border-width:              1px;
+$fieldset-border-color:              #ddd;
+$fieldset-padding:                   emCalc(20px);
+$fieldset-margin:                    emCalc(18px) 0;
+
+/* We use these to style the legends when you use them */
+$legend-bg:                          #fff;
+$legend-font-weight:                 bold;
+$legend-padding:                     0 emCalc(3px);
+
+/* We use these to style the prefix and postfix input elements */
+$input-prefix-bg:                    darken(#fff, 5%);
+$input-prefix-border-color:          darken(#fff, 20%);
+$input-prefix-border-size:           1px;
+$input-prefix-border-type:           solid;
+$input-prefix-overflow:              hidden;
+$input-prefix-font-color:            #333;
+$input-prefix-font-color-alt:        #fff;
+
+/* We use these to style the error states for inputs and labels */
+$input-error-message-padding:        emCalc(6px) emCalc(4px);
+$input-error-message-top:            -($form-spacing) - emCalc(5px);
+$input-error-message-font-size:      emCalc(12px);
+$input-error-message-font-weight:    bold;
+$input-error-message-font-color:     #fff;
+$input-error-message-font-color-alt: #333;
+', :css %>
+
+        <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_foundation-global.scss</strong>.</p>
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>