Skip to content

Commit

Permalink
Made the form-field wrapper optional and currently specific to error …
Browse files Browse the repository at this point in the history 
…states (easier to implement when you generate forms programmatically)
  • Loading branch information
Jonathan Smiley committed Oct 26, 2011
1 parent 08d44c3 commit 702123a
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 217 deletions.
156 changes: 0 additions & 156 deletions index.html
View file
Expand Up @@ -116,162 +116,6 @@ <h3>Buttons</h3>
<p><a href="#" class="nice radius blue button">Nice Blue Button</a></p>
<p><a href="#" class="nice radius large blue button">Nice Blue Button</a></p>

<h3>Forms</h3>
<form>
<p>All form fields are encapsulated within a 'form-field' div. Inputs support a number of different base classes and supports several sizes.</p>
<div class='form-field'>
<label>Standard Input</label>
<input type="text" />
</div>

<div class='form-field'>
<label>Small Input</label>
<input type="text" class="small" />
</div>

<div class='form-field'>
<label>Medium Input</label>
<input type="text" class="medium" />
</div>

<div class='form-field'>
<label>Large Input</label>
<input type="text" class="large" />
</div>

<div class='form-field'>
<label>Oversize Input</label>
<input type="text" class="oversize" />
</div>

<p>Inline labels are accomplished using the HTML5 Placeholder attribute, with a built-in JS fallback.</p>
<div class='form-field'>
<input type="text" placeholder="Inline label" />
</div>

<p>Error states are set on the 'form-field' div. A small element can be also be placed for the error message.</p>
<div class='form-field error'>
<label>Medium Input</label>
<input type="text" class="medium" />
<small>Whoa, cowboy. Try that again.</small>
</div>

<div class='form-field'>
<label>Textarea</label>
<textarea>This is a textarea</textarea>
</div>

<div class='form-field'>
<label>Inline Label Textarea</label>
<textarea placeholder="This is a text area"></textarea>
</div>

<div class='form-field'>
<label for="checkbox1"><input type="checkbox" id="checkbox1"> Label for Checkbox</label>
</div>

<div class='form-field'>
<label for="radio1"><input type="radio" id="radio1"> Label for Radio</label>
</div>

<div class='form-field'>
<label>Dropdown Label</label>
<select>
<option>This is a dropdown</option>
<option>This is another option</option>
<option>Look, a third option</option>
</select>
</div>

<div class="row">
<div class="seven columns">
<fieldset>
<h5>Fieldset Header H2</h5>
<p>This is a paragraph within a fieldset.</p>

<div class='form-field'>
<label>Standard Input</label>
<input type="text" />
</div>
</fieldset>
</div>
</div>
</form>
<hr>
<form class="nice">
<p>Changing the form style to a slightly fancier version is dead simple - just add a class of 'nice' to the form itself.</p>

<div class='form-field'>
<label>Standard Input</label>
<input type="text" />
</div>

<div class='form-field'>
<input type="text" placeholder="Inline label" />
</div>

<div class='form-field'>
<label>Small Input</label>
<input type="text" class="small" />
</div>

<div class='form-field error'>
<label>Medium Input</label>
<input type="text" class="medium" />
<small>Whoa, cowboy. Try that again.</small>
</div>

<div class='form-field'>
<label>Large Input</label>
<input type="text" class="large" />
</div>

<div class='form-field'>
<label>Oversize Input</label>
<input type="text" class="oversize" />
</div>

<div class='form-field'>
<label>Textarea</label>
<textarea>This is a textarea</textarea>
</div>

<div class='form-field'>
<label>Inline Label Textarea</label>
<textarea placeholder="This is a text area"></textarea>
</div>

<div class='form-field'>
<label for="checkbox1"><input type="checkbox" id="checkbox1"> Label for Checkbox</label>
</div>

<div class='form-field'>
<label for="radio1"><input type="radio" id="radio1"> Label for Radio</label>
</div>

<div class='form-field'>
<label>Dropdown Label</label>
<select>
<option>This is a dropdown</option>
<option>This is another option</option>
<option>Look, a third option</option>
</select>
</div>

<div class="row">
<div class="seven columns">
<fieldset>
<h5>Fieldset Header H2</h5>
<p>This is a paragraph within a fieldset.</p>

<div class='form-field'>
<label>Standard Input</label>
<input type="text" />
</div>
</fieldset>
</div>
</div>
</form>
</div>

