A little bag of CSS superpowers

rucksack, postcss, css, framework, boilerplate, css-framework, postcss-plugins, responsive-typography
npm install rucksack-css@0.9.1


rucksack logo

NPM version Build satus Dependency Status

A little bag of CSS superpowers, built on PostCSS.

Rucksack makes CSS development less painful, with the features and shortcuts it should have come with out of the box.

Made with ♥ by the folks at Simpla.

Read the full docs at http://simplaio.github.io/rucksack


$ npm install --save rucksack-css



Use gulp-rucksack

var gulp = require('gulp');
var rucksack = require('gulp-rucksack');

gulp.task('rucksack', function() {
  return gulp.src('src/style.css')


Use grunt-rucksack


    rucksack: {
        compile: {
            files: {
                'style.css': 'src/style.css'

grunt.registerTask('default', ['rucksack']);


Use broccoli-rucksack

var rucksack = require('broccoli-rucksack');
tree = rucksack(tree, [options]);


Process CSS directly on the command line

$ rucksack src/style.css style.css [options]


Rucksack is built on PostCSS, and can be used as a PostCSS plugin.

var postcss = require('postcss'),
    rucksack = require('rucksack-css');

postcss([ rucksack() ])
  .process(css, { from: 'src/style.css', to: 'style.css' })
  .then(function (result) {
      fs.writeFileSync('style.css', result.css);
      if ( result.map ) fs.writeFileSync('style.css.map', result.map);

See the PostCSS Docs for examples for your environment.


Rucksack can be used as a Stylus plugin with PostStylus


See the PostStylus Docs for more examples for your environment.

Core Features

Automagical responsive typography

.foo {
  font-size: responsive;

Responsive Type Demo

Shorthand syntax for positioning properties

.foo {
  position: absolute 0 20px;

Native clearfix

.foo {
  clear: fix;

Input pseudo-elements

input[type="range"]::track {
  height: 2px;

Hex shortcuts for RGBA

.foo {
  color: rgba(#fff, 0.8);

Shorthand @font-face src sets (becomes FontSpring syntax)

@font-face {
  font-family: 'My Font';
  font-path: '/path/to/font/file';

Whole library of modern easing functions

.foo {
  transition: all 250ms ease-out-cubic;

Powerful quantity pseudo-selectors

li:at-least(4) {
  color: blue;

li:between(4,6) {
  color: red;

CSS property aliases

@alias {
  fs: font-size;
  bg: background;

.foo {
  fs: 16px;
  bg: #fff;

Optional Extras


Automatically apply vendor prefixes to relevant properties based on data from CanIUse - via autoprefixer.

Legacy Fallbacks

Automatically insert legacy fallbacks for modern properties - via laggard.

/* before */
.foo {
  color: rgba(0,0,0,0.8);
  width: 50vmin;

  opacity: 0.8;

/* after */
.foo {
  color: rgb(0,0,0);
  color: rgba(0,0,0,0.8);
  width: 50vm;
  width: 50vmin;

  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

Read the full docs at http://simplaio.github.io/rucksack


All features in Rucksack can be toggled on or off by passing options on initialization. By default all core features are set to true, and optional addons are set to false.

Core features (default to true):

  • responsiveType
  • shorthandPosition
  • quantityQueries
  • alias
  • inputPseudo
  • clearFix
  • fontPath
  • hexRGBA
  • easings

Addons (default to false):

  • fallbacks
  • autoprefixer

Error reporting

Enable reporting, which outputs helpful error and warning messages from the plugins used inside Rucksack to your console, with the reporter option. Defaults to false.

// Set in build tool, etc.
  // options


MIT © Simpla