New layout models on the Web (Mobile World Congress 2014)
Upcoming SlideShare
Loading in...5
×
 

New layout models on the Web (Mobile World Congress 2014)

on

  • 99 views

By Juan José Sánchez Penas

By Juan José Sánchez Penas

Statistics

Views

Total Views
99
Views on SlideShare
94
Embed Views
5

Actions

Likes
0
Downloads
2
Comments
0

1 Embed 5

http://www.slideee.com 5

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

New layout models on the Web (Mobile World Congress 2014) New layout models on the Web (Mobile World Congress 2014) Presentation Transcript

  • New layout models on the Web Implementing CSS3 Standards: CSS Grid Layout & CSS Regions Juan J. Sánchez - jjsanchez@igalia.com Xavier Castaño - xcastanho@igalia.com Igalia 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 like CSS standards and accessibility. · · · CSS Grid Layout in Blink and Webkit. CSS Regions in WebKit. CSS Flexible Box Layout and CSS Variables in the past. - - - 3/32
  • CSS Grid Layout “allows authors to easily define complex, responsive 2-dimensional layouts” 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 and more 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 flexible mechanism 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.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 the horizontal and vertical dividing lines of the grid. · 7/32
  • CSS Grid Layout | Concepts #igalia #W3C #MWC14 Grid track is a generic term for a grid column . 8/32
  • CSS Grid Layout | Concepts #igalia #W3C #MWC14 Grid track is a generic term for a grid row. 9/32
  • CSS Grid Layout | Concepts #igalia #W3C #MWC14 Grid cell is the space between two adjacent row and two adjacent column grid lines. 10/32
  • CSS Grid Layout | Concepts #igalia #W3C #MWC14 Grid area is the logical space used to lay out one or more grid items. It is bound by four grid lines, one on each side of the grid 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:· length percentage flex (fr - free space - unit) max-content min-content minmax(min, max) auto - - - - - - - 13/32
  • CSS Grid Layout | Demo Video format or MIME type is not supported.Video format or MIME type is not supported.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 14/32
  • 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 referenced to position grid items. Follows CSS Box Alignment spec for alignment features. · · 15/32
  • CSS Grid Layout | Areas & Alignment #igalia #W3C #MWC14 16/32
  • 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 and Igalia) and Safari/WebKit (Igalia). Firefox/Gecko has plans to implement it but work has not 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 areas supported. Placement options, track breadths and layout grid items are also 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 web content” 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 is currently very difficult. CSS regions enable you to link HTML elements so that text overflow from one region automatically flows into the next region It is a powerful and flexible mechanism defined by the W3C. · · · 20/32
  • CSS Regions | 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.Video format or MIME type is not supported.Video format or MIME type is not supported. 0:000:00 #igalia #W3C #MWC14 21/32
  • CSS Regions | Concepts #igalia #W3C #MWC14 Named flow is the content that will be displayed into the different regions. 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 Video format or MIME type is not supported.Video format or MIME type is not supported.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 24/32
  • CSS Regions | Selection #igalia #W3C #MWC14 Selection is sometimes unnatural like in other layout models (absolute positions, flexbox, grid, shadow DOM). Igalia is collaborating with Adobe to make selection in CSS Regions spec compliant. · · 25/32
  • CSS Regions | CSS Fragmentation #igalia #W3C #MWC14 The fragmentation problem is common to different features like CSS Paged Media, CSS Multi-column Layout and CSS Regions. The CSS Fragmentation spec defines the rules for splitting the content 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 was challenging. Solutions: CSS Grid Layout and CSS Regions combined with other specs like CSS Shapes and/or Media Queries. Igalia and others are working on getting this implemented in 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 is sponsoring our work in CSS Grid Layout. Igalia partners with Adobe to collaborate in CSS Regions. · · 30/32
  • Thank You! igalia.com/contact - igalia.com/browsers Juan J. Sánchez - jjsanchez@igalia.com Xavier Castaño - xcastanho@igalia.com Igalia