“Future layouts”

By Robert Sedovšek (@sedovsek)

Introduction

This talk IS about

Why?

Current problems

Current problems

Current tools

Current tools

Current solutions

CSS property 'float'

'float'
Value:  left | right | none | inherit
Initial:  none
Applies to:  all, but see 9.7
Inherited:  no
Percentages:  N/A
Media:  visual
Computed value:  as specified

Source: http://www.w3.org/TR/CSS2/visuren.html

Current solutions

CSS property 'position'

'position'
Value:  static | relative | absolute | fixed | inherit
Initial:  static
Applies to:  all elements
Inherited:  no
Percentages:  N/A
Media:  visual
Computed value:  as specified

Source: http://www.w3.org/TR/CSS2/visuren.html

Current solutions

CSS property 'display'

'display'
Value:  inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
Initial:  inline
Applies to:  all elements
Inherited:  no
Percentages:  N/A
Media:  all
Computed value:  see text

Source: http://www.w3.org/TR/CSS2/visuren.html

SMACK! MEGA MESS!

Current solutions

Negative margins

margin-top: -50px;

Current solutions

Media Queries

Simon Collison - smartphone Simon Collison - tablet Simon Collison - netbook Simon Collison - desktop

Source: Mr. Simon Collison's webpage, images from mediaqueri.es

Current solutions

Relying on JavaScript hacks

Layout in print & paper

Print Magazines

Source: "Award-Winning Newspaper Designs", Smashing Magazine

Print Magazines

Source: "Award-Winning Newspaper Designs", Smashing Magazine

Print Magazines

Source: "Award-Winning Newspaper Designs", Smashing Magazine

Print Magazines

Source: "Award-Winning Newspaper Designs", Smashing Magazine

Print Magazines

Source: "Award-Winning Newspaper Designs", Smashing Magazine

Print Magazines

Source: "Award-Winning Newspaper Designs", Smashing Magazine

Print Magazines

Source: "Award-Winning Newspaper Designs", Smashing Magazine

'Our' brief history

Web browsers

WorldWideWeb (1990) was the first web browser, later renamed to Nexus to avoid confusion between the software and the World Wide Web.

Tim Berner's Lee

Tim Berners-Lee's original WorldWideWeb browser in 1993

Web browsers history

1993
Mosaic, later Netscape (1994), later Mozilla Firefox (2004)
1995
Internet Explorer
1996
Opera
2003
Safari
2008
Chrome

The first WebSite

The first WebSite

A later (1992) copy of the original pages.

The first WebSite's source code

And it's source code.

HTML tags

At that point, the avaliable HTML tags were:

Source: http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html

Markup

1995
HTML 2.0 (NetScape Navigator 1.1 & Internet Explorer 2.0 have tables)
1997
HTML4 - standardized
2008
HTML5 (still under development)

Quick, fast forward to now()

For now

Pixar's website in 2012

Pixar's website in 2012

Expectation! vs. Reality

Pixar's website source code
Pixar's website source code

New Semantic Elements in HTML5

HTML4 layout

<div id="header">
    <div id="hgroup">
        <h1>Site title</h1>
        <h2>Site Description</h2>
    </div>
</div>

<div id="nav">
    <ul>
        <li><a href="home">Home</a></li>
    </ul>
</div>

<div class="article">blog post 1</div>

<div class="article">blog post 2</div>

<div id="aside">Ads</div>

<div id="section">widget</div>

<div id="footer">Copyrights 2012</div>

Top 20 CLASS names

PopularityValueFrequency
1footer179528
2menu146673
3style1138308
4msonormal123374
5text122911
6content113951
7title91957
8style289851
9header89274
10copyright86979
PopularityValueFrequency
11button81503
12main69620
13style369349
14small68995
15nav68634
16clear68571
17search59802
18style456032
19logo48831
20body48052

Source: http://devfiles.myopera.com/articles/572/classlist-url.htm

HTML5 layout

<header>
    <hgroup>
        <h1>Site title</h1>
        <h2>Site Description</h2>
    </hgroup>
</header>

<nav>
    <ul>
        <li><a href="#">Home</a></li>
    </ul>
</nav>

<article>blog post 1</article>

<article>blog post 2</article>

<aside>Ads</aside>