<div class="four columns">
Expand Down
103 changes: 58 additions & 45 deletions marketing/docs/forms.php
View file
Expand Up @@ -32,12 +32,9 @@
<h4 class="subheader">Forms are not a lot of fun. We've taken that lack of fun and dodged it with this ready-made code. In this release there are two sets of forms styles - basic and nice. Both are simple, both are flexible, both are easy to customize. <strong>Make sure to include app.js if you're going to use these forms.</strong></h4>
<hr />

<h4>Simple Forms</h4>
<h4>Forms</h4>
<form>

<p>Inputs support a number of different base classes. Any text input has a class of 'input-text' and supports several sizes:</p>
<p><script type="text/javascript" src="http://snipt.net/embed/59fb7e2a620f661f436fdf387d18ff8e"></script></p>

<label>Standard Input</label>
<input type="text" class="input-text" />

Expand All @@ -53,64 +50,80 @@
<label>Oversize Input</label>
<input type="text" class="oversize input-text" />

<h5>Inline Labels</h5>
<p>Inline labels are accomplished using the HTML5 Placeholder attribute, with a built-in JS fallback.</p>
<p><script type="text/javascript" src="http://snipt.net/embed/5a386d145be845626eec7c1543fdc62a"></script></p>
<input type="text" class="input-text" placeholder="Inline label" />

<p>Error states are built to be as flexible as they need to. Simple color classes can apply to labels and inputs, and a small element can be also be placed for the error message.</p>
<p><script type="text/javascript" src="http://snipt.net/embed/beace3fd172387e1ed25c3872fe9c83a"></script></p>



<h5>Error States</h5>
<p>Error states can be applied in two ways:</p>
<ul class="disc">
<li>Using a wrapper for div.form-field.error, which will apply styles to text inputs, labels, and a small.error message (optional). This is ideal for programmatically generated forms.</li>
<li>You can also apply the .red class to labels, inputs, and also append a small.error.</li>
</ul>

<div class='form-field error'>
<label>Medium Input (with wrapper)</label>
<input type="text" class="medium input-text" />
<small>Whoa, cowboy. Try that again.</small>
</div>

<label class="red">Medium Input</label>
<input type="text" class="red medium input-text" />
<input type="text" class="medium input-text red" />
<small class="error">Whoa, cowboy. Try that again.</small>

<label>Textarea</label>
<textarea>This is a textarea</textarea>

<label>Inline Label Textarea</label>
<textarea placeholder="This is a text area"></textarea>

<label for="checkbox1"><input type="checkbox" id="checkbox1"> Label for Checkbox</label>

<label for="radio1"><input type="radio" id="radio1"> Label for Radio</label>

<label>Dropdown Label</label>
<select>
<option>This is a dropdown</option>
<option>This is another option</option>
<option>Look, a third option</option>
</select>

<div class="row"><div class="seven columns">
<fieldset>
<h5>Fieldset Header H2</h5>
<p>This is a paragraph within a fieldset.</p>

<label>Standard Input</label> <input type="text" class="input-text" />
</fieldset>
</div></div>

<label>Dropdown Label</label>
<select>
<option>This is a dropdown</option>
<option>This is another option</option>
<option>Look, a third option</option>
</select>

<div class="row">
<div class="seven columns">
<fieldset>
<h5>Fieldset Header H2</h5>
<p>This is a paragraph within a fieldset.</p>

<label>Standard Input</label>
<input type="text" class="input-text" />
</fieldset>
</div>
</div>
</form>

<hr />

<h4>Nice Forms</h4>
<form class="nice">

<p>Changing the form style to a slightly fancier version is dead simple - just add a class of 'nice' to the form itself.</p>
<p><script type="text/javascript" src="http://snipt.net/embed/47160da7cd2018c3522784dd1f1310b1"></script></p>


<label>Standard Input</label>
<input type="text" class="input-text" />

<input type="text" class="input-text" placeholder="Inline label" />
<input type="text" placeholder="Inline label" class="input-text" />

<label>Small Input</label>
<input type="text" class="small input-text" />

<div class='form-field error'>
<label>Medium Input (with wrapper)</label>
<input type="text" class="medium input-text" />
<small>Whoa, cowboy. Try that again.</small>
</div>

<label class="red">Medium Input</label>
<input type="text" class="medium input-text" />
<input type="text" class="medium red input-text" />
<small class="error">Whoa, cowboy. Try that again.</small>

<label>Large Input</label>
Expand All @@ -121,7 +134,7 @@

<label>Textarea</label>
<textarea>This is a textarea</textarea>

<label>Inline Label Textarea</label>
<textarea placeholder="This is a text area"></textarea>

