| ℹ️ Rucksack has a successor! |
|---|
| Satchel is thew new Rucksack, built on CSS-in-JS |
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.
Read the full docs at rucksackcss.org/docs
Rucksack is available on NPM under rucksack-css
$ npm i rucksack-css -DAutomagical fluid typography with new responsive arguments to font-size, line-height, and letter-spacing properties
.foo {
font-size: responsive;
}
Use the shorthand syntax from margin and padding on position properties
.foo {
position: absolute 0 20px;
}Generate bulletproof clearfixes with a new argument on the clear property
.foo {
clear: fix;
}Automatically generate src sets for @font-face based on the path to your font files
@font-face {
font-family: 'My Font';
font-path: '/path/to/font/file';
}Standardize the unweidly <input type="range"> element across browsers with new ::track and ::thumb pseudo elements
input[type="range"]::track {
height: 2px;
}Generate RGBA colors from a hex color + alpha value
.foo {
color: rgba(#fff, 0.8);
}Use a whole library of modern easing functions in transitions and animations
.foo {
transition: all 250ms ease-out-cubic;
}Create truly responsive designs with powerful content quantity selectors
li:at-least(4) {
color: blue;
}
li:between(4,6) {
color: red;
}Automatically apply vendor prefixes to relevant properties based on data from CanIUse, via autoprefixer.
Automatically generate CSS fallbacks for legacy browsers, via laggard.
Rucksack is built on PostCSS, and can be used in most build tools and stacks easily.
Use gulp-postcss
const gulp = require('gulp');
const postcss = require('gulp-postcss');
const rucksack = require('rucksack-css');
gulp.task('rucksack', () => {
return gulp.src('src/*.css')
.pipe(postcss([ rucksack() ]))
.pipe(gulp.dest('dist'));
});Use postcss-loader
postcss.config.js
module.exports = {
plugins: {
'rucksack-css': {},
}
};webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'postcss-loader' ]
}
]
}
};Use grunt-postcss
grunt.initConfig({
postcss: {
options: {
processors: [
require('rucksack-css')()
]
},
dist: {
src: 'css/*.css'
}
}
});Use Rucksack on the command line with postcss-cli
$ npm i postcss-cli -gpostcss.config.js
module.exports = {
use: [ 'rucksack-css' ]
};$ postcss "input.css" -o 'output.css'Note: Rucksack currently ships with its own CLI tool, this will be deprecated in favor of using the more powerful PostCSS CLI directly in Rucksack 2
Since Rucksack is just a PostCSS plugin, you can also use it in JS/Node directly, via the PostCSS API
const 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 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.
All features in Rucksack can be toggled by passing options on initialization. By default core features are set to true, 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 pseudo selectors |
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 © Madeleine Ostoja
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
