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
150
Your Reality Here
stopsatgreen
0
92
Growing Up, Getting Serious - #SotB6
stopsatgreen
1
340
Growing Up, Getting Serious
stopsatgreen
0
86
Surveying the Landscape — November 2016
stopsatgreen
1
160
Surveying the Landscape - Fronteers
stopsatgreen
2
480
The Web vs. The Browser
stopsatgreen
0
190
Surveying the Landscape Sept. 2016
stopsatgreen
1
380
Surveying the Landscape
stopsatgreen
4
830
Other Decks in Technology
See All in Technology
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
220
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
170
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
530
Flutterでキャッチしないエラーはどこに行く
taiju59
0
230
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
280
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
160
Obsidian応用活用術
onikun94
1
470
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
140
Kiroと学ぶコンテキストエンジニアリング
oikon48
6
9.9k
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.8k
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
1
380
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
540
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Site-Speed That Sticks
csswizardry
10
810
Fireside Chat
paigeccino
39
3.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Making Projects Easy
brettharned
117
6.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
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