Have ideas to improve npm?Join in the discussion! »

    node-refills

    1.0.1 • Public • Published

    Refills

    Prepackaged patterns and components, built on top of Bourbon, Bitters and Neat

    Requirements

    Installation

    To install as a development dependency, run:

    npm install --save-dev node-refills

    If you need it in production, replace --save-dev with --save.

    If a component/pattern has JavaScript it is placed in the HTML.erb file. Feel free to place it somewhere else in your project.

    Using Refills

    Scss

    All components/pattern should be fully responsive and follow the Neat examples.

    Avoid more than 2 levels of nesting for clarity and legibility of code.

    Try to use as little styling as possible. Use the styles that come with Bitters to keep everything consistent.

    Put media queries inline, don’t separate them since that will create a lot of repetitions of class names. If needed, for the sake of clarity, create a specific variable for a media query if a certain breakpoint changes the component/pattern drastically:

    $tab-mode: $medium-screen;
     
    @include media($tab-mode) { // $tab-mode is the same as $medium-screen here 
      border-radius: 0;
    }

    Create variables for any color or size that might appear in a refill, especially if it appears more than once in the component/pattern.

    Declare the variables inside of the component/pattern’s class like below. Note that variables should be interdependent to enable quick restyling.

    .card {
      $card-border-color: $base-border-color;
      $card-border: 1px solid $card-border-color;
      $card-background: lighten($card-border-color, 10);
      …

    Credits

    thoughtbot

    Refills is maintained and funded by thoughtbot, inc. Whenever a code snippet is borrowed or inspired by existing code, we try to credit the original developer/designer in our source code. Let us know if you think we have missed to do this.

    Tweet your questions or suggestions to @bourbonsass and while you’re at it follow us too.

    License

    Refills is Copyright © 2014 thoughtbot. It is free software, and may be redistributed under the terms specified in the LICENSE file.

    Install

    npm i node-refills

    DownloadsWeekly Downloads

    59

    Version

    1.0.1

    License

    ISC

    Last publish

    Collaborators

    • avatar