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
98
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
130
Using Tomorrow's CSS Today
briangraves
0
290
Using Tomorrow's CSS Today [Email]
briangraves
1
73
Sweating The Small Stuff
briangraves
0
73
Winning the Design Battle on Every Screen
briangraves
0
84
Other Decks in Design
See All in Design
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
460
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
210
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
540
Yahoo Newsletter Clicker Template
xuechunwu
0
300
デザインシステム×プロトタイピングで挑む社会的価値の共創 / Designship2024
visional_engineering_and_design
1
300
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
2
620
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
150
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.2k
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
540
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
310
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
180
Design System for training program
mct
0
160
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Optimising Largest Contentful Paint
csswizardry
33
3k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
BBQ
matthewcrist
85
9.4k
The Invisible Side of Design
smashingmag
298
50k
4 Signs Your Business is Dying
shpigford
182
21k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
170
How STYLIGHT went responsive
nonsquared
96
5.2k
What's in a price? How to price your products and services
michaelherold
243
12k
Thoughts on Productivity
jonyablonski
68
4.4k
How GitHub (no longer) Works
holman
311
140k
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!