Expand All @@ -136,19 +149,19 @@
<option>Look, a third option</option>
</select>

<div class="row"><div class="seven columns">
<fieldset>
<h5>Fieldset Header H2</h5>
<p>This is a paragraph within a fieldset.</p>

<label>Standard Input</label> <input type="text" class="input-text" />
</fieldset>
</div></div>


<div class="row">
<div class="seven columns">
<fieldset>
<h5>Fieldset Header H2</h5>
<p>This is a paragraph within a fieldset.</p>

<label>Standard Input</label>
<input type="text" class="input-text" />
</fieldset>
</div>
</div>
</form>


<hr />

<h3>Custom Forms</h3>
Expand Down
32 changes: 16 additions & 16 deletions stylesheets/forms.css
View file
Expand Up @@ -11,23 +11,23 @@
form { margin: 0 0 18px; }
form label { display: block; font-size: 13px; line-height: 18px; cursor: pointer; margin-bottom: 9px; }

div.form-field input, input.input-text, textarea { border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; }
div.form-field input, input.input-text, textarea, select { display: block; margin-bottom: 9px; }
div.form-field label + input, label + input.input-text, label + textarea, label + select, label + div.dropdown, select + div.dropdown { margin-top: -9px; }
input.input-text, textarea { border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; }
input.input-text, textarea, select { display: block; margin-bottom: 9px; }
label + input.input-text, label + textarea, label + select, label + div.dropdown, select + div.dropdown { margin-top: -9px; }

/* Text input and textarea font and padding */
div.form-field input, input.input-text, textarea { font-size: 13px; padding: 4px 3px 2px; outline: none !important; background: #fff; }
div.form-field input.oversize, input.input-text.oversize, textarea.oversize { font-size: 18px !important; padding: 4px 5px !important; }
div.form-field input:focus, input.input-text:focus, textarea:focus { background: #f9f9f9; }
input.input-text, textarea { font-size: 13px; padding: 4px 3px 2px; outline: none !important; background: #fff; }
input.input-text.oversize, textarea.oversize { font-size: 18px !important; padding: 4px 5px !important; }
input.input-text:focus, textarea:focus { background: #f9f9f9; }

/* Inlined Label Style */
input.placeholder, textarea.placeholder { color: #888; }

/* Text input and textarea sizes */
div.form-field input, input.input-text, textarea { width: 254px; }
div.form-field input.small, input.small, textarea.small { width: 134px; }
div.form-field input.medium, input.medium, textarea.medium { width: 254px; }
div.form-field input.large, input.large, textarea.large { width: 434px; }
input.input-text, textarea { width: 254px; }
input.small, textarea.small { width: 134px; }
input.medium, textarea.medium { width: 254px; }
input.large, textarea.large { width: 434px; }

/* Fieldsets */
form fieldset { padding: 9px 9px 2px 9px; border: solid 1px #ddd; margin: 18px 0; }
Expand All @@ -40,9 +40,9 @@
div.form-field.error label, label.red { color: red; }
div.form-field.error small, small.error { margin-top: -6px; display: block; margin-bottom: 9px; font-size: 11px; color: red; width: 260px; }

div.form-field.error .small + small, .small + .error { width: 140px; }
div.form-field.error .medium + small, .medium + .error { width: 260px; }
div.form-field.error .large + small, .large + .error { width: 440px; }
.small + small.error { width: 140px; }
.medium + small.error { width: 260px; }
.large + small.error { width: 440px; }

/* -----------------------------------------
Nicer Forms
Expand All @@ -57,9 +57,9 @@

form.nice div.form-field.error small, form.nice small.error { padding: 6px 4px; border: solid 0px red; border-width: 0px 1px 1px 1px; margin-top: -10px; background: red; color: #fff; font-size: 12px; font-weight: bold; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 2px; -webkit-border-bottom-right-radius: 2px; -moz-border-radius-bottomleft: 2px; -moz-border-radius-bottomright: 2px; }

form.nice div.form-field.error .small + small, form.nice .small + .error { width: 132px; }
form.nice div.form-field.error .medium + small, form.nice .medium + .error { width: 252px; }
form.nice div.form-field.error .large + small, form.nice .large + .error { width: 432px; }
form.nice div.form-field.error .small + small, form.nice .small + small.error { width: 132px; }
form.nice div.form-field.error .medium + small, form.nice .medium + small.error { width: 252px; }
form.nice div.form-field.error .large + small, form.nice .large + small.error { width: 432px; }

/* -----------------------------------------
Custom Forms
Expand Down

0 comments on commit 702123a

Please sign in to comment.