ℹ️ Rucksack has a successor!
Satchel is thew new Rucksack, built on CSS-in-JS

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.

Read the full docs at rucksackcss.org/docs

Contents

• Install
• Features
  • Responsive typography
  • Shorthand positioning syntax
  • Native clearfix
  • Automatic font src generation
  • Extra input pseudo-elements
  • Hex shortcuts for RGBA
  • More easing functions
  • Quantity pseudo-selectors
• Addons
  • Autoprefixer
  • Legacy Fallbacks
• Usage
  • Gulp
  • Webpack
  • Grunt
  • CLI
  • Javascript API
  • Stylus
• Options

Install

Rucksack is available on NPM under rucksack-css

$ npm i rucksack-css -D

Features

Responsive typography

Automagical fluid typography with new responsive arguments to font-size, line-height, and letter-spacing properties

.foo {
  font-size: responsive;
}

Shorthand positioning syntax

Use the shorthand syntax from margin and padding on position properties

.foo {
  position: absolute 0 20px;
}

Native clearfix

Generate bulletproof clearfixes with a new argument on the clear property

.foo {
  clear: fix;
}

Automatic font src generation

Automatically generate src sets for @font-face based on the path to your font files

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

Extra input pseudo-elements

Standardize the unweidly <input type="range"> element across browsers with new ::track and ::thumb pseudo elements

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

Hex shortcuts for RGBA

Generate RGBA colors from a hex color + alpha value

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

More easing functions

Use a whole library of modern easing functions in transitions and animations

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

Quantity pseudo-selectors

Create truly responsive designs with powerful content quantity selectors

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

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

Addons

Autoprefixer

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

Legacy Fallbacks

Automatically generate CSS fallbacks for legacy browsers, via laggard.

Usage

Rucksack is built on PostCSS, and can be used in most build tools and stacks easily.

Gulp

Use gulp-postcss

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const rucksack = require('rucksack-css');

gulp.task('rucksack', () => {
  return gulp.src('src/*.css')
    .pipe(postcss([ rucksack() ]))
    .pipe(gulp.dest('dist'));
});

Webpack

Use postcss-loader

postcss.config.js

module.exports = {
  plugins: {
    'rucksack-css': {},
  }
};

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'postcss-loader' ]
      }
    ]
  }
};

Grunt

Use grunt-postcss

grunt.initConfig({
  postcss: {
    options: {
      processors: [
        require('rucksack-css')()
      ]
    },
    dist: {
      src: 'css/*.css'
    }
  }
});

CLI

Use Rucksack on the command line with postcss-cli

$ npm i postcss-cli -g

postcss.config.js

module.exports = {
  use: [ 'rucksack-css' ]
};

$ postcss "input.css" -o 'output.css'

Note: Rucksack currently ships with its own CLI tool, this will be deprecated in favor of using the more powerful PostCSS CLI directly in Rucksack 2

Javascript API

Since Rucksack is just a PostCSS plugin, you can also use it in JS/Node directly, via the PostCSS API

const postcss = require('postcss');
const rucksack = require('rucksack-css');

postcss([ rucksack() ])
  .process(css, { from: 'src/style.css', to: 'style.css' })
  .then(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.

Stylus

Rucksack can be used as a Stylus plugin with PostStylus

stylus(css).use(poststylus('rucksack-css'))

See the PostStylus Docs for more examples for your environment.

Options

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

Option	Type	Default	Description
responsiveType	Boolean	true	Whether to enable responsive typography
shorthandPosition	Boolean	true	Whether to enable shorthand position properties
quantityQueries	Boolean	true	Whether to enable quantity query pseudo selectors
inputPseudo	Boolean	true	Whether to enable whether to enable extra input pseudo elements
clearFix	Boolean	true	Whether to enable native clear fix
fontPath	Boolean	true	Whether to enable font src set generation
hexRGBA	Boolean	true	Whether to enable hex RGBA shortcuts
easings	Boolean	true	Whether to enable extra easing functions
fallbacks	Boolean	false	Whether to enable CSS fallbacks addon
autoprefixer	Boolean	false	Whether to enable autoprefixer addon
reporter	Boolean	false	Whether to enable error reporting from plugins used inside Rucksack

---

MIT © Madeleine Ostoja