The Future State of Layout
-
Upload
stephen-hay -
Category
Technology
-
view
107 -
download
3
description
Transcript of The Future State of Layout
The Future State of
LayoutStephen Hay . Fronteers, Amsterdam . 20091105
Stephen Hay
Creative Director,CinnamonDesigning for the Websince 1995
Stephen HayCreative Director,Cinnamon
Designing for the Websince 1995
Stephen HayCreative Director,CinnamonDesigning for the Websince 1995
CSS3
CSS3 is
Awesome.media queries, more selectors, font stuff, (...)!
Decorationbackgrounds, shadows, rounded corners, (...)
Many of these things are
trend-driven,decorative propertiesNeccessary, perhaps, but not as important as...
Type &Layout
Most frustration in web design &development stems from the lack of adecent layout mechanism.
Why is this important?
I True separation of presentation and structureI Source order independenceI Better data portability
Layout
hasNoLayout
Past
TablesGrid-like, but not a grid in the layout sense.
Present
Floats & PositioningCounter-intuitive andnot intended for layout on today’s Web.
Past and present
Serendipitous grids“Hey, cool! Everything lines up!”
Present
CSS FrameworksShouldn’t CSS be the framework?
What is gridlayout?
A grid is not a table
Photo courtesy of Kenn W. Kiser, morgueFile.com
Photo: beglib, morgueFile.com
Photo courtesy of Kenn W. Kiser, morgueFile.com
A grid is the underlyinggeometrical frameworkwhich defines the visualstructure of the canvas.
Two types of grids
Implicit gridsare created implicitly by theplacement of elements on a page.
Two types of grids
Explicit gridsare created explicitly, before theplacement of elements on a page.
Units vs Columns
The threeworking drafts
CSS3-Grid (Microsoft)CSS3-Flexbox (Mozilla)CSS3-Layout (W3C)
Grid Positioning Moduletakes a column- and row-based approach to creatingexplicit grids.
Grid Positioning: Properties
grid-columnsgrid-rows
Grid Positioning: Syntax
div {grid-columns: 69px (12px 69px)[11];grid-rows: 170px *;}
Grid Positioning
Grid Positioning: combined with multicolumn layout
div {grid-columns: 69px (12px 69px)[11];grid-rows: 170px *;columns: 3;column-gap: 12px;}
Grid Positioning: combined with multicolumn layout
Grid Positioning: Pros & Cons
Advantages DisadvantagesSimple syntax Reliance on other modules*-syntax (multilength) Somewhat restrictivegr unit Thinking is involvedExplicit grid No new placement mechanism
One cool thing about Grid Positioning Module
The gr unitA measurement unit to match your grid units!(Well, not exactly.)
Grid Positioning: the gr unit
blockquote.pullquote {float: top left column;float-offset: 1gr 4gr;width: 7gr;}
Grid Positioning: the gr unit
Cool! Can I try it out?
Nope.No known implementation at this time.
Flexible Box Modulecreates an implicit grid using flexible element stacking
“A CSS box modeloptimized forinterface design”A small part of XUL, ported to CSS.
Flexible Box: Properties
box-alignbox-directionbox-flexbox-flex-groupbox-linesbox-ordinal-groupbox-orientbox-pack
Flexible Box: Syntax
<div id="parent"><p id="child1">First child</p><p id="child2">Second child</p><p id="child3">Third child</p>
</div>
#parent {display: box;box-orient: horizontal;#child3 {
box-flex: 1;}
Flexible Box: Pros & Cons
Advantages DisadvantagesDeveloped for GUIs Implicit gridSimple syntax NestingSource order independent Lots of thinkingBrowser calculation
One cool thing about Flexible Box Module
The box-flex propertyFill available space, or don’t! Your choice!
Cool! Can I try it out?
Yes!In Firefox (use the -moz- prefix.)Works now and well (but in no other browsers)
Template Layout ModuleExplicit grids on adrenaline.
Basic site layouts are trivial to construct
Template Layout: New Stuff
I New values for the display propertyI New values for the position propertyI The ::slot() pseudo-elementI The gr unit
Template Layout: Syntax
<div id="header">Header</div><div id="content">Content</div><div id="nav">Navigation</div><div id="footer">Footer</div>
body {display: "a a a"
"b c c""d d d"; }
#header { position: a; }#nav { position: b; }#content { position: c; }#footer { position: d; }
Template Layout: Syntax
<div id="header">Header</div><div id="content">Content</div><div id="nav">Navigation</div><div id="footer">Footer</div>
body {display: "a a a" / 150px
"b c @" / *"d d d" / 80px200px * * ; }
#header { position: a; }#nav { position: b; }#content { position: c; }#footer { position: d; }
Template Layout: the ::slot() pseudo-element
::slot() allows youto style a slot,regardless of thecontent.body::slot(a) { background-color: silver; }
Template Layout with Multicolumn Layout
Template Layout with Multicolumn Layout
Template Layout: Pros & Cons
Advantages DisadvantagesSimple syntax Existing propertiesVisual, to-the-point Hard to implement(?)Explicit gridSource order independent
One cool thing about Template Layout Module
Speed and ease of use
Cool! Can I try it out?
Yes!Alexis Deveria’s jQuery implementation:http://code.google.com/p/css-template-layout/
Older implementations:
I http://transcendingcss.com/support/almcss.zipI http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm
CSS3 Layout in action: Khoi Vinh’s Yeeaahh! Layout
CSS3 Layout in action: Basic Structure
CSS3 Layout in action: Basic Grid (1)
CSS3 Layout in action: Setting up the grid and slots
CSS3 Layout in action: Placing elements in the slots
CSS3 Layout in action: Basic Layout in place
CSS3 Layout in action: Laying out page components
You can nest templates,and depending on thecomponent, why notchoose the best layoutmechanism for the job?
CSS3 Layout in action: Component structure
CSS3 Layout in action: nesting boxes
CSS3 Layout in action: Adding more elements
CSS3 Layout in action: Laying out the boxes with flexbox
CSS3 Layout in action: Template playing nice with Flexbox
Remember these important points
I Source order is no longer an issueI You can still float and position (absolute on gr!)I There may be power in two modulesI Use media queries for alternative layouts!
Media queries and CSS3 Layout
div { display: "a a a""b c c""d d d"; }
becomes
div { display: "a""c""b""d"; }
What will the future bring?
I have no clue.
Give us some layout,dammit!We’re at the point that we don’t care which module it is.
(As long as it’s at least Template Layout. Thank you.)
Give us some layout,dammit!We’re at the point that we don’t care which module it is.(As long as it’s at least Template Layout. Thank you.)
There are huge advantages for designers and developers
CSS is the framework
MaintainabilityHow designers think
There are huge advantages for designers and developers
CSS is the frameworkMaintainability
How designers think
There are huge advantages for designers and developers
CSS is the frameworkMaintainabilityHow designers think
A solid layout mechanismwill change the faceof the Web.
Learn more or get involved
CSS3-layouthttp://www.w3.org/TR/css3-layout
CSS3-flexboxhttp://www.w3.org/TR/css3-flexbox
CSS3-gridhttp://www.w3.org/TR/css3-grid
CSS WG Mailing [email protected]
Thank you!This presentation is available at:the-haystack.com/presentations/fronteers09/
twitter.com/stephenhay
Special thanks to Bert Bos for his input, and to Khoi Vinh forallowing me to use his wonderful example.