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')
.pipe(rucksack())
.pipe(gulp.dest('style.css'));
});
Use grunt-rucksack
require('load-grunt-tasks')(grunt);
grunt.initConfig({
rucksack: {
compile: {
files: {
'style.css': 'src/style.css'
}
}
}
});
grunt.registerTask('default', ['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
stylus(css).use(poststylus('rucksack-css'))
See the PostStylus Docs for more examples for your environment.
--
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;
}
--
Automatically apply vendor prefixes to relevant properties based on data from CanIUse.
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)";
}
--
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
).
--
MIT © Simpla