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

Design & Content Layout Workshop

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
July 20, 2016

Design & Content Layout Workshop

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

July 20, 2016
Tweet

Transcript

  1. Layout Workshop Jen Simmons June 2016 Internet: MSFTOPEN … no

    password
  2. Hello

  3. Multicolumn

  4. None
  5. None
  6. article { max-width: 500px; margin: 0 auto; }

  7. article { column-count: 2; column-gap: 2em; }

  8. None
  9. article { // column-count: 2; column-width: 200px; column-gap: 2em; }

  10. None
  11. None
  12. img { width: 100%; } article { column-width: 200px; column-gap:

    2em; column-rule: 
 1px solid #444; }
  13. CSS Shapes

  14. None
  15. labs.jensimmons.com

  16. img { float: left; shape-outside: circle(); }

  17. None
  18. <h1>Jeremy Keith</h1> <img src=“jeremykeith.jpg"> <p>Jeremy Keith lives in Brighton, England

    where he makes websites with the splendid design agency Clearleft.</p>
  19. img { float: left; margin-right: 2em; margin-bottom: 0.5em; }

  20. img { float: left; margin-right: 2em; margin-bottom: 0.5em; shape-outside: circle();

    }
  21. img { float: left; shape-outside: ellipse(); }

  22. img.grapes { float: left; shape-outside: polygon(nonzero, 72.35% 83.95%, 45.5% 94.3%,

    0% 100%, 0% 88.4%, 0% 23.7%, 38.7% 11.35%, 55% 11.1%, 63.5% 22.7%, 72.15% 20.75%, 79.1% 30.6%, 79.8% 34.55%, 87.6% 43.95%, 83.7% 57.3%, 89.15% 65.7%, 92.55% 72.1%, 91.15% 83.2%); }
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. shape-outside: circle(); shape-outside: ellipse(); shape-outside: ellipse(25% 50%); shape-outside: border-box; shape-outside:

    margin-box; shape-outside: inset(0px round 120px) border-box; shape-outside: url(http://example.com/image.jpg); attr >> 0% shape-margin: 30px; shape-image-threshold: 0.5;
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. 1 2 3

  38. None
  39. None
  40. None
  41. A Headline That’s Rotated

  42. None
  43. “This is a fancy pull-quote that could be very big.”

  44. Grid

  45. drafts.csswg.org/css-grid/

  46. Browser Support

  47. None
  48. None
  49. IE & Edge implementation, by Microsoft IE old spec in

    IE10+ -ms-* prefix Edge new spec TBA
  50. Prefixes

  51. None
  52. None
  53. None
  54. SCSS CSS

  55. None
  56. SCSS CSS

  57. None
  58. main { /* autoprefixer: off */ display: grid; grid-template-columns: repeat(12,

    60px); grid-gap: 20px; }
  59. IE & Edge implementation, by Microsoft IE old spec in

    IE10+ -ms-* prefix Edge new spec TBA
  60. Blink implementation, by Igalia Chrome Chrome Canary Opera Opera Developer

    “behind a flag”
  61. chrome://flags/#enable-experimental-web-platform-features

  62. opera://flags/#enable-experimental-web-platform-features

  63. Webkit implementation, by Igalia Safari nope Safari Technical Preview yup

    * Not prefixed! Just Works! No flag!
  64. Firefox implementation, by Mozilla “behind a flag” Firefox Firefox 


    Dev Edition Firefox 
 Nightly Just Works
  65. about:config layout.css.grid.enabled

  66. nightly.mozilla.org

  67. addons.mozilla.org/addon/css-grid-inspector

  68. None
  69. labs.jensimmons.com/workshop

  70. Feature Query

  71. p::first-letter { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4;

    initial-letter: 4; }
  72. p::first-letter { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4;

    initial-letter: 4; }
  73. @supports (initial-letter: 4 ) or (-webkit-initial-letter: 4 ) { p::first-letter

    { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4; initial-letter: 4; } }
  74. @supports (property:value) { // a bunch of CSS }

  75. // layout using old-technology @supports (display:grid) { // overrides to

    undo old layout // layout using new-technology }
  76. Flexbox Grid Alignment

  77. Alignment (lvl3)

  78. justify-content align-content justify-self align-self

  79. css-tricks.com/snippets/css/a-guide-to-flexbox

  80. From CSS Box Alignment Module Level 3 — drafts.csswg.org/css-align

  81. From CSS Box Alignment Module Level 3 — drafts.csswg.org/css-align

  82. flexboxdefense.com flexboxfroggy.com

  83. Flexbox vs. Grid

  84. None
  85. None
  86. None
  87. None
  88. None
  89. None
  90. None
  91. None
  92. None
  93. None
  94. None
  95. None
  96. None
  97. Grid

  98. None
  99. None
  100. Grid Container

  101. Grid Items

  102. <main> <div>item</div> <div>item</div> <div>item</div> this is an anonymous grid item

    <div>item</div> hello word <section>more stuff</section> <footer>conclusion</footer> </main> <ul> <li> <li> <li> <li> <li> <li> <li> <li> </ul> <body> <header> <main> <article> <h1> <p> <figure> <aside> <footer> </body>
  103. <body> <header>…</header> <main> <article> <h1> <p> <p> <p> <figure> <p>

    </article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; }
  104. <body> <header>…</header> <main> <article> <h1> <p> <p> <p> <figure> <p>

    </article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; } main { display: grid; }
  105. <body> <header>…</header> <main> <article> <h1> <p> <p> <p> <figure> <p>

    </article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; } main { display: grid; } article { display: grid; }
  106. <body> <header>…</header> <main> <article> <h1> <p> <p> <p> <figure> <p>

    </article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; } main { display: subgrid; } article { display: subgrid; }
  107. Terminology

  108. Grid Area Grid Line Grid Track Grid Track Grid Cell

    Grid Line Grid Line Grid Line Grid Line
  109. Grid Area Grid Track Grid Track Grid Cell Grid Line

    Grid Line Grid Line Grid Line Grid Line Grid Gap Grid Gap Grid Gap
  110. The Grid vs. The content

  111. • Exists in HTML • Can be styled, 
 like

    anything in HTML
  112. • Exists in CSS • Can NOT be styled •

    It doesn’t exist 
 in the DOM
  113. 1 2 3 4 5 6 Grid Line Numbers Line

    Numbers, not track numbers — different than what we are used to! 1 2 3 4 5
  114. main { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 1fr);

    } aside { grid-column: 1 / 3; grid-row: 1 / -1; background: yellow; }
  115. None
  116. None
  117. .grid-container { display: grid; }

  118. .grid-container { display: grid; grid-template-columns: 60px 60px 60px 60px 60px

    60px; grid-gap: 20px; }
  119. labs.jensimmons.com/workshop

  120. div { width: 400px; padding: 25px; } What is the

    size of the <div> box? Internet Explorer: 400px Everyone else: 450px
  121. div { width: 400px; padding: 25px; } What is the

    calculated size of the box? Everyone: 400px
  122. .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr; } some

    other syntax options (each with different results) grid-template-columns: 1fr 5fr 2.5fr; grid-template-columns: 8em 1fr 300px; grid-template-columns: 1fr 1fr 2fr 3fr 5fr 8fr 13fr 21fr 34fr; grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(3, 200px 1fr 25%); grid-template-columns: repeat(auto-fill, 10em); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr);
  123. Units for setting Grid Track Sizes • Length: pX, em,

    rem, VW, VH… • percent • factor unit: 1fr • auto • measurement of content: min-content or max-content • MINMAX(); …like MINMAX(200px, 1fr);
  124. .grid-item { grid-column: 1 / 5; // goes from vertical

    line 1 to 5 grid-row: 3 / 5 // goes from horizontal line 3 to 5 } some other syntax options (each with different results) grid-column: 3 / 5; // starts at line 3, goes to line 5 grid-column: 3 / span 2; // starts at line 3, spans 2 cells grid-column: span 2 / 5; // spans 2 cells, ends at line 5 grid-column: span 2; // spans 2 cells, placed by algorithm grid-column: 4; // starts at line 4 grid-column: 1 / -1; // starts at line 1, goes to line -1 grid-column: horse / pig;
  125. 1 2 3 4 5 6 grid-column: 1 / 2;

    grid-row: 1 / 2; grid-column: 5 / 6; grid-row: 1 / 2; grid-column: 2 / 4; grid-row: 2 / 3; grid-column: 3 / 5; grid-row: 3 / 5; 1 2 3 4 5 grid-column: 1 / 2; grid-row: 4 / 5;
  126. 1 6 6 lines 5 tracks 4 gaps 2 3

    4 5
  127. Grid Line Numbers 1 2 3 4 5 6 -5

    -4 -3 -2 -1 -6 -5 -4 -3 -2 -1 1 2 3 4 5 cow horse
  128. Explicit Grid vs Implicit Grid

  129. by Manuel Rego Casasnovas http://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/

  130. Sparse & Dense

  131. 11 8 9 10 7 6 5 1 2 3

    4 auto placement algorithm
  132. 13 11 8 9 10 7 6 5 1 2

    3 4 12 grid-auto-flow: dense;
  133. None
  134. Named Lines

  135. grid-template-rows:1fr 1fr 1fr; grid-template-rows:[cow] 1fr [horse] 1fr [dog] 1fr [pig];

    grid-template-rows: repeat(auto-fit, 200px 1fr); grid-template-rows: repeat(auto-fit, [dog] 200px [cat] 1fr); grid-template-rows: repeat(4, 
 [even-start even-end] 80px [odd-start odd-end] 80px);
  136. grid-template-rows: repeat(4, 
 [even-start even-end] 80px [odd-start odd-end] 80px); grid-template-rows:

    repeat(4, unquote("[even-start even-end] 80px [odd-start odd-end] 80px"));
  137. Areas

  138. Grid Container

  139. Grid Items

  140. Grid Area Grid Line Grid Track Grid Track Grid Cell

    Grid Line Grid Line Grid Line Grid Line header
  141. www.layout.land