new layout models on the web (mobile world congress 2014)

New layout models on the WebImplementing CSS3 Standards: CSS Grid Layout & CSS Regions

Juan J. Sánchez - [email protected] Castaño - [email protected]

W3C Booth | Mobile World Congress (Barcelona) - 24-27 February 2014

Igalia

#igalia #W3C #MWC14

Open Source consultancy founded in 2001.Top external contributor to WebKit and Blink.Member of the W3C, contributing in different topics likeCSS standards and accessibility.

·

·

·

CSS Grid Layout in Blink and Webkit.CSS Regions in WebKit.CSS Flexible Box Layout and CSS Variables in thepast.

-

-

-

3/32

CSS Grid Layout“allows authors to easily define complex, responsive 2-dimensionallayouts”

by Tab Atkins Jr. (Google)at CSS WG Blog

source: http://www.w3.org/blog/CSS/2014/01/23/css-grid-draft-updated/

CSS Grid Layout | Introduction

#igalia #W3C #MWC14

Grid based designs were first done using tables andmore recently floating divs.Those approaches have issues and a lot of complexity.Lots of CSS frameworks emerging to make things easier.CSS Grid Layout is one of them: a powerful and flexiblemechanism defined by the W3C.

·

·

·

·

5/32

CSS Grid Layout | Introduction

Video format or MIME type is not supported.Video format or MIME type is not supported.


Video format or MIME type is not supported.

0:000:00

#igalia #W3C #MWC14 6/32

CSS Grid Layout | Concepts

#igalia #W3C #MWC14

Grid lines are thehorizontal and verticaldividing lines of the grid.

·

7/32


#igalia #W3C #MWC14

Grid track is a generic termfor a grid column

.

8/32


#igalia #W3C #MWC14

Grid track is a generic termfor a gridrow.

9/32


#igalia #W3C #MWC14

Grid cell is the spacebetween two adjacent rowand two adjacent columngrid lines.

10/32


#igalia #W3C #MWC14

Grid area is the logicalspace used to lay out oneor more grid items. It isbound by four grid lines,one on each side of thegrid area.

11/32

CSS Grid Layout | Syntax

#igalia #W3C #MWC14

.grid { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 100px 1fr auto; }

.title { grid-column: 1; grid-row: 1; } .menu { grid-column: 1; grid-row: 2 / span 2; } .main { grid-column: 2; grid-row: 1 / span 2; } .footer { grid-column: 2; grid-row: 3; }

CSS

display: grid: Defines a grid container.

grid-template-columns and grid-template-rows: Specify the track breadths.

grid-column and grid-row: Determine a grid item's size and location within the grid.

·

·

·

<div class="grid"> <div class="title">Title</div> <div class="menu">Menu</div> <div class="main">Main</div> <div class="footer">Footer</div> </div>

HTML

12/32

CSS Grid Layout | Track Breadths

#igalia #W3C #MWC14

Options:·

lengthpercentageflex (fr - free space - unit)max-content

min-content

minmax(min, max)

auto

-

-

-

-

-

-

-

13/32

CSS Grid Layout | Demo




0:000:00


CSS Grid Layout | Areas & Alignment

#igalia #W3C #MWC14

.grid { display: grid; grid-template-areas: "title title title social" "menu main main social" "menu main main social" "footer footer footer footer"; } .title { grid-area: title; align-self: center; justify-self: center; } .menu { grid-area: menu; align-self: start; } .main { grid-area: main; } .social { grid-area: social; align-self: end; justify-self: right; } .footer { grid-area: footer; align-self: start; }

CSS

grid-template-areas specifies named grid areas that can be referencedto position grid items.Follows CSS Box Alignment spec for alignment features.

·

·

15/32

CSS Grid Layout | Areas & Alignment


CSS Grid Layout | Current status

#igalia #W3C #MWC14

Spec (W3C Working Draft, 23 January 2014):http://www.w3.org/TR/css-grid-1/.Main browsers:

·

·

Already shipped in IE/Trident.Work in progress in Chromium/Blink (Google andIgalia) and Safari/WebKit (Igalia).Firefox/Gecko has plans to implement it but work hasnot started yet.