<section>widget</section>

<footer>Copyrights 2012</footer>

HTML5 Semantic Elements

Browser support

Supported by:
  • Chrome
  • Firefox
  • Opera
  • Internet Explorer 9+

HTML5 Semantic Elements

Browser support

For Internet Explorer 6-8: Javascript hack for the rescue

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

The FUTURE

Multiple Columns

Allowing long chunks of text to wrap to multiple columns. This technique is widely popular in editorial design of magazines and newspapers.

W3.org: CSS Multi-column Layout Module, http://www.w3.org/TR/css3-multicol/

Multiple Columns

Implementation

element {
  (-prefix-)column-width: <length unit> | auto; // or
  (-prefix-)column-count: <integer> | auto;
  
  (-prefix-)column-gap: <length unit> | normal;
  
  (-prefix-)column-rule-color: <color>;
  (-prefix-)column-rule-style: <border-style>;
  (-prefix-)column-rule-width: <border-width>;
}

Multiple Columns

Implementation: controling breaks

element {
  /* Control how the content displays within each column. */
  break-before: auto | always | avoid | left | right |
                page | column | avoid-page | avoid-column;
                
  break-after:  auto | always | avoid | left | right |
                page | column | avoid-page | avoid-column;
                
  break-inside: auto | avoid | avoid-page | avoid-column;
}

Multiple Columns

Break properties explained

auto
Neither force nor forbid a page/column break before (after, inside) the generated box.
always
Always force a page break before (after) the generated box.
avoid
Avoid a page/column break before (after, inside) the generated box.
left
Force one or two page breaks before (after) the generated box so that the next page is formatted as a left page.
right
Force one or two page breaks before (after) the generated box so that the next page is formatted as a right page.
page
Always force a page break before (after) the generated box.
column
Always force a column break before (after) the generated box.
avoid-page
Avoid a page break before (after, inside) the generated box.
avoid-column
Avoid a column break before (after, inside) the generated box.

Self explanatory? Ok, Ok!

Multiple Columns

Implementation: span and fill

element {
  /* none: The element does not span multiple columns. */
  /* all: The element spans across all columns. */
  column-span: none | all;
  
  /* balance: Balance content equally between columns, if possible. */
  /* auto: Fills columns sequentially. */
  column-fill: auto | balance;
}

Multiple Columns

An example of the column-span behaviour:
h2 { column-span: all: }

Source: W3C Editor’s Draft — CSS Multi-column Layout Module.

Multiple Columns

An example of column-fill: balanced (default behaviour):

Source: Smashing Magazine — Six CSS Layout Features To Look Forward To.

Multiple Columns

An example of column-fill: auto behavior:

Source: Smashing Magazine — Six CSS Layout Features To Look Forward To.

Multiple Columns

Implementation: DIY

Adjust me, please! I am a very laaarge introduction text that needs to be spanned

The relaunch of Smashing Magazine has sparked quite a discussion in the community. Some of you feel that the design is "too responsive", others feel that the ads are too prominent, but most of you liked the lean, clean new layout. We hope that the new design makes reading more enjoyable — which is what any online magazine should aspire to, right? We are still working on fixing minor bugs, and we’re continually testing minor layout changes. We encourage you to send us feedback or comments — we'd sincerely appreciate that!

Multiple Columns

Supported by:
  • Firefox 2+
  • Chrome 4+
  • Safari 3.1+
  • Opera 11.1+
  • Internet Explorer 10+

Regions

Allows content to flow across multiple areas called regions. It provides an advanced content flow mechanism.

W3.org: CSS Regions Module Level 3, http://www.w3.org/TR/css3-regions/

Regions

Layout requiring sophisticated content flow:

Source: W3C Editor’s Draft — CSS Regions Module.

Regions

Implementation

The following HTML code snippet shows the content to flow between the regions 1, 2, 3 and 4. Region A represents an image.

<article id="article">
  <h1>Introduction</h1>
  <p>This is an example ...</p>

  <h1>More Details</h1>
  <p>This illustrates ...</p>
  <p>Then, the example ...</p>
  <p>Finally, this ...</p>
</article>

Examples of HTML elements, used as regions.

<div id="region1"></div>
<div id="region2"></div>
<div id="region3"></div>
<div id="region4"></div>

