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
CSS3: Layouts for the Multi-screen World
Search
Peter Gasston
November 28, 2012
Programming
9
1.1k
CSS3: Layouts for the Multi-screen World
Talk given at Future of Web Design, Prague, 28 Nov 2012. #fowa #fowd
Peter Gasston
November 28, 2012
Tweet
Share
More Decks by Peter Gasston
See All by Peter Gasston
People Don’t Change
stopsatgreen
0
110
Your Reality Here
stopsatgreen
0
68
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
300
Growing Up, Getting Serious
stopsatgreen
0
53
Surveying the Landscape — November 2016
stopsatgreen
1
120
Surveying the Landscape - Fronteers
stopsatgreen
2
430
The Web vs. The Browser
stopsatgreen
0
110
Surveying the Landscape Sept. 2016
stopsatgreen
1
190
Surveying the Landscape
stopsatgreen
4
590
Other Decks in Programming
See All in Programming
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
180
try! Swift Tokyo 初参加報告LT
hinakko2
0
220
What We Can Learn From OSS
inouehi
0
420
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
Hanami and htmx
bkuhlmann
0
210
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
210
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
360
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
Code Reviews
bkuhlmann
4
890
Ruby Pattern Matching
bkuhlmann
0
930
Elm Form Validation
bkuhlmann
0
510
見た目から始める生産性向上
ikumatadokoro
7
860
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
73
5.2k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
Statistics for Hackers
jakevdp
789
220k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
Designing Experiences People Love
moore
136
23k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Agile that works and the tools we love
rasmusluckow
325
20k
What's new in Ruby 2.0
geeforr
337
31k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k
Transcript
CSS3: Layouts for the Multi-screen World
Peter Gasston @stopsatgreen
1. The web has changed 2. Our tools are outdated
What is CSS3 going to do about it?
The web has changed
None
By Anna Debenham: http://www.flickr.com/photos/anna_debenham/8190771122/
http://www.thinkwithgoogle.com/insights/featured/new-multi-screen-world-insight/
None
1633 320x480 768x1024
Device-centric development
Media Queries
@media screen {} @media screen and (min-width: 800px) {} @media
(orientation: portrait) {} Media Queries
width device-width orientation aspect-ratio device-aspect-ratio Media Queries
@media (min-resolution: 1.5dppx) {} Media Queries
@media (max-width: 480px) { ... @media (orientation: portrait) { ...
} } Media Queries
script pointer hover luminosity (Possible) Media Queries
<meta name="viewport" content="width=500, initial-scale=1, maximum-scale=2"> Device Adaptation
Device Adaptation @viewport { initial-scale: 1; maximum-scale: 2; width: 500px;
}
Device Adaptation @viewport { width: device-width; } @media (max-device-width: 420px)
{ @viewport { width: 500px; } }
Our tools are outdated
None
None
• <table> • float: left HTML & CSS1
• position: absolute • display: inline-block • display: table CSS2
None
The Three Stages of RWD
New layout methods
Multi-columns article { column-count: 3; } article { column-width: 20em;
}
None
None
A B .b { flow-from: 'foo'; } foo Regions .a
{ flow-into: 'foo'; }
B C D .b, .c, .d { flow-from: 'foo'; }
foo Regions
Flexbox
Flexbox .parent { display: flex; } .child { width: 30%;
} .child { flex: 1; }
Flexbox A B .a { flex: 2; } .b {
flex: 1; } A B .parent { flex-direction: column; } .a { flex: 2; } .b { flex: 1; }
Flexbox .parent { align-items: center; justify-content: center; } .parent {
flex-direction: column; } .a { order: 2; } .b { order: 1; } A B
Sod this, let's live code!
None
Grid Layout .parent { display: grid; grid-definition-columns: 1fr 1fr 2fr;
} .parent { grid-definition-columns: 1fr 1fr 2fr; grid-definition-rows: 10em auto 40px; }
Grid Layout A B .child { grid-column-position: 2; grid-row-position: 2;
} .a { grid-column: 2 2; } .b { grid-row-span: 3; }
None
.child { position: absolute; wrap-flow: both; } Exclusions
None
.child { shape-outside: circle(50%,50%,400px); } Shaped Exclusions
None
.child { shape-inside: circle(50%,50%,400px); } Shaped Exclusions
Conclusion
1. The web is everywhere
2. Web design is constrained by the tools we have
3. Better tools are on the way
4. Let's make beautiful websites that work everywhere
Konec. * Some of the CSS properties shown in this
talk are experimental and subject to change. Always check http://caniuse.com and http://html5please.com for latest implementation status.