dabaaaz / rucksack

A little bag of CSS superpowers

Home Page:http://simplaio.github.io/rucksack

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

--

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

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-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)";
}

--

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).

--

License

MIT © Simpla

About

A little bag of CSS superpowers

http://simplaio.github.io/rucksack


Languages

Language:JavaScript 100.0%