Regions

This rendered layout is the desired result:

Source: W3C Editor’s Draft — CSS Regions Module.

Regions

Implementation

#article {
  (-prefix-)flow-into: article_flow;
}

#region1, #region2, #region3, #region4 {
  (-prefix-)flow-from: article_flow;
}

Regions

Custom shapes

Text content flowing inside custom shapes:

Source: Adobe: CSS3 regions: Rich page layout with HTML and CSS3.

Regions

Custom shapes implementation

.circle {
/* shape the element as a circle */
    wrap-shape: polygon(0px, 150px /* ...more points */);
    wrap-shape-mode: content;
}

.heart {
    /* shape the element as a heart */
    wrap-shape: polygon(150px, 32px /* ...more points */);
    wrap-shape-mode: content;
}

Source: Adobe: CSS3 regions: Rich page layout with HTML and CSS3.

Regions

Supported by:
  • Chrome 15+
  • Safari 6+
  • Internet Explorer 10+

Exclusions

W3.org: CSS Exclusions and Shapes Module Level 3, http://www.w3.org/TR/css3-exclusions/

Exclusions

The text flows around the shape of the image thanks to CSS Exclusions

Source: http://www.netmagazine.com/features/future-css-layouts

Exclusions

Implementation

An element becomes an "exclusion element" when wrap-flow is set to a value that is not auto. The following values are avaliable:

#exclusion {
  (-prefix-)wrap-flow: auto | both | start | end | maximum | clear;
}

Exclusions

Wrap-flow properties explained

auto
Exclusion is not created and inline flow content interacts with the element as usual. For example it will wrap around floats and other elements.
both
Inline flow content can flow on all sides of the exclusion.
start
Inline flow content can wrap on the start edge of the exclusion area but must leave the area to end edge of the exclusion area empty.
end
Inline flow content can wrap on the end side of the exclusion area but must leave the area to the start edge of the exclusion area empty.
maximum
Inline flow content can wrap on the side of the exclusion with the largest available space for the given line, and must leave the other side of the exclusion empty.
clear
Inline flow content can only wrap on top and bottom of the exclusion and must leave the areas to the start and end edges of the exclusion box empty.

Hey! Noone will read this!
A note to self

Exclusions

Implementation

The following CSS code snipplet shows the use of exclusions.

#exclusion {
  position: absolute;
  background: lightblue;
  wrap-flow: auto | both | start | end | maximum | clear;
}

The example of HTML to form the following examples.

<article>
    <section id="exclusion">Donec metus messa, mollis...</section>
    Lorem ipsum dolor sit amet... 
</article>

Exclusions

#exclusion { wrap-flow: auto; }

Source: W3C Working Draft — CSS Exclusions and Shapes Module.

Exclusions

#exclusion { wrap-flow: both; }

Source: W3C Working Draft — CSS Exclusions and Shapes Module.

Exclusions

#exclusion { wrap-flow: start; }

Source: W3C Working Draft — CSS Exclusions and Shapes Module.

Exclusions

#exclusion { wrap-flow: end; }

Source: W3C Working Draft — CSS Exclusions and Shapes Module.

Exclusions

#exclusion { wrap-flow: maximum; }

Source: W3C Working Draft — CSS Exclusions and Shapes Module.

Exclusions

#exclusion { wrap-flow: maximum; }

Source: W3C Working Draft — CSS Exclusions and Shapes Module.

Exclusions

#exclusion { wrap-flow: clear; }

Source: W3C Working Draft — CSS Exclusions and Shapes Module.

Exclusions

Other avaliable properties:

#exclusion {
  wrap-flow: auto | both | start | end | maximum | clear;
  wrap-margin: <length>;
  wrap-padding: <length>;
  wrap-through: wrap | none;
  
  /* shorthand property */
  wrap: <wrap-flow> || <wrap-margin> [ / <wrap-padding>];
}

Exclusions

Declaring shapes

#exclusion {
  shape-inside: outside-shape | auto | <shape> | <uri>;
  shape-outside: auto | <shape> | <uri>;
  
  shape-image-threshold: <alphavalue>;
}

The ‘shape-outside’ property changes the geometry of an exclusion element‘s exclusion are.

The ‘shape-inside’ modifies the shape of the inner inline flow content from rectangular content box to an arbitrary geometry.

