Rucksack is a PostCSS plugin that provides CSS superpowers like responsive typography, shorthand positioning, hex/RGBA shortcuts, and all the easings. It is modular, adds no bloat, and works with PostCSS. The document demonstrates features like responsive font sizes, shorthand for absolute/relative positioning, pseudo-selectors for quantity, and expanding transition easings. Rucksack aims to make CSS development fun again through these conveniences.

1. PIXNET F2E ❤ Anna Su
CSS
2016/07/06 in

2. Anna Sui
2

3. 3

4. [ruksæk]
rucksack
4

5. A little bag of CSS superpowers
sparknotes
5

6. TJ
TJ Holowaychuk
6

7. What is rucksack?
7

8. PostCSS ecosystem
crescendo
it's built on PostCSS
8
rucksack

10. it's modular
10

11. it doesn't add any bloat
11

12. it's built on PostCSS
it's modular
it doesn't add any bloat
12

13. Installation & Usage
http://simplaio.github.io/rucksack/docs/#usage

14. Installation & Usage
14

15. Installation & Usage
postcss: function() {
return {
plugins: rucksack([autoprefixer])
};
}
webpack.config.js
PostCSS for Webpack
15

16. Demo
16

17. Responsive
Typography
17

18. .foo {
font-size: responsive 14px 50px;
font-range: 480px 800px;
}
input
Responsive Typography
18

19. html {
font-size: calc(14px + 36 * ((100vw - 480px) / 320));
}
@media screen and (max-width: 480px) {
html {
font-size: 14px;
}
}
@media screen and (min-width: 800px) {
html {
font-size: 50px;
}
}
output
Responsive Typography
19

20. Responsive Typography
20

21. Shorthand
Positioning
21

22. Shorthand Positioning
.box1 {
position: absolute 0;
}
.box2 {
position: relative 20% auto;
}
.box1 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.box2 {
position: relative;
top: 20%;
right: auto;
bottom: 20%;
left: auto;
}
input output
22

23. Shorthand Positioning
.box3 {
position: fixed 0 20px 10px;
}
.box3 {
position: fixed;
top: 0;
right: 20px;
bottom: 10px;
left: 20px;
}
input output
23

24. Hex
Rgba
Shortcuts
24

25. Hex RGBA Shortcuts
input
output
background-color: rgba(#2196F3, 0.3);
background-color: rgba(33, 150, 243, 0.3);
25

26. QuantityPseudo-
Selectors
26

27. Quantity Pseudo-Selectors
input output
li&:at-least(5) {
color: blue;
}
li:nth-last-child(n+4),
li:nth-last-child(n+4) ~ li {
color: blue;
}
27

28. All
The
Easings
28

29. All The Easings
input
output
transition: all 250ms ease-in-quint;
transition: all 250ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
29

30. Rucksack makes CSS development fun again

31. Reference
rucksack
https://simplaio.github.io/rucksack/
PostCSS: the Future after Sass and Less
https://ai.github.io/about-postcss/en/
TJ Holowaychuk Github
https://github.com/tj/frontend-boilerplate

32. Thanks❤