Git Product home page Git Product logo

refills's Introduction

Refills

Components and patterns built with Bourbon and Neat

Follow the @bourbonsass Twitter account for updates.

Requirements

  • Sass 3.3+
  • Bourbon 4 (Refills is not currently compatible with Bourbon 5)
  • Neat 1.6+

It’s recommended that you use Autoprefixer, as Refills do not come packaged with vendor prefixes.

Installation

  1. Install Refills’ dependencies: Bourbon, Neat and jQuery (if you plan to use any components that require JavaScript).

  2. Go to the Refills website, click “Show Code” under the component or pattern that you want and copy-paste it into your project.

  3. Customize: Most of the components and patterns have a set of Sass variables that allow you to quickly tweak the look and feel.

Installation for Ruby on Rails

Alternative to copy-pasting manually, we also have a Refills gem that allows you to add components and patterns via Rake tasks.

  1. Add Refills to your Gemfile:
gem "refills", group: :development
  1. Then run:
bundle install
  1. Use the following Rails generators:

List all available snippets:

rails generate refills:list

Add a snippet:

rails generate refills:import SNIPPET

If you want to generate coffeescript instead of javascript, simply add --coffee

rails generate refills:import SNIPPET --coffee

This copies the snippet’s partial to app/views/refills, the stylesheet to app/assets/stylesheets/refills and the JavaScript to app/assets/javascripts/refills

Miscellaneous

If your css reset file does not add webkit antialias, add the following code to your Scss file:

body {
  -webkit-font-smoothing: antialiased;
}

The Bourbon family

  • Bourbon: A simple and lightweight mixin library for Sass
  • Neat: A lightweight semantic grid framework for Sass and Bourbon
  • Bitters: Scaffold styles, variables and structure for Bourbon projects
  • Refills: Components and patterns built with Bourbon and Neat

License

Copyright © 2014–2015 thoughtbot, inc. Refills is free software, and may be redistributed under the terms specified in the license.

Whenever code for Refills 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 any credit is absent.

About thoughtbot

thoughtbot logo

Refills is maintained and funded by thoughtbot, inc. The names and logos for thoughtbot are trademarks of thoughtbot, inc.

We love open source software! See our other projects or hire us to design, develop, and grow your product.

refills's People

Contributors

10fous avatar aaronbartell avatar altruity avatar brendastorer avatar calleluks avatar cllns avatar cmoel avatar creuter avatar croaky avatar deirdreallison avatar derekblank avatar derekprior avatar dinorosic avatar dkingman avatar drapergeek avatar fabienb4 avatar glenngillen avatar h0wn0w avatar hlogmans avatar jbender avatar jessieay avatar jferris avatar joelq avatar kennyadsl avatar kylefiedler avatar magnus-g avatar mxie avatar teoljungberg avatar tysongach avatar whmii avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.