1 | <p align="center">
|
2 | <img src="http://simplaio.github.io/rucksack/logo.png" alt="rucksack logo" height="325" />
|
3 | </p>
|
4 |
|
5 | <p align="center">
|
6 | <a href="https://npmjs.org/package/rucksack-css"><img src="https://img.shields.io/npm/v/rucksack-css.svg" alt="NPM version" /></a>
|
7 | <a href="https://www.npmjs.com/package/rucksack-css"><img src="https://img.shields.io/npm/dm/rucksack-css.svg" alt="Downloads" /></a>
|
8 | <a href="https://travis-ci.org/simplaio/rucksack"><img src="https://travis-ci.org/simplaio/rucksack.svg?branch=master" alt="Build satus" /></a>
|
9 | </p>
|
10 |
|
11 | A little bag of CSS superpowers, built on [PostCSS][postcss].
|
12 |
|
13 | Rucksack makes CSS development less painful, with the features and shortcuts it should have come with out of the box.
|
14 |
|
15 | **Read the full docs at [simplaio.github.io](https://simplaio.github.io/rucksack)**
|
16 |
|
17 | ### Contents
|
18 |
|
19 | - [Install](#install)
|
20 | - [Usage](#usage)
|
21 | - [Gulp](#gulp)
|
22 | - [Grunt](#grunt)
|
23 | - [Broccoli](#broccoli)
|
24 | - [CLI](#cli)
|
25 | - [PostCSS](#postcss)
|
26 | - [Stylus](#stylus)
|
27 | - [Features](#features)
|
28 | - [Responsive typography](#responsive-typography)
|
29 | - [Shorthand positioning syntax](#shorthand-positioning-syntax)
|
30 | - [Native clearfix](#native-clearfix)
|
31 | - [Automatic font src generation](#automatic-font-src-generation)
|
32 | - [Extra input pseudo-elements](#extra-input-pseudo-elements)
|
33 | - [Hex shortcuts for RGBA](#hex-shortcuts-for-rgba)
|
34 | - [More easing functions](#more-easing-functions)
|
35 | - [Quantity pseudo-selectors](#quantity-pseudo-selectors)
|
36 | - [CSS property aliases](#css-property-aliases)
|
37 | - [Addons](#addons)
|
38 | - [Autoprefixer](#autoprefixer)
|
39 | - [Legacy Fallbacks](#legacy-fallbacks)
|
40 | - [Options](#options)
|
41 |
|
42 |
|
43 | ## Install
|
44 |
|
45 | Rucksack is available on NPM under `rucksack-css`, install it with Yarn or NPM
|
46 |
|
47 | ```sh
|
48 | $ yarn add rucksack-css --dev
|
49 | ```
|
50 |
|
51 |
|
52 | ```sh
|
53 | $ npm i rucksack-css --save-dev
|
54 | ```
|
55 |
|
56 | ## Usage
|
57 |
|
58 | Rucksack can be used as a PostCSS plugin, direclty on the command line, and has helpers available for most build tools.
|
59 |
|
60 | #### Gulp
|
61 |
|
62 | Use [gulp-rucksack][gulp-rucksack]
|
63 |
|
64 | ```js
|
65 | const gulp = require('gulp');
|
66 | const rucksack = require('gulp-rucksack');
|
67 |
|
68 | gulp.task('rucksack', () => {
|
69 | return gulp.src('src/style.css')
|
70 | .pipe(rucksack())
|
71 | .pipe(gulp.dest('style.css'));
|
72 | });
|
73 | ```
|
74 |
|
75 | #### Grunt
|
76 |
|
77 | Use [grunt-rucksack][grunt-rucksack]
|
78 |
|
79 | ```js
|
80 | require('load-grunt-tasks')(grunt);
|
81 |
|
82 | grunt.initConfig({
|
83 | rucksack: {
|
84 | compile: {
|
85 | files: {
|
86 | 'style.css': 'src/style.css'
|
87 | }
|
88 | }
|
89 | }
|
90 | });
|
91 |
|
92 | grunt.registerTask('default', ['rucksack']);
|
93 | ```
|
94 |
|
95 | #### Broccoli
|
96 |
|
97 | Use [broccoli-rucksack][broccoli-rucksack]
|
98 |
|
99 | ```js
|
100 | const rucksack = require('broccoli-rucksack');
|
101 |
|
102 | tree = rucksack(tree, [options]);
|
103 | ```
|
104 |
|
105 | #### CLI
|
106 |
|
107 | Process CSS directly on the command line
|
108 |
|
109 | ```sh
|
110 | $ rucksack src/style.css style.css [options]
|
111 | ```
|
112 |
|
113 | #### PostCSS
|
114 |
|
115 | Rucksack is built on PostCSS, and can be used as a PostCSS plugin
|
116 |
|
117 | ```js
|
118 | const postcss = require('postcss');
|
119 | const rucksack = require('rucksack-css');
|
120 |
|
121 | postcss([ rucksack() ])
|
122 | .process(css, { from: 'src/style.css', to: 'style.css' })
|
123 | .then(result => {
|
124 | fs.writeFileSync('style.css', result.css);
|
125 | if ( result.map ) fs.writeFileSync('style.css.map', result.map);
|
126 | });
|
127 | ```
|
128 |
|
129 | See the [PostCSS Docs][postcss] for examples for your environment.
|
130 |
|
131 | #### Stylus
|
132 |
|
133 | Rucksack can be used as a Stylus plugin with [PostStylus][poststylus]
|
134 |
|
135 | ```js
|
136 | stylus(css).use(poststylus('rucksack-css'))
|
137 | ```
|
138 |
|
139 | See the [PostStylus Docs][poststylus] for more examples for your environment.
|
140 |
|
141 | ## Features
|
142 |
|
143 | #### Responsive typography
|
144 |
|
145 | Automagical fluid typography with new `responsive` arguments to `font-size`, `line-height`, and `letter-spacing` properties
|
146 |
|
147 | ```css
|
148 | .foo {
|
149 | font-size: responsive;
|
150 | }
|
151 | ```
|
152 |
|
153 | ![Responsive Type Demo][type-demo]
|
154 |
|
155 | #### Shorthand positioning syntax
|
156 |
|
157 | Use the shorthand syntax from `margin` and `padding` on `position` properties
|
158 |
|
159 | ```css
|
160 | .foo {
|
161 | position: absolute 0 20px;
|
162 | }
|
163 | ```
|
164 |
|
165 | #### Native clearfix
|
166 |
|
167 | Generate bulletproof clearfixes with a new argument on the `clear` property
|
168 |
|
169 | ```css
|
170 | .foo {
|
171 | clear: fix;
|
172 | }
|
173 | ```
|
174 |
|
175 | #### Automatic font src generation
|
176 |
|
177 | Automatically generate `src` sets for `@font-face` based on the path to your font files
|
178 |
|
179 | ```css
|
180 | @font-face {
|
181 | font-family: 'My Font';
|
182 | font-path: '/path/to/font/file';
|
183 | }
|
184 | ```
|
185 |
|
186 | #### Extra input pseudo-elements
|
187 |
|
188 | Standardize the unweidly `<input type="range">` element across browsers with new `::track` and `::thumb` pseudo elements
|
189 |
|
190 | ```css
|
191 | input[type="range"]::track {
|
192 | height: 2px;
|
193 | }
|
194 | ```
|
195 |
|
196 | #### Hex shortcuts for RGBA
|
197 |
|
198 | Generate RGBA colors from a hex color + alpha value
|
199 |
|
200 | ```css
|
201 | .foo {
|
202 | color: rgba(#fff, 0.8);
|
203 | }
|
204 | ```
|
205 |
|
206 | #### More easing functions
|
207 |
|
208 | Use a whole library of modern easing functions in transitions and animations
|
209 |
|
210 | ```css
|
211 | .foo {
|
212 | transition: all 250ms ease-out-cubic;
|
213 | }
|
214 | ```
|
215 |
|
216 | #### Quantity pseudo-selectors
|
217 |
|
218 | Create truly responsive designs with powerful content quantity selectors
|
219 |
|
220 | ```css
|
221 | li:at-least(4) {
|
222 | color: blue;
|
223 | }
|
224 |
|
225 | li:between(4,6) {
|
226 | color: red;
|
227 | }
|
228 | ```
|
229 |
|
230 | #### CSS property aliases
|
231 |
|
232 | ```css
|
233 | @alias {
|
234 | fs: font-size;
|
235 | bg: background;
|
236 | }
|
237 |
|
238 | .foo {
|
239 | fs: 16px;
|
240 | bg: #fff;
|
241 | }
|
242 | ```
|
243 |
|
244 | ## Addons
|
245 |
|
246 | #### Autoprefixer
|
247 |
|
248 | Automatically apply vendor prefixes to relevant properties based on data from [CanIUse][caniuse], via [autoprefixer][autoprefixer].
|
249 |
|
250 | #### Legacy Fallbacks
|
251 |
|
252 | Automatically generate CSS fallbacks for legacy browsers, via [laggard][laggard].
|
253 |
|
254 | ## Options
|
255 |
|
256 | All features in Rucksack can be toggled by passing options on initialization. By default core features are set to `true`, and optional
|
257 | addons are set to `false`
|
258 |
|
259 | Option | Type | Default | Description
|
260 | ------------------- | ------- | ------- | -----------
|
261 | `responsiveType` | Boolean | `true` | Whether to enable responsive typography
|
262 | `shorthandPosition` | Boolean | `true` | Whether to enable shorthand position properties
|
263 | `quantityQueries` | Boolean | `true` | Whether to enable quantity query psuedo selectors
|
264 | `alias` | Boolean | `true` | Whether to enable to enable property aliases
|
265 | `inputPseudo` | Boolean | `true` | Whether to enable whether to enable extra input pseudo elements
|
266 | `clearFix` | Boolean | `true` | Whether to enable native clear fix
|
267 | `fontPath` | Boolean | `true` | Whether to enable font `src` set generation
|
268 | `hexRGBA` | Boolean | `true` | Whether to enable hex RGBA shortcuts
|
269 | `easings` | Boolean | `true` | Whether to enable extra easing functions
|
270 | `fallbacks` | Boolean | `false` | Whether to enable CSS fallbacks addon
|
271 | `autoprefixer` | Boolean | `false` | Whether to enable autoprefixer addon
|
272 | `reporter` | Boolean | `false` | Whether to enable error reporting from plugins used inside Rucksack
|
273 |
|
274 |
|
275 | ***
|
276 |
|
277 | MIT © [Sean King][sean]
|
278 |
|
279 | [postcss]: https://github.com/postcss/postcss
|
280 | [gulp-rucksack]: https://github.com/simplaio/gulp-rucksack
|
281 | [grunt-rucksack]: https://github.com/simplaio/grunt-rucksack
|
282 | [broccoli-rucksack]: https://github.com/simplaio/broccoli-rucksack
|
283 | [poststylus]: https://github.com/seaneking/poststylus
|
284 | [type-demo]: http://simplaio.github.io/rucksack/img/type-demo.gif
|
285 | [caniuse]: http://caniuse.com
|
286 | [autoprefixer]: https://github.com/postcss/autoprefixer
|
287 | [laggard]: https://github.com/seaneking/laggard
|
288 | [sean]: https://twitter.com/seaneking
|