sassy-inputs
Version:
Minimal CSS3 cross-browser form input styles
242 lines (199 loc) • 8.16 kB
HTML
<html>
<head>
<title>Sassy Inputs</title>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<a href="https://github.com/negomi/sassy-inputs/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
<div class="demo-wrap">
<h1>Sassy Inputs</h1>
<h4>Minimal CSS3 cross-browser form input styles.</h4>
<p>Sassy Inputs is a Sass mixin library designed to bring simple, uniform, unobtrusive styles to form input fields.</p>
<p>It aims to smooth out the differences in native form styling across browsers, by customizing input fields as much as is currently possible with pure CSS.</p>
<p>Sassy Inputs are customizable, fully keyboard operable, and include a disabled state.</p>
<h2>Getting started</h2>
<p>To download from npm and save to your <a href="https://docs.npmjs.com/files/package.json">package.json</a>:</p>
<code>npm install sassy-inputs --save</code>
<p>At the top of your Sass file, before you use any of the mixins:</p>
<code>@import "node_modules/sassy-inputs/sass/main";</code>
<h2>Mixins</h2>
<ul class="mixin-list">
<li><code>sassy-text</code></li>
<li><code>sassy-textarea</code></li>
<li><code>sassy-search</code></li>
<li><code>sassy-select</code></li>
<li><code>sassy-select-multiple</code></li>
<li><code>sassy-radio</code></li>
<li><code>sassy-checkbox</code></li>
<li><code>sassy-button</code></li>
</ul>
<h2>Examples & usage</h2>
<h3>Text fields</h3>
<h4>Text</h4>
<input type="text" name="demo_text" placeholder="Enter some text...">
<input type="text" name="demo_text" placeholder="Enter some text..." disabled>
<h4>Email</h4>
<input type="email" name="demo_email" placeholder="e.g. your@email.com">
<input type="email" name="demo_email" placeholder="e.g. your@email.com" disabled>
<h4>Password</h4>
<input type="password" name="demo_password" placeholder="Minimum 8 characters">
<input type="password" name="demo_password" placeholder="Minimum 8 characters" disabled>
<h4>URL</h4>
<input type="url" name="demo_url" placeholder="http://...">
<input type="url" name="demo_url" placeholder="http://..." disabled>
<h4>Number</h4>
<input type="number" name="demo_number" placeholder="Enter a number...">
<input type="number" name="demo_number" placeholder="Enter a number..." disabled>
<p>You can use the <code>sassy-text</code> mixin for most HTML5 plain single-line text fields, including email, password, number and URL.</p>
<pre class="sass-demo">
input[type=text],
input[type=url],
input[type=email],
input[type=password],
input[type=number] {
@include sassy-text;
}
</pre>
<h4>Text area</h4>
<textarea name="demo_textarea" rows="8" placeholder="Enter more text..."></textarea>
<textarea name="demo_textarea" rows="8" placeholder="Enter more text..." disabled></textarea>
<pre class="sass-demo">
textarea {
@include sassy-textarea;
}
</pre>
<h4>Search</h4>
<input type="search" name="demo_search" placeholder="Search for something...">
<input type="search" name="demo_search" placeholder="Search for something..." disabled>
<pre class="sass-demo">
textarea {
@include sassy-search;
}
</pre>
<h3>Dropdowns</h3>
<h4>Select</h4>
<div class="select-wrap">
<select>
<option value="option">Option 1</option>
<option value="option">Option 2</option>
<option value="option">Option 3</option>
<option value="option">Option 4</option>
<option value="option">Option 5</option>
</select>
</div>
<div class="select-wrap">
<select disabled>
<option value="option">Option 1</option>
<option value="option">Option 2</option>
<option value="option">Option 3</option>
<option value="option">Option 4</option>
<option value="option">Option 5</option>
</select>
</div>
<p>For select dropdowns, you will need to put your <code><select></code> element in a wrapper, and apply the mixin to the wrapper instead:</p>
<pre>
<div class="select-wrap">
<select>
<option value="option">Option 1</option>
<option value="option">Option 2</option>
<option value="option">Option 3</option>
</select>
</div>
</pre>
<pre class="sass-demo">
.select-wrap {
@include sassy-select;
}
</pre>
<h4>Multiple select</h4>
<select multiple>
<option value="option">Option 1</option>
<option value="option">Option 2</option>
<option value="option">Option 3</option>
<option value="option">Option 4</option>
<option value="option">Option 5</option>
</select>
<select multiple disabled>
<option value="option">Option 1</option>
<option value="option">Option 2</option>
<option value="option">Option 3</option>
<option value="option">Option 4</option>
<option value="option">Option 5</option>
</select>
<pre class="sass-demo">
select[multiple] {
@include sassy-select-multiple;
}
</pre>
<h3>Radio buttons</h3>
<fieldset>
<input id="radio1" type="radio" name="radio" value="radio1" checked>
<label for="radio1">Radio button 1</label>
<input id="radio2" type="radio" name="radio" value="radio2">
<label for="radio2">Radio button 2</label>
</fieldset>
<fieldset>
<input id="radio3" type="radio" name="radio-disabled" value="radio3" disabled checked>
<label for="radio3">Disabled checked</label>
<input id="radio4" type="radio" name="radio-disabled" value="radio4" disabled>
<label for="radio4">Disabled unchecked</label>
</fieldset>
<p>Make sure your <code><input type="radio"></code> elements are written in this format, with the label after the input:</p>
<pre>
<input type="radio" id="radio1" name="groupname" value="thisvalue">
<label for="radio1">Radio button 1</label>
</pre>
<pre class="sass-demo">
input[type=radio] {
@include sassy-radio;
}
</pre>
<h3>Checkboxes</h3>
<fieldset>
<input id="check1" type="checkbox" name="check" value="check1">
<label for="check1">Checkbox 1</label>
<input id="check2" type="checkbox" name="check" value="check2">
<label for="check2">Checkbox 2</label>
</fieldset>
<fieldset>
<input id="check3" type="checkbox" name="check-disabled" value="check3" disabled checked>
<label for="check3">Disabled checked</label>
<input id="check4" type="checkbox" name="check-disabled" value="check4" disabled>
<label for="check4">Disabled unchecked</label>
</fieldset>
<p>Make sure your <code><input type="checkbox"></code> elements are written in this format, with the label after the input:</p>
<pre>
<input type="checkbox" id="check1" name="groupname" value="thisvalue">
<label for="check1">Checkbox 1</label>
</pre>
<pre class="sass-demo">
input[type=checkbox] {
@include sassy-checkbox;
}
</pre>
<h3>Buttons</h3>
<button type="button" name="button">Submit</button>
<button type="button" name="button" disabled>Submit</button>
<pre class="sass-demo">
input[type=submit],
input[type=button],
button {
@include sassy-button;
}
</pre>
<h2>Customization</h2>
<p>Sassy Inputs use the following default variables:</p>
<pre>
$sassy-base-color: #777 !default;
$sassy-accent-color: coral !default;
$sassy-disabled-color: #eee !default;
</pre>
<p>To change a color, simply assign the variable before importing Sassy Inputs:</p>
<pre>
$sassy-accent-color: rgb(233, 206, 51);
@import "node_modules/sassy-inputs/sass/main";
</pre>
</div>
</body>
</html>