CSS Layout: From Table to Flexbox

CSS Layout: From Table to Flexbox

37929aa3d175e16abb209709b9e1d093?s=128

Diogo Moretti

May 16, 2015
Tweet

Transcript

  1. 2.

    CSS LAYOUTS FROM TABLE TO FLEXBOX ‣ Front-end Developer @

    Chaordic ‣ Website maintainer @ BrazilJS ‣ Co-organizer @ FloripaJS Devs Meetup ‣ Organizer @ Front in Floripa ‣ Pearl Jam Fan \m/ ABOUT ME
  2. 4.

    WHAT IS CSS LAYOUT? It is the use of CSS

    to create layouts. The naming came up with the CSS 1.0 and 2.1 to replace the tables. Today the term is also used by W3C for the creation of new specifications.
  3. 6.
  4. 7.

    ‣ Appeared at 1995 with working draft (until today) of

    HTML 3.0 ‣ Gained strength (+attributes) with the approved HTML 3.2 ‣ Contrary to the common thinking, the <table> burn for tabular data and also to create layouts TABLE HISTORY http://www.w3.org/TR/REC-html32#table
  5. 8.

    ‣ <TABLE border=0> ‣ <BODY bottomMargin=0 leftMargin=0> ‣ <TD valign=top>

    ‣ <TABLE cellspacing=10 cellpadding=10> ‣ <TD colspan=3 rowspan=1> TABLE FACTS http://www.w3.org/TR/REC-html32#table I do not want those weird borders. Great! My website now sticks to the left. Vertical center align? Who will need it? What the diff? F uck! Very simple. Oh, wait… #)&*@
  6. 9.

    ‣ Style (?), content and markup mixed ‣ Non-incremental render

    (doesn`t show feedback) ‣ Acessibility ‣ Unreadable code TABLE PROBLEMS http://en.wikipedia.org/wiki/Incremental_rendering
  7. 10.
  8. 11.

    ‣ Appeared at 1996 with CSS 1 and the HTML

    3.2 ‣ CSS Concept (separate style and markup, besides the reuse rules) ‣ Appearing of block elements: <div>, <h1>, <p>… BOX MODEL HISTORY
  9. 12.

    with css 1 ‣ width, height ‣ display, float ‣

    margin, padding e border BOX MODEL EVOLUTION I http://www.w3.org/TR/CSS21/
  10. 13.

    with css 2.1 ‣ position ‣ top, bottom, left, right

    ‣ And after, max-* e min-* for height and width BOX MODEL EVOLUTION II http://www.w3.org/TR/css3-ui/
  11. 19.

    ‣ Align objects vertically ‣ Positioning boxes side-by-side (float, inline

    or inline-block!?) ‣ Clearfix method, clear: both… ‣ Automatic height ‣ Boxes with the same height ‣ … and more (really!) BOX MODEL PROBLEMS
  12. 21.

    ‣ He was born to solve layout problems and create

    a standard of columns ‣ Started at 2007 with Blueprint ‣ Usually divided into columns (12, 16 or 24) ‣ It is an abstraction of the box model, because it just have CSS 2.1 behind ‣ The “Boom” happened at 2009, with 960.gs GRID SYSTEMS?
  13. 22.
  14. 23.

    WITH THE GRID… 1 2 3 <div class="container clearfix"> <div

    class="span-8">1</div> <div class="span-8">2</div> <div class="span-8 last">3</div> </div>
  15. 24.

    ‣ Column ‣ Fluid / Fixed ‣ Semantic / Non-Semantic

    ‣ Responsive / Fixed / Adaptative ‣ … and more! GRID TYPES http://www.vanseodesign.com/web-design/grid-types/ http://www.thegridsystem.org/ http://www.sitepoint.com/understanding-css-grid-systems/
  16. 26.

    SEMANTIC <div class="row"> <div class="col-xs-12 col-sm-12 col-md-9">...</div> <div class="col-xs-12 col-sm-12

    col-md-9">...</div> <div class="col-xs-12 col-sm-12 col-md-9">...</div> </div> <ul class="grid grid--full"> <li class="grid__item one-whole s--one-half l--one-quarter"> ... </li> </ul>
  17. 28.

    SEMANTIC <div class=“products-list"> <div class="product-item">...</div> <div class="product-item">...</div> <div class=“product-item">...</div> </div>

    .products-list container()
 
 .product-item column(12) @media tablet column(8) page.html default.styl example using semantic.gs
  18. 29.
  19. 31.
  20. 35.
  21. 38.

    ‣ 100% Fluid ‣ 100% Semantic ‣ Responsive ‣ Written

    in Stylus ‣ Use $placeholder ‣ Fully configurable ‣ box-sizing: border-box by default GRIDER
  22. 39.

    GRIDER @import “path/to/grider" .sidebar @extends $grider-3 .another-box @extends $grider-3 .content

    @extends $grider-9 .sidebar, .another-box { .. } .content { .. } default.styl default.css
  23. 40.
  24. 41.

    CSS LAYOUT SPECS http://goo.gl/52sGOm CSS Grid Layout Module Level 1

    Specification Release Today Status CSS Flexible Box Layout Module Level 1 2009 2014 Last Call
 WD CSS Grid Layout Module Level 1 2011 2015 WD CSS Template Layout Module 2005 2015 WD Note CSS Multi-Column Layout Module 1999 2011 RC
  25. 42.
  26. 44.

    FLEXBOX DEFINITION The main idea is to give the "container"

    the ability to change the width and height of your children in order to fill the blank spaces better and also to prevent overflow.
  27. 45.

    FLEXBOX - THE BOX 1 2 main size cross size

    CROSS AXIS MAIN AXIS main start main end cross start cross end
  28. 47.

    FLEXBOX PROPERTIES ‣ display ‣ flex-direction ‣ flex-wrap ‣ flex-flow

    ‣ justify-content ‣ align-items ‣ … ‣ order ‣ flex-grow ‣ flex-shrink ‣ flex-basis ‣ align-self Flex Container Flex Item
  29. 55.

    flex-wrap nowrap default 1 2 3 4 5 6 wrap

    1 2 3 4 5 6 wrap-reverse 5 6 4 3 1 2
  30. 56.

    flex-flow flex-direction + flex-wrap row wrap 1 2 3 4

    5 6 row nowrap 1 2 3 4 5 6 default
  31. 75.

    flex 1 .item { flex: 0 1 auto; } flex-grow

    + flex-shrink + flex-basis 2 3