# rucksack-css

> A little bag of CSS superpowers

Latest version **1.0.2** (published 2017-08-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install rucksack-css
pnpm add rucksack-css
yarn add rucksack-css
bun add rucksack-css
```

Provides the command `rucksack`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2017-08-01 |
| First published | 2015-06-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 0.12.0 |
| Dependencies | 20 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1829 |
| Author | Sean King |
| Maintainers | seaneking |
| Keywords | rucksack, postcss, css, framework, boilerplate |

## Links

- npm: https://www.npmjs.com/package/rucksack-css
- Repository: https://github.com/simplaio/rucksack
- Issues: https://github.com/simplaio/rucksack/issues
- npm.io page: https://npm.io/package/rucksack-css

## Dependencies (20)

- [laggard](https://npm.io/package/laggard.md) ^2.0.0
- [postcss](https://npm.io/package/postcss.md) ^6.0.8
- [minimist](https://npm.io/package/minimist.md) ^1.1.2
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^7.1.2
- [postcss-vmin](https://npm.io/package/postcss-vmin.md) ^3.0.0
- [postcss-alias](https://npm.io/package/postcss-alias.md) ^2.0.0
- [postcss-easings](https://npm.io/package/postcss-easings.md) ^1.0.0
- [postcss-hexrgba](https://npm.io/package/postcss-hexrgba.md) ^1.0.0
- [postcss-opacity](https://npm.io/package/postcss-opacity.md) ^5.0.0
- [read-file-stdin](https://npm.io/package/read-file-stdin.md) ^0.2.0
- [postcss-clearfix](https://npm.io/package/postcss-clearfix.md) ^2.0.1
- [postcss-fontpath](https://npm.io/package/postcss-fontpath.md) ^1.0.0
- [postcss-position](https://npm.io/package/postcss-position.md) ^1.0.0
- [postcss-reporter](https://npm.io/package/postcss-reporter.md) ^5.0.0
- [write-file-stdout](https://npm.io/package/write-file-stdout.md) ^0.0.2
- [postcss-input-style](https://npm.io/package/postcss-input-style.md) ^1.0.0
- [postcss-pseudoelements](https://npm.io/package/postcss-pseudoelements.md) ^5.0.0
- [postcss-responsive-type](https://npm.io/package/postcss-responsive-type.md) ^1.0.0
- [postcss-quantity-queries](https://npm.io/package/postcss-quantity-queries.md) ^0.5.0
- [postcss-color-rgba-fallback](https://npm.io/package/postcss-color-rgba-fallback.md) ^3.0.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2017-08-01
- 0.1.0 (alpha) — 2015-06-14
- 1.0.1 — 2017-08-01
- 1.0.0 — 2017-08-01
- 0.9.1 — 2016-11-25
- 0.9.0 — 2016-11-25
- 0.8.6 — 2016-04-17
- 0.8.5 — 2015-10-17
- 0.8.4 — 2015-10-17
- 0.8.3 — 2015-10-17
- 0.8.2 — 2015-09-14
- 0.8.1 — 2015-09-14
- 0.8.0 — 2015-09-13
- 0.7.0 — 2015-09-06
- 0.6.8 — 2015-09-06
- … 18 more at https://npm.io/package/rucksack-css/versions

## README

<p align="center">
 <img src="http://simplaio.github.io/rucksack/logo.png" alt="rucksack logo" height="325" />
</p>

<p align="center">
  <a href="https://npmjs.org/package/rucksack-css"><img src="https://img.shields.io/npm/v/rucksack-css.svg" alt="NPM version" /></a>
  <a href="https://www.npmjs.com/package/rucksack-css"><img src="https://img.shields.io/npm/dm/rucksack-css.svg" alt="Downloads" /></a>
  <a href="https://travis-ci.org/simplaio/rucksack"><img src="https://travis-ci.org/simplaio/rucksack.svg?branch=master" alt="Build satus" /></a>
</p>

A little bag of CSS superpowers, built on [PostCSS][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](https://simplaio.github.io/rucksack)**

### Contents

- [Install](#install)
- [Usage](#usage)
  - [Gulp](#gulp)
  - [Grunt](#grunt)
  - [Broccoli](#broccoli)
  - [CLI](#cli)
  - [PostCSS](#postcss)
  - [Stylus](#stylus)
- [Features](#features)
  - [Responsive typography](#responsive-typography)
  - [Shorthand positioning syntax](#shorthand-positioning-syntax)
  - [Native clearfix](#native-clearfix)
  - [Automatic font src generation](#automatic-font-src-generation)
  - [Extra input pseudo-elements](#extra-input-pseudo-elements)
  - [Hex shortcuts for RGBA](#hex-shortcuts-for-rgba)
  - [More easing functions](#more-easing-functions)
  - [Quantity pseudo-selectors](#quantity-pseudo-selectors)
  - [CSS property aliases](#css-property-aliases)
- [Addons](#addons)
  - [Autoprefixer](#autoprefixer)
  - [Legacy Fallbacks](#legacy-fallbacks)
- [Options](#options)


## Install

Rucksack is available on NPM under `rucksack-css`, install it with Yarn or NPM

```sh
$ yarn add rucksack-css --dev
```


```sh
$ 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][gulp-rucksack]