Exclusions

SVG Shapes

Exclusions

Shapes from Images

Defining shapes by specifying a source image and using its alpha channel threshold shape-image-threshold to compute (extract) the inside or outside shape.

Values: 0-1, default 0.5:

Exclusions

Source: Smashing Magazine — Six CSS Layout Features To Look Forward To.

Exclusions

Supported by:
  • Internet Explorer 10+

Grid

W3.org: Grid Layout, http://www.w3.org/TR/css3-grid-layout/

Grid

Implementation

body {
  display: grid;
  grid-columns: 150px 1fr; /* two columns */
  grid-rows: 50px 1fr 50px; /* three rows  */
}

Grid

This is how the grid should look like:

Source: W3C Editor’s Draft — CSS Grid Layout.

Grid

Grid items

Once the grid is created, we can position GRID ITEMS on it. Grid items are HTML5 sectioning elements.

#header { grid-column: 1; grid-row: 1; }
#nav { grid-column: 1; grid-row: 3; }
#article { grid-column: 2; grid-row: 1; grid-row-span: 2; }
#aside { grid-column: 1; grid-row: 2; grid-row-align: start; }
#footer { grid-column: 2; grid-row: 2; grid-column-align: center; }

SMACK! A bit MESSY?

Grid

Grid Lines

Grid Lines are the horizontal or vertical dividing lines. They may be referred to by their number (example 1), or named by the author (example 2).

#grid {
  display: grid;
  grid-columns: 150px 1fr;
  grid-rows: 50px 1fr 50px;
}
#item1 {
  grid-column: 2;
  grid-row: 1 4;
}
#grid {
  display: grid;
  grid-columns: 150px "item1-start" 1fr "item1-end";
  grid-rows: "item1-start" 50px 1fr 50px "item1-end";
}
#item1 {
  grid-column: "item1-start" "item1-end";
  grid-row: "item1-start" "item1-end";
}

Grid

Grid Lines

This is how the previous example should look like:

Source: Grid Layout, http://www.w3.org/TR/css3-grid-layout/.

Grid

Template Layout

Grid

Other avaliable properties:

Spanning rows and columns
grid-column-span: <integer>;
grid-row-span: <integer>;
Grid item alignment
grid-column-align: 'start' | 'end' | 'center' | 'stretch';
grid-row-align: 'start' | 'end' | 'center' | 'stretch';
Drawing order of grid items
grid-layer: <integer>;

Grid

Supported by:
  • Internet Explorer 10+

Flexbox

W3.org: CSS Flexible Box Layout Module, http://www.w3.org/TR/css3-flexbox/

Flexbox

Implementation

Flexbox is an element with display: flexbox or display: inline-flexbox.

p {
  width: 500px; padding: 5px;
  
  display: flexbox;
  flex-pack: distribute;
  flex-align: center;
}
button  { width: 100px; }
.bigger { width: 200px; }
<p>
  <button class="bigger">Child 1<br>Another Line</button>
  <button>Child 2</button>
  <button>Child 3</button>
</p>

Flexbox

This rendered layout is the desired result:

CSS Flexible Box Layout Module, http://www.w3.org/TR/css3-flexbox/.

Flexbox

Other avaliable properties:

Flow direction
flex-flow: row | row-reverse | column | column-reverse
Display order
flex-order: <number>;
Main axis alignment
flex-align: start | end | center | baseline | stretch;
Cross axis alignment (applies to individual flexbox items)
flex-item-align: auto | start | end | center | baseline | stretch;

Flexbox

Adjusting order

<!DOCTYPE html>
<header>...</header>
<div id='main'>
   <article>...</article>
   <nav>...</nav>
   <aside>...</aside>
</div>
<footer>...</footer>
#main { display: flexbox; }
#main > article { flex:1;         flex-order: 2; }
#main > nav     { width: 200px;   flex-order: 1; }
#main > aside   { width: 200px;   flex-order: 3; }

Flexbox

Adjusting order

This rendered layout is the desired result:

CSS Flexible Box Layout Module, Editor's Draft, 12 March 2012http://dev.w3.org/csswg/css3-flexbox/#flex-order0.

Flexbox

Supported by:
  • Internet Explorer 10+