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