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
CDKのコードを書く環境を作りました with Amazon Q
nobuhitomorioka
1
160
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
8
2.1k
AIエージェント元年@日本生成AIユーザ会
shukob
1
150
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
380
ソフトウェアエンジニアと仕事するときに知っておいたほうが良いこと / Key points for working with software engineers
pinkumohikan
1
140
JEDAI Meetup! Databricks AI/BI概要
databricksjapan
0
310
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
EDRの検知の仕組みと検知回避について
chayakonanaika
11
4.5k
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
150
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
130
Two Blades, One Journey: Engineering While Managing
ohbarye
4
1.5k
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
540
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
A designer walks into a library…
pauljervisheath
205
24k
How STYLIGHT went responsive
nonsquared
98
5.4k
Mobile First: as difficult as doing things right
swwweet
223
9.4k
Become a Pro
speakerdeck
PRO
26
5.2k
Docker and Python
trallard
44
3.3k
BBQ
matthewcrist
87
9.5k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Unsuck your backbone
ammeep
669
57k
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