Base Forms for Scales
These are the base styles for creating forms.
Requirements
Scales patterns use the Sass CSS preprocessor, you'll need either Ruby Sass or LibSass.
Installation
Usage
Scales provides default stacked forms, forms using an unordered/ordered list, inline forms, and inline form containers with stacked label/input:
Default stacked
<form>
<label for="account">Account #<small class="form-label--additional">(Cannot Change)</small></label>
<input class="text-input" id="account" type="num" value="123456789" readonly>
<label for="email">Email</label>
<input class="text-input" id="email" type="email" placeholder="Email">
<span class="helper-text">Enter your email address</span>
<label for="password">Password</label>
<input class="text-input" id="password" type="password" placeholder="Password" disabled>
<label for="gender">Gender</label>
<select id="gender">
<option>Female</option>
<option>Male</option>
<option>Other</option>
</select>
<label>Introduce yourself</label>
<textarea></textarea>
<label for="newsletter">
<input id="newsletter" type="checkbox"> Send me the newsletter
</label>
<button type="submit" class="btn">Sign in</button>
</form>
Using a list
<form>
<ul class="form-list">
<li class="input-container">
<label for="account">Account #<small class="form-label--additional">(Cannot Change)</small></label>
<input class="text-input" id="account" type="num" value="123456789" readonly>
</li>
<li class="input-container">
<label for="email">Email</label>
<input class="text-input" id="email" type="email" placeholder="Email">
</li>
<li class="input-container">
<label for="password">Password</label>
<input class="text-input" id="password" type="password" placeholder="Password" disabled>
</li>
<li class="input-container">
<label for="gender">Gender</label>
<select id="gender">
<option>Female</option>
<option>Male</option>
<option>Other</option>
</select>
</li>
<li class="input-container">
<label>Introduce yourself</label>
<textarea></textarea>
</li>
<li class="input-container">
<label for="newsletter">
<input id="newsletter" type="checkbox"> Send me the newsletter
</label>
</li>
</ul>
<button type="submit" class="btn">Sign in</button>
</form>
Inline
<form class="form-inline">
<label for="account">Account #<small class="form-label--additional">(Cannot Change)</small></label>
<input class="text-input" id="account" type="num" value="123456789" readonly>
<label for="email">Email</label>
<input class="text-input" id="email" type="email" placeholder="Email">
<span class="helper-text">Enter your email address</span>
<label for="password">Password</label>
<input class="text-input" id="password" type="password" placeholder="Password" disabled>
<label for="gender">Gender</label>
<select id="gender">
<option>Female</option>
<option>Male</option>
<option>Other</option>
</select>
<label>Introduce yourself</label>
<textarea></textarea>
<label for="newsletter">
<input id="newsletter" type="checkbox"> Send me the newsletter
</label>
<button type="submit" class="btn">Sign in</button>
</form>
Inline input containers with stacked label/input
<form>
<ul class="form-list">
<li class="input-container input-container--inline">
<label for="account">Account #<small class="form-label--additional">(Cannot Change)</small></label>
<input class="text-input" id="account" type="num" value="123456789" readonly>
</li>
<li class="input-container input-container--inline">
<label for="email">Email</label>
<input class="text-input" id="email" type="email" placeholder="Email">
</li>
<li class="input-container input-container--inline">
<label for="password">Password</label>
<input class="text-input" id="password" type="password" placeholder="Password" disabled>
</li>
<li class="input-container input-container--inline">
<label for="gender">Gender</label>
<select id="gender">
<option>Female</option>
<option>Male</option>
<option>Other</option>
</select>
</li>
<li class="input-container input-container--inline">
<label>Introduce yourself</label>
<textarea></textarea>
</li>
<li class="input-container input-container--inline">
<label for="newsletter">
<input id="newsletter" type="checkbox"> Send me the newsletter
</label>
</li>
<li class="input-container input-container--inline">
<button type="submit" class="btn">Sign in</button>
</li>
</ul>
</form>
Available Classes
.form-list
.input-container
.input-container--inline
.form-label
.form-label--additional
.text-input
.form-inline
.is-disabled
.is-readonly
.helper-text
Available Variables
$fieldset-padding
$text-input-padding
$text-input-border-width
$text-input-border-style
$text-input-border-color
$text-input-border-radius
$select-background-color
$input-container-margin-bottom
$input-container-inline-valign
$input-disabled-border-color
$input-disabled-background-color
$input-disabled-text-color
$input-readonly-border-color
$input-readonly-background-color
$input-readonly-text-color
-
$helper-text-hidden
- change fromtrue
to be visible by default
The Scales Namespace Variable
All Scales patterns expose the $scales-namespace
variable.
$scales-namespace
accepts a string that will prefix all Scales classes. The default value is null
.
To give all Scales classes a namespace, you will need to set this variable in a file that is imported before any scales files. For example:
@import your-project/settings; // $scales-namespace is set in this file
@import your-project/scales; // Imports the Scales library
@import your-project/project // The rest of your project imports