A Sass mixin library of minimal CSS3 cross-browser form input styles
Clone or download
Latest commit 87f4321 Apr 22, 2017
Permalink
Failed to load latest commit information.
sass Improve UX for select Oct 26, 2016
.gitignore Add build process Sep 21, 2015
LICENSE Initial commit Nov 12, 2014
README.md Add Bower installation docs Mar 17, 2016
bower.json v1.0.6 Apr 22, 2017
demo.css v1.0.5 Apr 22, 2017
demo.scss Add new demo Sep 22, 2015
gulpfile.js Add deployment scripts Sep 22, 2015
index.html Request fonts over https Apr 22, 2017
package.json v1.0.6 Apr 22, 2017

README.md

sassy-inputs

Minimal CSS3 cross-browser form input styles.

Sassy Inputs is a Sass mixin library designed to bring simple, uniform, unobtrusive styles to form input fields.

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.

Sassy Inputs are customizable, fully keyboard operable, and include a disabled state.

Running the project locally

In the project directory, run:

npm install
gulp

Then go to http://localhost:3000/ in a browser.

Getting started

Using npm

npm install sassy-inputs --save

At the top of your Sass file, before you use any of the mixins:

@import "node_modules/sassy-inputs/sass/main";

Using Bower

bower install sassy-inputs --save

At the top of your Sass file, before you use any of the mixins:

@import "bower_components/sassy-inputs/sass/main";

Mixins

  • sassy-text
  • sassy-textarea
  • sassy-search
  • sassy-select
  • sassy-select-multiple
  • sassy-radio
  • sassy-checkbox
  • sassy-button

Usage

Text fields

You can use the sassy-text mixin for most HTML5 plain single-line text fields, including text, email, password, number and URL.

input[type=text],
input[type=url],
input[type=email],
input[type=password],
input[type=number] {
  @include sassy-text;
}

Text area

textarea {
  @include sassy-textarea;
}

Search

textarea {
  @include sassy-search;
}

Dropdowns

Select

For select dropdowns, you will need to put your <select> element in a wrapper, and apply the mixin to the wrapper instead:

<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>
.select-wrap {
  @include sassy-select;
}

Multiple select

select[multiple] {
  @include sassy-select-multiple;
}

Radio buttons

Make sure your <input type="radio"> elements are written in this format, with the label after the input:

<input type="radio" id="radio1" name="groupname" value="thisvalue">
<label for="radio1">Radio button 1</label>
input[type=radio] {
  @include sassy-radio;
}

Checkboxes

Make sure your <input type="checkbox"> elements are written in this format, with the label after the input:

<input type="checkbox" id="check1" name="groupname" value="thisvalue">
<label for="check1">Checkbox 1</label>
input[type=checkbox] {
  @include sassy-checkbox;
}

Buttons

input[type=submit],
input[type=button],
button {
  @include sassy-button;
}

Customization

Sassy Inputs use the following default variables:

$sassy-base-color: #777 !default;
$sassy-accent-color: coral !default;
$sassy-disabled-color: #eee !default;

To change a color, simply assign the variable before importing Sassy Inputs:

$sassy-accent-color: rgb(233, 206, 51);
@import "node_modules/sassy-inputs/sass/main";