Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Using Tomorrow's CSS Today
Search
Brian Graves
October 30, 2015
Design
2
110
Using Tomorrow's CSS Today
Brian Graves
October 30, 2015
Tweet
Share
More Decks by Brian Graves
See All by Brian Graves
Using Tomorrow's CSS Today
briangraves
0
20k
Using Tomorrow's CSS Today
briangraves
1
140
Using Tomorrow's CSS Today
briangraves
0
320
Using Tomorrow's CSS Today [Email]
briangraves
1
81
Sweating The Small Stuff
briangraves
0
76
Winning the Design Battle on Every Screen
briangraves
0
90
Other Decks in Design
See All in Design
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
700
Memory Man v3 (WIP)
storybychad
PRO
0
2.3k
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
700
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.1k
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
160
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
360
Liquid Iron
mcduckyart
1
120
PF_濵村ひろみ_202503
maru_design78
0
210
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
500
Storyboard Honey
rocioparronrubio
0
330
sachi_y_portfolio
sachi337
0
460
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
220
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
Speed Design
sergeychernyshev
32
1.1k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Practical Orchestrator
shlominoach
190
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Transcript
None
Brian Graves @briangraves
None
None
None
None
None
None
None
None
None
None
The Web
None
Tables
Absolute Positioning / Floats / Inline-Block
Flexbox / Columns
CSS in 2015 is Amazing.
WHERE HAVE WE BEEN?
There is No CSS3! And other facts about how standards
are made.
Despite the popularity of the “CSS3” buzzword, there is actually
no spec defining such a thing. – Lea Verou
None
None
Animation
Typography
Layout
“CSS is not a real language”
Problems with CSS • Cross-browser compatibility issues • Vendor prefixes
• No variables • No inline importing • No nested selectors • No functions/mixins • No color manipulation • No basic arithmetic
Things That Make Our Lives Easier
Rise of the Preprocessors. How we filled in the gaps.
None
None
None
.row { @include display-flex; background-color: $color-blue; } .row { display:
-webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: #173fb1; }
Do Preprocessors Solve The Problem?
Preprocessors Perpetuate A Problem. – Aaron Ladage
More & More Layers of Abstraction
Problems with Preprocessors • Not real front-end code • Proprietary
syntax • Often written in non front-end languages • Not as easily extensible • Must be compiled • Compile times can be slow • Browsers are catching up
Preprocessors? Where we’re going, we don’t need preprocessors.
THE FUTURE OF CSS IS NOW
Variables
Color Functions
Nesting
Custom Media Queries
PostCSS
.row { @include display-flex; background: $color-blue; } .row { display:
-webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: #173fb1; }
.row { display: flex; background: var(--color-blue); } .row { display:
-webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; background-color: #173fb1; }
PostCSS Advantages • Write CSS using CSS • Use CSS3
without worry • Even Use CSS4 • Modular (Use only what you need) • Faster compile times • Built on Node • No Ruby dependencies • Easier to debug • Tons of existing plugins • Can’t find a plugin? Write one in javascript.
Autoprefixer
PostCSS Ecosystem • Autoprefixer • PostCSS-nested • PostCSS-color-function • PostCSS-calc
• PostCSS-custom-properties • PostCSS-mixins • PostCSS-custom-media • CSSNext • PostCSS-import • Can’t find a plugin? Write one in javascript.
Variables
:root { --color-blue: #0A81C4; --color-blue-dark: #005581; } .element { color:
var(--color-blue); } .element:hover { color: var(--color-blue-dark); }
Variables lose their value if you have to constantly track
down what they represent. – Ryan Heap
None
Color Functions
.element { color: #1982C5; } .element--modifier { color: color(#1982C5 tint(40%));
}
.element { color: #1982C5; } .element--modifier { color: color(#1982C5 shade(40%));
}
CSS Color Functions • Tints & Shades • RGBA Adjustment
• HSL/HWB Adjustment • Color Blending (blend & blenda) • Guarantee Contrast
/* combine with variables to create palettes */ :root {
--color-blue: #1982C5; --color-blue-light: color( var(--color-blue) tint(40%) ); --color-blue-dark: color( var(--color-blue) shade(40%) ); }
/* map variables to variables */ :root { --color-text: var(--color-blue);
--color-text-light: color( var(--color-text) tint(40%) ); --color-text-dark: color( var(--color-text) shade(40%) ); }
/* map variables to variables */ :root { --color-text: var(--color-orange);
--color-text-light: color( var(--color-text) tint(40%) ); --color-text-dark: color( var(--color-text) shade(40%) ); }
Nesting
.element { color: blue; {&.modifier { color: red; }} }
.element { color: blue; {&.modifier { color: red; }} }
.element { color: blue; &.modifier { color: red; } }
.im { .a { .way { .over { .nested {
.selector { color: red; } } } } } }
Custom Media Queries
@custom-media --small (min-width: 30em); @media (--small) { .element { font-size:
1.5rem; } }
@media only screen and (min-width: 30em) { .element { font-size:
1.5rem; } }
@custom-media --small (min-width: 30em); @media (--small) { .element { font-size:
1.5rem; } }
New Media Query Syntax
@media (width >= 30em) and (width <= 60em) { .element
{ font-size: 1.5rem; } }
@media (min-width: 30em) and (max-width: 60em) { .element { font-size:
1.5rem; } }
Partials & Globbing
/* generated with grunt-sass-globbing */ @import "utilities/variables"; @import "utilities/mixins"; @import
"utilities/reset"; @import “utilities/breakpoints"; @import “atoms/buttons"; @import “atoms/headings"; @import “atoms/icons"; @import “atoms/text"; @import “molecules/components/disclaimer“; …
Mixins
Problems with CSS • Cross-browser compatibility issues • Vendor prefixes
• No variables • No inline importing • No nested selectors • No functions/mixins • No color manipulation • No basic arithmetic
Problems with CSS • Cross-browser compatibility issues • Vendor prefixes
• No variables • No inline importing • No nested selectors • No functions/mixins • No color manipulation • No basic arithmetic
Problems with CSS • Cross-browser compatibility issues • Vendor prefixes
• No variables • No inline importing • No nested selectors • No functions/mixins • No color manipulation • No basic arithmetic
One Day…
Let’s Get As Close As We Can To The Real
Thing
@briangraves Thank You!