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
87
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
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
180
Surveying the Landscape
stopsatgreen
4
580
Other Decks in Technology
See All in Technology
検証からプロダクトへ: シームレスなLLM開発の ためのしくみ作り
nunukim
1
170
OpenTelemetry実践 はじめの一歩
taxin
0
310
.NETの非同期戦略とUnityとの相互運用
neuecc
2
2.4k
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
330
Ask-LLM論文紹介: How to Train Data-Efficient LLMs
s_ota
0
110
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
7
100k
Elementaryを用いたデータ品質の可視化とデータ基盤の運用改善
10xinc
6
1.4k
データマネジメントを支える武器としてのメタデータ管理
10xinc
1
440
技育祭2024春 LT Finatextホールディングス
kevinrobot34
1
160
現実世界の事象から学ぶSOLID原則
h0r15h0
24
10k
Tohoku.Tech #1 「EC-CUBE/AWSの構築をChatGPTに相談してみました」by テンダ
jun2882
0
140
Autopsy of a Cascading Outage from a MySQL Crashing Bug
jfg956
0
200
Featured
See All Featured
Music & Morning Musume
bryan
39
5.5k
Raft: Consensus for Rubyists
vanstee
130
6.2k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
Statistics for Hackers
jakevdp
789
220k
Designing for humans not robots
tammielis
247
25k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
242
20k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
Side Projects
sachag
451
41k
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
57k
Optimizing for Happiness
mojombo
369
69k
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