·

·

·

17/32

CSS Grid Layout | Status in WebKit and Blink

#igalia #W3C #MWC14

Done:

Work in progress:

·

Grid properties, named grid lines and named grid areassupported.Placement options, track breadths and layout grid items arealso implemented.

-

-

·

Alignment.Performance optimizations.Support for different writing modes.Selection.Subgrids (out of Working Draft for now).

-

-

-

-

-

18/32

CSS Regions“make it easier than ever to create rich, magazine-like layouts within webcontent”

by Beth Dakin (Apple) and Mihnea-Vlad Ovidenie (Adobe)at Surfin' Safari - The WebKit Blog

source: https://www.webkit.org/blog/3078/advanced-layout-made-easy-with-css-regions/

CSS Regions | Introduction

#igalia #W3C #MWC14

Allowing to flow content into existing styled containers iscurrently very difficult.CSS regions enable you to link HTML elements so that textoverflow from one region automatically flows into thenext regionIt is a powerful and flexible mechanism defined by theW3C.

·

·

·

20/32

CSS Regions | Introduction




0:000:00


CSS Regions | Concepts

#igalia #W3C #MWC14

Named flow is the content that will be displayed into the differentregions.Region is a block container that has an associated named flow.

·

·

22/32

CSS Regions | Syntax

#igalia #W3C #MWC14

.source { flow-into: content-1; }

.region { flow-from: content-1; }

CSS

flow-into property places an element into a named flow.flow-from converts a block in a region and associates it with a named flow.

·

·

<div class="source">Lorem ipsum dolor sit amet...</div>

<div class="region" id="region-1"></div> <div class="region" id="region-2"></div> <div class="region" id="region-3"></div>

HTML

23/32

CSS Regions | Demo




0:000:00


CSS Regions | Selection

#igalia #W3C #MWC14

Selection is sometimesunnatural like in otherlayout models(absolute positions,flexbox, grid, shadowDOM).Igalia is collaboratingwith Adobe to makeselection in CSSRegions speccompliant.

·

·

25/32

CSS Regions | CSS Fragmentation

#igalia #W3C #MWC14

The fragmentation problem is common to different features likeCSS Paged Media, CSS Multi-column Layout and CSS Regions.The CSS Fragmentation spec defines the rules for splitting thecontent into containers.The fragmentation containers (fragmentainers) can be pages,columns or regions depending on the case.Breaks divide the content into the different fragmentainers.

·

·

·

·

Breaks can be unforced or forced.Some elements can be marked as unbreakable.

-

-

26/32

CSS Regions | Current Status

#igalia #W3C #MWC14

Spec (W3C Working Draft, 18 February 2014):http://www.w3.org/TR/css3-regions/Main browsers:

·

·

Already shipped in IE/Trident and Safari/WebKit(Adobe with Igalia collaborating on selection).Chromium/Blink implementation is being removed.However, CSS Fragmentation is going to be kept.Firefox/Gecko do not plan to implement it.

·

·

·

27/32

CSS Regions | Status in WebKit

#igalia #W3C #MWC14

Done:

Work in progress:

·

Named flows and regions are fully functional.Support to manage regions overflow.JavaScript objects available to manipulate regions.

-

-

-

·

Selection. Igalia has a working prototype.Region styling support (only color and background for now).

-

-

28/32

Conclusions

#igalia #W3C #MWC14

Creating nice layout and content designs on the Web waschallenging.

Solutions: CSS Grid Layout and CSS Regions combinedwith other specs like CSS Shapes and/or Media Queries.Igalia and others are working on getting this implementedin the main browsers.

·

Complex layouts.Responsiveness to different screen sizes.Nice magazine contents on the Web.Flowing content into existing styled containers.

-

-

-

-

·

·

29/32

Collaborations

#igalia #W3C #MWC14

Bloomberg issponsoring our workin CSS Grid Layout.Igalia partners withAdobe to collaboratein CSS Regions.

·

·

30/32

Thank You!igalia.com/contact - igalia.com/browsers

Juan J. Sánchez - [email protected] Castaño - [email protected]

new layout models on the web (mobile world congress 2014)

Technology