rucksack-css

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.

--

Install

$ npm install --save rucksack-css

Usage

Gulp

Use gulp-rucksack

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

gulp.task('rucksack', function() {
  return gulp.src('src/style.css')
    .pipe(rucksack())
    .pipe(gulp.dest('style.css'));
});

Grunt

Use grunt-rucksack

require('load-grunt-tasks')(grunt);

grunt.initConfig({
	rucksack: {
		compile: {
			files: {
				'style.css': 'src/style.css'
			}
		}
	}
});

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

Broccoli

Use broccoli-rucksack

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

CLI

Process CSS directly on the command line

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

PostCSS

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.

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.

--

Core Features

Automagical responsive typography

.foo {
  font-size: responsive;
}

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-elastic;
}

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

Autoprefixing

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

Legacy Fallbacks

Automatically insert legacy fallbacks for modern properties.

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

.foo::before{
  opacity: 0.8;
}

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

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

New Default Colors

Swap out those ugly default colors with replacements from Material Design Colors.

--

Options

You can toggle Rucksack's addons on or off by passing booleans to the relevant property.

.rucksack({
  /* options */
})

autoprefixer: Endable/disable autoprefixing (default: true).

fallbacks: Enable/disable legacy fallbacks (default: true).

colors: Enable/disable color replacements (default: true).

--

License

MIT © Simpla