Pure CSS for Sass

purecss-sass is a Sass-powered version of Pure CSS for your applications, allowing to include all of Pure's components at once or load them individually.

Original Pure CSS files are converted using sass-convert and otherwise untouched and unmodified.

npm and Yarn

To install purecss-sass npm package execute this command:

$ npm install purecss-sass

If you are using Yarn:

$ yarn add purecss-sass

Ruby on Rails

Open your Gemfile and add this line:

gem 'purecss-sass'

Save Gemfile and execute bundle command to install the gem.

Open /app/assets/stylesheets/application.scss file and add this line:

@import 'purecss';

Note: Default Rails-generated application comes with .css file extension for stylesheet assets files, make sure you change it to .scss and remove all the *= require_tree . and *= require_self statements from the file.

Usage

By default, using @import 'purecss';, all of Pure CSS components are imported except non-responsive forms, which are identical to responsive forms minus media queries.

You can import individual Sass components like this:

@import 'purecss/base';             // Base
@import 'purecss/buttons';          // Buttons
@import 'purecss/forms';            // Forms (Responsive)
@import 'purecss/forms-nr';         // Forms (Non-Responsive)
@import 'purecss/grids';            // Grids (Base)
@import 'purecss/grids-responsive'; // Grids (Responsive)
@import 'purecss/menus';            // Menus (Responsive)
@import 'purecss/tables';           // Tables

Versioning

Pure CSS for Sass follows the upstream version of Pure. But the last version number may be ahead, in case there is a need to release project-specific changes.

Credits