Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including rucksack-css with all npm packages installed. Try it out:

var rucksackCss = require("rucksack-css")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

rucksack-css v1.0.2

A little bag of CSS superpowers

rucksack logo

NPM version Downloads Build satus

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 simplaio.github.io

Contents

Install

Rucksack is available on NPM under rucksack-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-rucksack

const 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-rucksack

require('load-grunt-tasks')(grunt);

grunt.initConfig({
    rucksack: {
        compile: {
            files: {
                'style.css': 'src/style.css'
            }
        }
    }
});

grunt.registerTask('default', ['rucksack']);

Broccoli

Use broccoli-rucksack

const 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

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.

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.

Features

Responsive typography

Automagical fluid typography with new responsive arguments to font-size, line-height, and letter-spacing properties

.foo {
  font-size: responsive;
}

Responsive Type Demo

Shorthand positioning syntax

Use the shorthand syntax from margin and padding on position properties

.foo {
  position: absolute 0 20px;
}

Native clearfix

Generate bulletproof clearfixes with a new argument on the clear property

.foo {
  clear: fix;
}

Automatic font src generation

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

Extra input pseudo-elements

Standardize the unweidly <input type="range"> element across browsers with new ::track and ::thumb pseudo elements

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

Addons

Autoprefixer

Automatically apply vendor prefixes to relevant properties based on data from CanIUse, via autoprefixer.

Legacy Fallbacks

Automatically generate CSS fallbacks for legacy browsers, via laggard.

Options

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

OptionTypeDefaultDescription
responsiveTypeBooleantrueWhether to enable responsive typography
shorthandPositionBooleantrueWhether to enable shorthand position properties
quantityQueriesBooleantrueWhether to enable quantity query psuedo selectors
aliasBooleantrueWhether to enable to enable property aliases
inputPseudoBooleantrueWhether to enable whether to enable extra input pseudo elements
clearFixBooleantrueWhether to enable native clear fix
fontPathBooleantrueWhether to enable font src set generation
hexRGBABooleantrueWhether to enable hex RGBA shortcuts
easingsBooleantrueWhether to enable extra easing functions
fallbacksBooleanfalseWhether to enable CSS fallbacks addon
autoprefixerBooleanfalseWhether to enable autoprefixer addon
reporterBooleanfalseWhether to enable error reporting from plugins used inside Rucksack

MIT © Sean King

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free