Rucksack 裝滿神奇 css 的後背包
32
PIXNET F2E ❤ Anna Su 蕕笕ᐟ॰ CSS ጱ盅胙۱ 碝ಋӤ᪠ 2016/07/06 in 螈䦾虻懱
-
Upload
anna-su -
Category
Engineering
-
view
222 -
download
2
Transcript of Rucksack 裝滿神奇 css 的後背包
PIXNET F2E ❤ Anna Su
CSS 2016/07/06 in
Anna Sui2
3
[ruksæk] rucksack
4
A little bag of CSS superpowers
sparknotes
5
TJ
TJ Holowaychuk
6
What is rucksack?7
PostCSS ecosystem
crescendo
it's built on PostCSS
8
rucksack
it's modular
10
it doesn't add any bloat
11
it's built on PostCSS
it's modular
it doesn't add any bloat
12
Installation & Usagehttp://simplaio.github.io/rucksack/docs/#usage
Installation & Usage
14
Installation & Usage
postcss: function() {
return {
plugins: rucksack([autoprefixer])
};
}
webpack.config.js
PostCSS for Webpack
15
Demo
16
Responsive Typography
17
.foo { font-size: responsive 14px 50px; font-range: 480px 800px;}
input
Responsive Typography
18
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
Responsive Typography
20
Shorthand Positioning
21
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
Shorthand Positioning
.box3 {
position: fixed 0 20px 10px;
}
.box3 { position: fixed; top: 0; right: 20px; bottom: 10px; left: 20px;}
input output
23
Hex Rgba Shortcuts
24
Hex RGBA Shortcutsinput
output
background-color: rgba(#2196F3, 0.3);
background-color: rgba(33, 150, 243, 0.3);
25
Quantity Pseudo-Selectors
26
Quantity Pseudo-Selectorsinput output
li&:at-least(5) {
color: blue;
}
li:nth-last-child(n+4),
li:nth-last-child(n+4) ~ li {
color: blue;
}
27
All The Easings
28
All The Easingsinput
output
transition: all 250ms ease-in-quint;
transition: all 250ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
29
Rucksack makes CSS development fun again
Referencerucksack 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
Thanks ❤
