Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Layout: From Table to Flexbox

CSS Layout: From Table to Flexbox

37929aa3d175e16abb209709b9e1d093?s=128

Diogo Moretti

May 16, 2015
Tweet

Transcript

  1. CSS LAYOUT FROM TABLE TO FLEXBOX

  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
  3. CSS LAYOUT ≠

  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.
  5. ROADMAP Table Box Model Grid Systems Flexbox

  6. TABLE

  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
  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… #)&*@
  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
  10. BOX MODEL

  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
  12. with css 1 ‣ width, height ‣ display, float ‣

    margin, padding e border BOX MODEL EVOLUTION I http://www.w3.org/TR/CSS21/
  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/
  14. 2002 - TABLELESS http://www.w3.org/2002/03/csslayout-howto http://alistapart.com/article/practicalcss http://tableless.com.br <table> box model tabular

    data layouts with css ( )
  15. with css 3 ‣ box-sizing BOX MODEL EVOLUTION III http://www.w3.org/TR/css3-ui/

  16. content padding border margin

  17. content padding border margin box-sizing: border-box; width and height are

    not affected by padding or border
  18. http://reference.sitepoint.com/css/ie5boxmodel

  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
  20. GRID SYSTEMS

  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?
  22. BEFORE THE GRID… 1 2 3 :( Question 1: Make

    with css, the image above:
  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>
  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/
  25. FLUID ≠ RESPONSIVE

  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>
  27. Non-semantic statements only make sense if we use pure css

  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
  29. EXAMPLES

  30. blueprintcss.org

  31. 960.gs

  32. semantic.gs

  33. getbootstrap.com

  34. foundation.zurb.com

  35. None
  36. MANY OPTIONS, BUT… I made mine =]

  37. diogomoretti.github.io/grider

  38. ‣ 100% Fluid ‣ 100% Semantic ‣ Responsive ‣ Written

    in Stylus ‣ Use $placeholder ‣ Fully configurable ‣ box-sizing: border-box by default GRIDER
  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
  40. None
  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
  42. FLEXBOX

  43. http://caniuse.com/#feat=flexbox 11+ 28+ 29+ 6.1+ 17+ -webkit- all major mobile

    browsers
  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.
  45. FLEXBOX - THE BOX 1 2 main size cross size

    CROSS AXIS MAIN AXIS main start main end cross start cross end
  46. FLEXBOX TERMINOLOGY 1 2 3 Flex Container Flex Items

  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
  48. GET STARTED <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div>

    </div> flex container flex items
  49. WITHOUT FLEXBOX 1 2 3

  50. GET STARTED .container { display: flex; }

  51. WITH FLEXBOX 1 2 3

  52. FLEX-CONTAINER PROPERTIES

  53. flex-direction 1 2 3 row default 3 2 1 row-reverse

  54. flex-direction 1 2 column 3 3 2 column-reverse 1

  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
  56. flex-flow flex-direction + flex-wrap row wrap 1 2 3 4

    5 6 row nowrap 1 2 3 4 5 6 default
  57. ALIGNMENT align-items justify-content cross-axis main-axis

  58. justify-content 1 flex-start default 2 3 1 flex-end 2 3

  59. justify-content 1 center 2 3

  60. justify-content 1 space-between 2 3 1 space-around 2 3

  61. align-items 1 stretch 2 3 default 1 flex-start 2 3

  62. align-items 1 flex-end 2 3 1 center 2 3

  63. align-items 1 baseline 2 3

  64. align-content 1 stretch 2 3 4 5 6 7 8

    9 default
  65. align-content 1 flex-start 2 3 4 5 6 7 8

  66. align-content 1 flex-end 2 3 4 5 6 7 8

  67. align-content 1 center 2 3 4 5 6 7 8

  68. align-content 1 space-between 2 3 4 5 6 7 8

  69. align-content 1 space-around 2 3 4 5 6 7 8

  70. FLEX-ITEMS PROPERTIES 1 2 3

  71. order 3 {number} 1 2 .item3 { order: -1; }

  72. flex-grow 1 {number} 2 3 .item2 { flex-grow: 2; }

  73. flex-shrink 1 {number} .item2 { flex-shrink: 2; } 3 2

  74. flex-basis 1 {size} .item1 { flex-basis: 20px; } 3 2

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

    + flex-shrink + flex-basis 2 3
  76. align-self 1 2 3 .item1{align-self: flex-start} .item2{align-self: stretch} .item3{align-self: flex-end}

    default: auto
  77. .item {margin: auto} .container {display: flex}

  78. RESOURCES ‣ https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox- properties ‣ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ flex- wrap ‣ http://cssflexbox.com

    ‣ http://philipwalton.github.io/solved-by-flexbox/ Learn ‣ https://github.com/philipwalton/flexbugs Bugs
  79. floripajs.org JOIN  US!

  80. diogo.nu THANKS!