A little bag of CSS superpowers, built on PostCSSpostcss.
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 simplaio.github.io
Contents
- Gulp - Grunt - Broccoli - CLI - PostCSS - Stylus - 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 - CSS property aliases - Autoprefixer - Legacy FallbacksInstall
Rucksack is available on NPM underrucksack-css
, install it with Yarn or NPM$ yarn add rucksack-css --dev
$ npm i rucksack-css --save-dev
Usage
Rucksack can be used as a PostCSS plugin, direclty on the command line, and has helpers available for most build tools.Gulp
Use gulp-rucksackgulp-rucksackconst gulp = require('gulp');
const rucksack = require('gulp-rucksack');
gulp.task('rucksack', () => {
return gulp.src('src/style.css')
.pipe(rucksack())
.pipe(gulp.dest('style.css'));
});
Grunt
Use grunt-rucksackgrunt-rucksackrequire('load-grunt-tasks')(grunt);
grunt.initConfig({
rucksack: {
compile: {
files: {
'style.css': 'src/style.css'
}
}
}
});
grunt.registerTask('default', ['rucksack']);
Broccoli
Use broccoli-rucksackbroccoli-rucksackconst 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 pluginconst 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 Docspostcss for examples for your environment.
Stylus
Rucksack can be used as a Stylus plugin with PostStyluspoststylusstylus(css).use(poststylus('rucksack-css'))
See the PostStylus Docspoststylus for more examples for your environment.
Features
Responsive typography
Automagical fluid typography with newresponsive
arguments to font-size
, line-height
, and letter-spacing
properties.foo {
font-size: responsive;
}
!Responsive Type Demotype-demo
Shorthand positioning syntax
Use the shorthand syntax frommargin
and padding
on position
properties.foo {
position: absolute 0 20px;
}
Native clearfix
Generate bulletproof clearfixes with a new argument on theclear
property.foo {
clear: fix;
}
Automatic font src generation
Automatically generatesrc
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 elementsinput[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 selectorsli: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;
}
Addons
Autoprefixer
Automatically apply vendor prefixes to relevant properties based on data from CanIUsecaniuse, via autoprefixerautoprefixer.Legacy Fallbacks
Automatically generate CSS fallbacks for legacy browsers, via laggardlaggard.Options
All features in Rucksack can be toggled by passing options on initialization. By default core features are set totrue
, 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 psuedo selectors alias
| Boolean | true
| Whether to enable to enable property aliases 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 © Sean Kingsean