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
91
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
140
Your Reality Here
stopsatgreen
0
82
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
320
Growing Up, Getting Serious
stopsatgreen
0
73
Surveying the Landscape — November 2016
stopsatgreen
1
140
Surveying the Landscape - Fronteers
stopsatgreen
2
450
The Web vs. The Browser
stopsatgreen
0
160
Surveying the Landscape Sept. 2016
stopsatgreen
1
290
Surveying the Landscape
stopsatgreen
4
760
Other Decks in Technology
See All in Technology
【詳説】コンテンツ配信 システムの複数機能 基盤への拡張
hatena
0
260
(機械学習システムでも) SLO から始める信頼性構築 - ゆる SRE#9 2025/02/21
daigo0927
0
270
AI Agent時代なのでAWSのLLMs.txtが欲しい!
watany
2
230
生成AI “再”入門 2025年春@WIRED TUESDAY EDITOR'S LOUNGE
kajikent
0
120
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
180
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
210
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
Amazon Aurora のバージョンアップ手法について
smt7174
2
150
日経のデータベース事業とElasticsearch
hinatades
PRO
0
240
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
83k
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
600
Active Directory攻防
cryptopeg
PRO
8
5.5k
Featured
See All Featured
Optimizing for Happiness
mojombo
376
70k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Agile that works and the tools we love
rasmusluckow
328
21k
We Have a Design System, Now What?
morganepeng
51
7.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Become a Pro
speakerdeck
PRO
26
5.2k
KATA
mclloyd
29
14k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Statistics for Hackers
jakevdp
797
220k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
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