sassy-inputs

    1.0.6 • Public • Published

    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";

    Install

    npm i sassy-inputs

    DownloadsWeekly Downloads

    79

    Version

    1.0.6

    License

    MIT

    Last publish

    Collaborators

    • negomi