{"id":13493894,"url":"https://github.com/madeleineostoja/rucksack","last_synced_at":"2025-05-16T02:02:21.572Z","repository":{"id":34656809,"uuid":"38627138","full_name":"madeleineostoja/rucksack","owner":"madeleineostoja","description":"A little bag of CSS superpowers, built on PostCSS","archived":false,"fork":false,"pushed_at":"2021-01-24T23:49:37.000Z","size":675,"stargazers_count":1841,"open_issues_count":15,"forks_count":46,"subscribers_count":42,"default_branch":"master","last_synced_at":"2025-05-09T22:02:00.311Z","etag":null,"topics":["css","css-framework","postcss","postcss-plugins","responsive-typography"],"latest_commit_sha":null,"homepage":"https://www.rucksackcss.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/madeleineostoja.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-06T15:16:37.000Z","updated_at":"2025-05-09T09:19:06.000Z","dependencies_parsed_at":"2022-09-15T09:04:25.681Z","dependency_job_id":null,"html_url":"https://github.com/madeleineostoja/rucksack","commit_stats":null,"previous_names":["simplaio/rucksack","seaneking/rucksack"],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madeleineostoja%2Frucksack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madeleineostoja%2Frucksack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madeleineostoja%2Frucksack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madeleineostoja%2Frucksack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/madeleineostoja","download_url":"https://codeload.github.com/madeleineostoja/rucksack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254453646,"owners_count":22073616,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-framework","postcss","postcss-plugins","responsive-typography"],"created_at":"2024-07-31T19:01:19.815Z","updated_at":"2025-05-16T02:02:21.473Z","avatar_url":"https://github.com/madeleineostoja.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n \u003cimg src=\"https://rucksackcss.org/img/full-logo.png\" alt=\"rucksack logo\" height=\"325\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://travis-ci.org/simplaio/rucksack\"\u003e\u003cimg src=\"https://travis-ci.org/seaneking/rucksack.svg?branch=master\" alt=\"Build satus\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/rucksack-css\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/rucksack-css.svg\" alt=\"Downloads\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://npmjs.org/package/rucksack-css\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/rucksack-css.svg\" alt=\"NPM version\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n| ℹ️ Rucksack has a successor! |\n|:---------------------------|\n| **[Satchel](https://www.satchel.style)** is thew new Rucksack, built on CSS-in-JS |\n\nA little bag of CSS superpowers, built on [PostCSS][postcss].\n\nRucksack makes CSS development less painful, with the features and shortcuts it should have come with out of the box.\n\n**Read the full docs at [rucksackcss.org/docs](https://rucksackcss.org/docs)**\n\n### Contents\n\n- [Install](#install)\n- [Features](#features)\n    - [Responsive typography](#responsive-typography)\n    - [Shorthand positioning syntax](#shorthand-positioning-syntax)\n    - [Native clearfix](#native-clearfix)\n    - [Automatic font src generation](#automatic-font-src-generation)\n    - [Extra input pseudo-elements](#extra-input-pseudo-elements)\n    - [Hex shortcuts for RGBA](#hex-shortcuts-for-rgba)\n    - [More easing functions](#more-easing-functions)\n    - [Quantity pseudo-selectors](#quantity-pseudo-selectors)\n- [Addons](#addons)\n    - [Autoprefixer](#autoprefixer)\n    - [Legacy Fallbacks](#legacy-fallbacks)\n- [Usage](#usage)\n    - [Gulp](#gulp)\n    - [Webpack](#webpack)\n    - [Grunt](#grunt)\n    - [CLI](#cli)\n    - [Javascript API](#javascript-api)\n    - [Stylus](#stylus)\n- [Options](#options)\n\n\n## Install\n\nRucksack is available on NPM under `rucksack-css`\n\n\n```sh\n$ npm i rucksack-css -D\n```\n\n## Features\n\n#### Responsive typography\n\nAutomagical fluid typography with new `responsive` arguments to `font-size`, `line-height`, and `letter-spacing` properties\n\n```css\n.foo {\n  font-size: responsive;\n}\n```\n\n![Responsive Type Demo][type-demo]\n\n#### Shorthand positioning syntax\n\nUse the shorthand syntax from `margin` and `padding` on `position` properties\n\n```css\n.foo {\n  position: absolute 0 20px;\n}\n```\n\n#### Native clearfix\n\nGenerate bulletproof clearfixes with a new argument on the `clear` property\n\n```css\n.foo {\n  clear: fix;\n}\n```\n\n#### Automatic font src generation\n\nAutomatically generate `src` sets for `@font-face` based on the path to your font files\n\n```css\n@font-face {\n  font-family: 'My Font';\n  font-path: '/path/to/font/file';\n}\n```\n\n#### Extra input pseudo-elements\n\nStandardize the unweidly `\u003cinput type=\"range\"\u003e` element across browsers with new `::track` and `::thumb` pseudo elements\n\n```css\ninput[type=\"range\"]::track {\n  height: 2px;\n}\n```\n\n#### Hex shortcuts for RGBA\n\nGenerate RGBA colors from a hex color + alpha value\n\n```css\n.foo {\n  color: rgba(#fff, 0.8);\n}\n```\n\n#### More easing functions\n\nUse a whole library of modern easing functions in transitions and animations\n\n```css\n.foo {\n  transition: all 250ms ease-out-cubic;\n}\n```\n\n#### Quantity pseudo-selectors\n\nCreate truly responsive designs with powerful content quantity selectors\n\n```css\nli:at-least(4) {\n  color: blue;\n}\n\nli:between(4,6) {\n  color: red;\n}\n```\n\n## Addons\n\n#### Autoprefixer\n\nAutomatically apply vendor prefixes to relevant properties based on data from [CanIUse][caniuse], via [autoprefixer][autoprefixer].\n\n#### Legacy Fallbacks\n\nAutomatically generate CSS fallbacks for legacy browsers, via [laggard][laggard].\n\n## Usage\n\nRucksack is built on [PostCSS][postcss], and can be used in most build tools and stacks easily.\n\n#### Gulp\n\nUse [gulp-postcss][gulp-postcss]\n\n```js\nconst gulp = require('gulp');\nconst postcss = require('gulp-postcss');\nconst rucksack = require('rucksack-css');\n\ngulp.task('rucksack', () =\u003e {\n  return gulp.src('src/*.css')\n    .pipe(postcss([ rucksack() ]))\n    .pipe(gulp.dest('dist'));\n});\n```\n\n#### Webpack\n\nUse [postcss-loader][postcss-loader]\n\n`postcss.config.js`\n\n```js\nmodule.exports = {\n  plugins: {\n    'rucksack-css': {},\n  }\n};\n```\n\n`webpack.config.js`\n\n```js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [ 'style-loader', 'postcss-loader' ]\n      }\n    ]\n  }\n};\n```\n\n#### Grunt\n\nUse [grunt-postcss][grunt-postcss]\n\n```js\ngrunt.initConfig({\n  postcss: {\n    options: {\n      processors: [\n        require('rucksack-css')()\n      ]\n    },\n    dist: {\n      src: 'css/*.css'\n    }\n  }\n});\n```\n\n#### CLI\n\nUse Rucksack on the command line with [postcss-cli][postcss-cli]\n\n```sh\n$ npm i postcss-cli -g\n```\n\n`postcss.config.js`\n\n```js\nmodule.exports = {\n  use: [ 'rucksack-css' ]\n};\n```\n\n```sh\n$ postcss \"input.css\" -o 'output.css'\n```\n\n\u003e **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\n\n#### Javascript API\n\nSince Rucksack is just a PostCSS plugin, you can also use it in JS/Node directly, via the PostCSS API\n\n```js\nconst postcss = require('postcss');\nconst rucksack = require('rucksack-css');\n\npostcss([ rucksack() ])\n  .process(css, { from: 'src/style.css', to: 'style.css' })\n  .then(result =\u003e {\n      fs.writeFileSync('style.css', result.css);\n      if ( result.map ) fs.writeFileSync('style.css.map', result.map);\n  });\n```\n\nSee the [PostCSS Docs][postcss] for examples for your environment.\n\n#### Stylus\n\nRucksack can be used as a Stylus plugin with [PostStylus][poststylus]\n\n```js\nstylus(css).use(poststylus('rucksack-css'))\n```\n\nSee the [PostStylus Docs][poststylus] for more examples for your environment.\n\n## Options\n\nAll features in Rucksack can be toggled by passing options on initialization. By default core features are set to `true`, and optional\naddons are set to `false`\n\nOption              | Type    | Default | Description\n------------------- | ------- | ------- | -----------\n`responsiveType`    | Boolean | `true`  | Whether to enable responsive typography\n`shorthandPosition` | Boolean | `true`  | Whether to enable shorthand position properties\n`quantityQueries`   | Boolean | `true`  | Whether to enable quantity query pseudo selectors\n`inputPseudo`       | Boolean | `true`  | Whether to enable whether to enable extra input pseudo elements\n`clearFix`          | Boolean | `true`  | Whether to enable native clear fix\n`fontPath`          | Boolean | `true`  | Whether to enable font `src` set generation\n`hexRGBA`           | Boolean | `true`  | Whether to enable hex RGBA shortcuts\n`easings`           | Boolean | `true`  | Whether to enable extra easing functions\n`fallbacks`         | Boolean | `false` | Whether to enable CSS fallbacks addon\n`autoprefixer`      | Boolean | `false` | Whether to enable autoprefixer addon\n`reporter`          | Boolean | `false` | Whether to enable error reporting from plugins used inside Rucksack\n\n***\n\nMIT © [Madeleine Ostoja][madi]\n\n[postcss]: https://github.com/postcss/postcss\n[postcss-loader]: https://github.com/postcss/postcss-loader\n[gulp-postcss]: https://github.com/postcss/gulp-postcss\n[grunt-postcss]: https://github.com/nDmitry/grunt-postcss\n[postcss-cli]: https://github.com/postcss/postcss-cli\n[poststylus]: https://github.com/madeleineostoja/poststylus\n[type-demo]: https://rucksackcss.org/img/type-demo.gif\n[caniuse]: http://caniuse.com\n[autoprefixer]: https://github.com/postcss/autoprefixer\n[laggard]: https://github.com/madeleineostoja/laggard\n[madi]: https://twitter.com/madeleineostoja\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmadeleineostoja%2Frucksack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmadeleineostoja%2Frucksack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmadeleineostoja%2Frucksack/lists"}