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,input,input,input,input
Text area
textarea
Search
textarea
Dropdowns
Select
For select dropdowns, you will need to put your <select>
element in a wrapper, and apply the mixin to the wrapper instead:
Option 1Option 2Option 3
.select-wrap
Multiple select
select
Radio buttons
Make sure your <input type="radio">
elements are written in this format, with the label after the input:
Radio button 1
input
Checkboxes
Make sure your <input type="checkbox">
elements are written in this format, with the label after the input:
Checkbox 1
input
Buttons
input,input,button
Customization
Sassy Inputs use the following default variables:
;;;
To change a color, simply assign the variable before importing Sassy Inputs:
;;