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
The Home of the Future
Search
Peter Gasston
May 28, 2011
Technology
1
95
The Home of the Future
CSS layout methods now and tomorrow, through the somewhat spurious lens of architecture.
Peter Gasston
May 28, 2011
Tweet
Share
More Decks by Peter Gasston
See All by Peter Gasston
People Don’t Change
stopsatgreen
0
160
Your Reality Here
stopsatgreen
0
95
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
340
Growing Up, Getting Serious
stopsatgreen
0
88
Surveying the Landscape — November 2016
stopsatgreen
1
170
Surveying the Landscape - Fronteers
stopsatgreen
2
480
The Web vs. The Browser
stopsatgreen
0
190
Surveying the Landscape Sept. 2016
stopsatgreen
1
390
Surveying the Landscape
stopsatgreen
4
840
Other Decks in Technology
See All in Technology
いまからでも遅くない!SSL/TLS証明書超入門(It's not too late to start! SSL/TLS Certificates: The Absolute Beginner's Guide)
norimuraz
0
230
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
160
LLM時代にデータエンジニアの役割はどう変わるか?
ikkimiyazaki
6
1.3k
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
korodroid
2
580
GoでもGUIアプリを作りたい!
kworkdev
PRO
0
140
データ戦略部門 紹介資料
sansan33
PRO
1
3.7k
サイバーエージェント流クラウドコスト削減施策「みんなで金塊堀太郎」
kurochan
2
1.2k
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.8k
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
4
840
2025-10-09_プロジェクトマネージャーAIチャンス
taukami
0
130
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
80k
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Code Review Best Practice
trishagee
72
19k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Typedesign – Prime Four
hannesfritz
42
2.8k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Unsuck your backbone
ammeep
671
58k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Transcript
THE HOME OF THE FUTURE PETER GASSTON STOPSATGREEN broken-links.com
Vernacular architecture
POLiTE architecture
None
None
Multi-columns
Multi-columns div { column-width: 10em; } div { column-count: 3;
}
Multi-columns h2 { column-span: all; }
multi-columns
Multi-columns PLUG 1 of 2
Flex-box
Flex-box .holder { display: box; } .child { box-flex: 1;
} A B .a { box-flex: 3; } .b { box-flex: 2; }
Flex-box .child { box-flex: 0; box-align: center; box-pack: center; }
.outer { box-orient: vertical; } .a,.b { box-ordinal-group: 2; } .c { box-ordinal-group: 1; } C A B
Flex-box JS Shim: https://github.com/doctyper/flexie
Flex-box display: box → display: flexbox box-flex → flex() box-orient
→ flex-direction box-ordinal-group → flex-order Spec: http://www.w3.org/TR/css3-flexbox/
Template Layout
TEMPLATE LAYOUT .a { position: a; } .b { position:
b; } .c { position: c; } .outer { display: 'abc'; } A B C A B C
TEMPLATE LAYOUT .outer { display: 'abb' 'a.c'; } A B
C A B C .outer { display: 'aa' 'bc'; }
TEMPLATE LAYOUT JS Shim: http://code.google.com/p/css-template-layout/ Demos: http://nealgrosskopf.com/tech/thread.php?pid=46
Grid Layout
grid LAYOUT div { display: grid; grid-columns: 1fr 1fr 2fr;
} div { display: grid; grid-columns: 1fr 1fr 2fr; grid-rows: 10em auto 40px; }
grid LAYOUT .child { grid-column: 2; grid-row: 2; } .a
{ grid-column: 2; grid-column-span: 2; } .b { grid-row-span: 3; } A B
grid LAYOUT Spec: http://www.w3.org/TR/css3-grid-layout/ Blog post: http://j.mp/kul0H1 http://blogs.msdn.com/b/ie/archive/2011/04/14/ie10-platform-preview-and-css-features-for-adaptive-layouts.aspx
GRiD LAYOUT .outer { grid-template: 'abc'; } .a { grid-cell:
a; } .b { grid-cell: b; } .c { grid-cell: c; } A B C
Extended Floats
EXTENDED FLOATS .a { float: positioned; position: absolute; left: 33.3%;
top: 33.33%; width: 33.3%; } Spec: http://www.interoperabilitybridges.com/css3-floats/ A
Regions
REGiONS: THREADS A B .a { flow: 'foo'; } .b
{ content: from(foo); } B C D .b, .c, .d { content: from(foo); }
REGiONS: THREADS
REGiONS: SHAPES .child { wrap-shape: polygon(150px,0 0,300px 300px,300px); wrap-shape-mode: around;
}
REGiONS: SHAPES
REGiONS: exclusions .a { wrap-shape-mode: content; } .b { wrap-shape:
polygon(150px,0 0,300px 300px,300px); wrap-shape-mode: around; }
REGiONS: EXCLUSIONS
regions Spec: http://dev.w3.org/csswg/css3-regions/ Prototype: http://labs.adobe.com/technologies/cssregions/ Pro tip: use http://leo-koppelkamm.de/polyCreator/ for
creating polygons.
None
thanks. Buy my book! nostarch.com/css3.htm
http://brittbell.blogspot.com/ http://www.flickr.com/photos/banfflakelouise/2274619237/ http://www.flickr.com/photos/el_momento_i_sitio_apropiados/5634431702/ http://www.flickr.com/photos/chanc/3869133751/ http://www.flickr.com/photos/gullevek/580672409/ http://www.flickr.com/photos/instantjefferson/2231405/ http://www.flickr.com/photos/moritzbernoully/3412093432/ http://www.flickr.com/photos/paulaofessel/335809741/ http://www.flickr.com/photos/opacity/617608495/ IMAGE
CREDITS