```js
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][grunt-rucksack]

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

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

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

#### Broccoli

Use [broccoli-rucksack][broccoli-rucksack]

```js
const rucksack = require('broccoli-rucksack');

tree = rucksack(tree, [options]);
```

#### CLI

Process CSS directly on the command line

```sh
$ rucksack src/style.css style.css [options]
```

#### PostCSS

Rucksack is built on PostCSS, and can be used as a PostCSS plugin

```js
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][postcss] for examples for your environment.

#### Stylus

Rucksack can be used as a Stylus plugin with [PostStylus][poststylus]

```js
stylus(css).use(poststylus('rucksack-css'))
```

See the [PostStylus Docs][poststylus] 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

```css
.foo {
  font-size: responsive;
}
```

![Responsive Type Demo][type-demo]

#### Shorthand positioning syntax

Use the shorthand syntax from `margin` and `padding` on `position` properties

```css
.foo {
  position: absolute 0 20px;
}
```

#### Native clearfix

Generate bulletproof clearfixes with a new argument on the `clear` property

```css
.foo {
  clear: fix;
}
```

#### Automatic font src generation

Automatically generate `src` sets for `@font-face` based on the path to your font files

```css
@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

```css
input[type="range"]::track {
  height: 2px;
}
```

#### Hex shortcuts for RGBA

Generate RGBA colors from a hex color + alpha value

```css
.foo {
  color: rgba(#fff, 0.8);
}
```

#### More easing functions

Use a whole library of modern easing functions in transitions and animations

```css
.foo {
  transition: all 250ms ease-out-cubic;
}
```

#### Quantity pseudo-selectors

Create truly responsive designs with powerful content quantity selectors

```css
li:at-least(4) {
  color: blue;
}

li:between(4,6) {
  color: red;
}
```

#### CSS property aliases

```css
@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][caniuse], via [autoprefixer][autoprefixer].

#### Legacy Fallbacks

Automatically generate CSS fallbacks for legacy browsers, via [laggard][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`

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 King][sean]

[postcss]: https://github.com/postcss/postcss
[gulp-rucksack]: https://github.com/simplaio/gulp-rucksack
[grunt-rucksack]: https://github.com/simplaio/grunt-rucksack
[broccoli-rucksack]: https://github.com/simplaio/broccoli-rucksack
[poststylus]: https://github.com/seaneking/poststylus
[type-demo]: http://simplaio.github.io/rucksack/img/type-demo.gif
[caniuse]: http://caniuse.com
[autoprefixer]: https://github.com/postcss/autoprefixer
[laggard]: https://github.com/seaneking/laggard
[sean]: https://twitter.com/seaneking

---
_Source: https://npm.io/package/rucksack-css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._