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
77
Winning the Design Battle on Every Screen
briangraves
0
91
Other Decks in Design
See All in Design
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
1
440
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
910
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
180
#Dubois Challenge 2025: Economics
ajstarks
1
180
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
380
地理院地図をもっと楽しく!れきちず新機能のご紹介
hjmkth
1
160
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
300
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
190
佐藤千晶|ポートフォリオ
chimi_chia
0
170
デザイナー向けフライル説明資料
toshiblues
0
160
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
690
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.5k
Featured
See All Featured
Bash Introduction
62gerente
615
210k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
RailsConf 2023
tenderlove
30
1.2k
Agile that works and the tools we love
rasmusluckow
331
21k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
BBQ
matthewcrist
89
9.8k
Optimizing for Happiness
mojombo
379
70k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Practical Orchestrator
shlominoach
190
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Documentation Writing (for coders)
carmenintech
75
5k
Designing for Performance
lara
610
69k
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!