rucksack

A little bag of CSS superpowers

Read The Docs

Rucksack makes CSS development fun again, with features the language should have come with out of the box. It's built on PostCSS, it's modular, it doesn't add any bloat, and it's lightning fast.

Made with by the folks at Simpla

Responsive Typography

.foo {
  font-size: responsive;
}


/* Resize your browser! */

Shorthand Positioning

.foo {
  position: absolute 0;
}

.bar {
  position: relative 20% auto;
}

Quantity Queries

li:at-most(4) {
  color: blue;
}

li:at-least(5) {
  color: red;
}

Advanced Input Styling

input[type="range"]::thumb {
  background: blue;
}

Native Clearfix

.foo {
  clear: fix;
}

Font Src Generation

@font-face {
  font-family: 'My Font';
  font-path: '/my/font/file';
  font-weight: normal;
  font-style: normal;
}

Hex RGBA Shortcuts

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

Property Aliases

@alias {
  fs: font-size;
  fw: font-weight;
}

.foo {
  fs: 16px;
  fw: bold;
}

All The Easings

.foo {
  transition: ease-in-cubic;
}

.bar {
  transition: ease-out-back;
}

Legacy Fallbacks

add-on
.foo {
  opacity: 0.8;
}

/* Becomes */
.foo {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  opacity: 0.8;
}

Automatic Prefixing

add-on
.foo {
  transition: all;
}

/* Becomes (from CanIUse) */
.foo {
  -webkit-transition: all;
          transition: all;
}