Enviar búsqueda
Cargar
The Home of the Future: CSS Layouts
•
22 recomendaciones
•
2,052 vistas
Peter Gasston
Seguir
Slides from my talk at Standards>Next, 28/05/11.
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 37
Descargar ahora
Descargar para leer sin conexión
Recomendados
The CSS3 of Tomorrow (Version 2)
The CSS3 of Tomorrow (Version 2)
Peter Gasston
The CSS3 of Tomorrow
The CSS3 of Tomorrow
Peter Gasston
Alv Grids
Alv Grids
Michelle Crapo
Bruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of Apps
brucelawson
HTML5 Who what where when why how
HTML5 Who what where when why how
brucelawson
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
brucelawson
Leveraging HTML 5.0
Leveraging HTML 5.0
brucelawson
Open Educational Resources Initiative in Macedonia
Open Educational Resources Initiative in Macedonia
Irina (Shumadieva) Micov
Recomendados
The CSS3 of Tomorrow (Version 2)
The CSS3 of Tomorrow (Version 2)
Peter Gasston
The CSS3 of Tomorrow
The CSS3 of Tomorrow
Peter Gasston
Alv Grids
Alv Grids
Michelle Crapo
Bruce Lawson: Progressive Web Apps: the future of Apps
Bruce Lawson: Progressive Web Apps: the future of Apps
brucelawson
HTML5 Who what where when why how
HTML5 Who what where when why how
brucelawson
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
Web Anywhere: Mobile Optimisation With HTML5, CSS3, JavaScript
brucelawson
Leveraging HTML 5.0
Leveraging HTML 5.0
brucelawson
Open Educational Resources Initiative in Macedonia
Open Educational Resources Initiative in Macedonia
Irina (Shumadieva) Micov
Testing The Legacy: Making Existing Applications Testable Without Epic Efforts
Testing The Legacy: Making Existing Applications Testable Without Epic Efforts
Alex Leonov
Does agile mean having even less time for testing?!
Does agile mean having even less time for testing?!
Dr. Alexander Schwartz
Being Agile and Seeing Big Picture
Being Agile and Seeing Big Picture
Alex Leonov
Listening through Customer Insights
Listening through Customer Insights
Delvinia
Consumer Driven Contracts (DDD Perth 2016)
Consumer Driven Contracts (DDD Perth 2016)
Rob Crowley
Origin and history of convolution
Origin and history of convolution
Alejandro Domínguez Torres
Progressive Downloads and Rendering
Progressive Downloads and Rendering
Stoyan Stefanov
JavaScript is everywhere
JavaScript is everywhere
Stoyan Stefanov
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS
Nicole Sullivan
BizOps and you
BizOps and you
Leon Fayer
YSlow 2.0
YSlow 2.0
Stoyan Stefanov
Building a Progressive Web App
Building a Progressive Web App
Ido Green
JavaScript for PHP developers
JavaScript for PHP developers
Stoyan Stefanov
Let's build an Airport – How to estimate large scale projects
Let's build an Airport – How to estimate large scale projects
☕ 🥧 🚲 Martin Gude
Big-tent UX (UX Camp West 2016)
Big-tent UX (UX Camp West 2016)
Peter Boersma
The CSS of Tomorrow (Front Row 2011)
The CSS of Tomorrow (Front Row 2011)
Peter Gasston
CSS Grid layout - De volta para o futuro
CSS Grid layout - De volta para o futuro
Afonso Pacifer
What I discovered about layout vis CSS Grid
What I discovered about layout vis CSS Grid
Rachel Andrew
CSS3 Layout
CSS3 Layout
Zoe Gillenwater
An Event Apart Nashville: CSS Grid Layout
An Event Apart Nashville: CSS Grid Layout
Rachel Andrew
The Creative New World of CSS
The Creative New World of CSS
Rachel Andrew
An Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid Layout
Rachel Andrew
Más contenido relacionado
Destacado
Testing The Legacy: Making Existing Applications Testable Without Epic Efforts
Testing The Legacy: Making Existing Applications Testable Without Epic Efforts
Alex Leonov
Does agile mean having even less time for testing?!
Does agile mean having even less time for testing?!
Dr. Alexander Schwartz
Being Agile and Seeing Big Picture
Being Agile and Seeing Big Picture
Alex Leonov
Listening through Customer Insights
Listening through Customer Insights
Delvinia
Consumer Driven Contracts (DDD Perth 2016)
Consumer Driven Contracts (DDD Perth 2016)
Rob Crowley
Origin and history of convolution
Origin and history of convolution
Alejandro Domínguez Torres
Progressive Downloads and Rendering
Progressive Downloads and Rendering
Stoyan Stefanov
JavaScript is everywhere
JavaScript is everywhere
Stoyan Stefanov
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS
Nicole Sullivan
BizOps and you
BizOps and you
Leon Fayer
YSlow 2.0
YSlow 2.0
Stoyan Stefanov
Building a Progressive Web App
Building a Progressive Web App
Ido Green
JavaScript for PHP developers
JavaScript for PHP developers
Stoyan Stefanov
Let's build an Airport – How to estimate large scale projects
Let's build an Airport – How to estimate large scale projects
☕ 🥧 🚲 Martin Gude
Big-tent UX (UX Camp West 2016)
Big-tent UX (UX Camp West 2016)
Peter Boersma
Destacado
(15)
Testing The Legacy: Making Existing Applications Testable Without Epic Efforts
Testing The Legacy: Making Existing Applications Testable Without Epic Efforts
Does agile mean having even less time for testing?!
Does agile mean having even less time for testing?!
Being Agile and Seeing Big Picture
Being Agile and Seeing Big Picture
Listening through Customer Insights
Listening through Customer Insights
Consumer Driven Contracts (DDD Perth 2016)
Consumer Driven Contracts (DDD Perth 2016)
Origin and history of convolution
Origin and history of convolution
Progressive Downloads and Rendering
Progressive Downloads and Rendering
JavaScript is everywhere
JavaScript is everywhere
5 Mistakes of Massive CSS
5 Mistakes of Massive CSS
BizOps and you
BizOps and you
YSlow 2.0
YSlow 2.0
Building a Progressive Web App
Building a Progressive Web App
JavaScript for PHP developers
JavaScript for PHP developers
Let's build an Airport – How to estimate large scale projects
Let's build an Airport – How to estimate large scale projects
Big-tent UX (UX Camp West 2016)
Big-tent UX (UX Camp West 2016)
Similar a The Home of the Future: CSS Layouts
The CSS of Tomorrow (Front Row 2011)
The CSS of Tomorrow (Front Row 2011)
Peter Gasston
CSS Grid layout - De volta para o futuro
CSS Grid layout - De volta para o futuro
Afonso Pacifer
What I discovered about layout vis CSS Grid
What I discovered about layout vis CSS Grid
Rachel Andrew
CSS3 Layout
CSS3 Layout
Zoe Gillenwater
An Event Apart Nashville: CSS Grid Layout
An Event Apart Nashville: CSS Grid Layout
Rachel Andrew
The Creative New World of CSS
The Creative New World of CSS
Rachel Andrew
An Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid Layout
Rachel Andrew
Next-level CSS
Next-level CSS
Rachel Andrew
The Future of Frontend - what is new in CSS?
The Future of Frontend - what is new in CSS?
Rachel Andrew
Devoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid Layout
Rachel Andrew
Start Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJS
Rachel Andrew
CSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, Linz
Rachel Andrew
CSS Grid vs. Flexbox
CSS Grid vs. Flexbox
Ecaterina Moraru (Valica)
Confoo: You can use CSS for that!
Confoo: You can use CSS for that!
Rachel Andrew
Solving Layout Problems With CSS Grid and Friends
Solving Layout Problems With CSS Grid and Friends
FITC
Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17
Rachel Andrew
Talk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid Layout
Rachel Andrew
Solving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJS
Rachel Andrew
404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & Friends
Rachel Andrew
GOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for that
Rachel Andrew
Similar a The Home of the Future: CSS Layouts
(20)
The CSS of Tomorrow (Front Row 2011)
The CSS of Tomorrow (Front Row 2011)
CSS Grid layout - De volta para o futuro
CSS Grid layout - De volta para o futuro
What I discovered about layout vis CSS Grid
What I discovered about layout vis CSS Grid
CSS3 Layout
CSS3 Layout
An Event Apart Nashville: CSS Grid Layout
An Event Apart Nashville: CSS Grid Layout
The Creative New World of CSS
The Creative New World of CSS
An Event Apart SF: CSS Grid Layout
An Event Apart SF: CSS Grid Layout
Next-level CSS
Next-level CSS
The Future of Frontend - what is new in CSS?
The Future of Frontend - what is new in CSS?
Devoxx Belgium: CSS Grid Layout
Devoxx Belgium: CSS Grid Layout
Start Using CSS Grid Layout Today - RuhrJS
Start Using CSS Grid Layout Today - RuhrJS
CSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, Linz
CSS Grid vs. Flexbox
CSS Grid vs. Flexbox
Confoo: You can use CSS for that!
Confoo: You can use CSS for that!
Solving Layout Problems With CSS Grid and Friends
Solving Layout Problems With CSS Grid and Friends
Solving Layout Problems with CSS Grid & Friends - WEBU17
Solving Layout Problems with CSS Grid & Friends - WEBU17
Talk Web Design: Get Ready For CSS Grid Layout
Talk Web Design: Get Ready For CSS Grid Layout
Solving Layout Problems with CSS Grid & Friends - NordicJS
Solving Layout Problems with CSS Grid & Friends - NordicJS
404.ie: Solving Layout Problems with CSS Grid & Friends
404.ie: Solving Layout Problems with CSS Grid & Friends
GOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for that
Último
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
sammart93
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
apidays
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Jago de Vreede
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
danishmna97
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
apidays
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Andrey Devyatkin
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
Khushali Kathiriya
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
Overkill Security
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
Nanddeep Nachan
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
UiPathCommunity
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Angeliki Cooney
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Orbitshub
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
MadyBayot
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
jfdjdjcjdnsjd
Último
(20)
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
The Home of the Future: CSS Layouts
1.
THE
HOME OF THE FUTURE PETER GASSTON STOPSATGREEN broken-links.com
2.
Vernacular architecture
3.
POLiTE architecture
4.
5.
6.
Multi-columns
7.
Multi-columns div { column-count:
3; } div { column-width: 10em; }
8.
Multi-columns
h2 { column-span: all; }
9.
multi-columns
10.
Multi-columns
PLUG 1 of 2
11.
Flex-box
12.
Flex-box
.holder { display: box; } .child { box-flex: 1; } .a { box-flex: 3; } A B .b { box-flex: 2; }
13.
Flex-box .child {
.outer { box-orient: vertical; } box-flex: 0; .a,.b { box-ordinal-group: 2; } box-align: center; box-pack: center; .c { box-ordinal-group: 1; } } C A B
14.
Flex-box JS Shim: https://github.com/doctyper/flexie
15.
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/
16.
Template Layout
17.
TEMPLATE LAYOUT .a {
position: a; } .b { position: b; } .outer { display: 'abc'; } .c { position: c; } A B A B C C
18.
TEMPLATE LAYOUT .outer {
.outer { display: 'aa' 'bc'; display: 'abb' 'a.c'; } } A B A B C C
19.
TEMPLATE LAYOUT JS
Shim: http://code.google.com/p/css-template-layout/ Demos: http://nealgrosskopf.com/tech/thread.php?pid=46
20.
Grid Layout
21.
grid LAYOUT div {
div { display: grid; display: grid; grid-columns: 1fr 1fr 2fr; grid-columns: 1fr 1fr 2fr; } grid-rows: 10em auto 40px; }
22.
grid LAYOUT .child {
.a { grid-column: 2; grid-column: 2; grid-row: 2; grid-column-span: 2; } } .b { grid-row-span: 3; } A B
23.
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
24.
GRiD LAYOUT
.outer { grid-template: 'abc'; } A B C .a { grid-cell: a; } .b { grid-cell: b; } .c { grid-cell: c; }
25.
Extended Floats
26.
EXTENDED FLOATS
.a { float: positioned; position: absolute; left: 33.3%; A top: 33.33%; width: 33.3%; } Spec: http://www.interoperabilitybridges.com/css3-floats/
27.
Regions
28.
REGiONS: THREADS .a {
flow: 'foo'; } .b, .c, .d { .b { content: from(foo); } content: from(foo); } A B B C D
29.
REGiONS: THREADS
30.
REGiONS: SHAPES .child {
wrap-shape: polygon(150px,0 0,300px 300px,300px); wrap-shape-mode: around; }
31.
REGiONS: SHAPES
32.
REGiONS: exclusions .a {
wrap-shape-mode: content; } .b { wrap-shape: polygon(150px,0 0,300px 300px,300px); wrap-shape-mode: around; }
33.
REGiONS: EXCLUSIONS
34.
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.
35.
36.
thanks. Buy my
book! nostarch.com/css3.htm
37.
IMAGE CREDITS 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/
Descargar ahora