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

The New CSS Layout

The New CSS Layout

Presentation given at Digital Pond event in London, 18th April 2013

Rachel Andrew

April 18, 2013
Tweet

More Decks by Rachel Andrew

Other Decks in Technology

Transcript

  1. We specify our columns on the container element. .col-wrapper {

    background-color: rgb(234,237,228); color: rgb(68,68,68); padding: 20px; border-radius: 5px; } Multi-col Thursday, 18 April 13
  2. Specifying the width and allowing the browser to calculate number

    of columns. .col-wrapper { background-color: rgb(234,237,228); color: rgb(68,68,68); padding: 20px; border-radius: 5px; column-width: 220px; } Multi-col Thursday, 18 April 13
  3. Specifying the number of columns means the browser calculates the

    width. .col-wrapper { background-color: rgb(234,237,228); color: rgb(68,68,68); padding: 20px; border-radius: 5px; column-count: 4; } Multi-col Thursday, 18 April 13
  4. The column-gap property controls the width of the gutters between

    our columns. .col-wrapper { background-color: rgb(234,237,228); color: rgb(68,68,68); padding: 20px; border-radius: 5px; column-width: 220px; column-gap: 1.5em; } Multi-col Thursday, 18 April 13
  5. The column-rule property sets a rule between columns. It takes

    no space of it’s own and overlays the column-gap. .col-wrapper { background-color: rgb(234,237,228); color: rgb(68,68,68); padding: 20px; border-radius: 5px; column-width: 220px; column-gap: 2em; column-rule: 2px dotted rgb(170,179,171); } Multi-col Thursday, 18 April 13
  6. The column-span property makes an element span columns. .col-wrapper h1

    { column-span: all; padding: 0 0 .5em 0; } Multi-col Thursday, 18 April 13
  7. If a browser does not support multiple- column layout it

    will display the content in a single column. Multi-col Thursday, 18 April 13
  8. Using CSS multi-column layouts - https://developer.mozilla.org/en-US/ docs/CSS/Using_CSS_multi-column_layouts CSS3 Multi-column layout

    - http://dev.opera.com/articles/view/css3- multi-column-layout/ Detailed browser information - http://www.quirksmode.org/css/ columns/ Multi-col Resources Thursday, 18 April 13
  9. Navigation marked up as a list. I want to space

    these items evenly. <ul> <li><a href="">What a Cabbage Is</a></li> <li><a href="">Selecting the Soil</a></li> <li class="cur"><a href="">Preparing the Soil</a></li> <li><a href="">The Manure</a></li> </ul> Flexbox Thursday, 18 April 13
  10. A value of flex for the display elements means we

    are using flexbox. nav ul{ display: flex; flex-direction: row; justify-content: space-around; align-items: stretch; } Flexbox Thursday, 18 April 13
  11. Setting justify- content to space- between means that items justify

    against the left and right sides of the box. nav ul{ display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; } Flexbox Thursday, 18 April 13
  12. The default value of flex-direction is row. nav ul{ display:

    flex; flex-direction: row; justify-content: space-between; align-items: stretch; } Flexbox Thursday, 18 April 13
  13. Set flex-direction to row-reverse and the order the items display

    in reverses. nav ul{ display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: stretch; } Flexbox Thursday, 18 April 13
  14. Creating equal height boxes using flexbox. <div class="boxes"> <div class="box">

    ... </div> <div class="box"> ... </div> <div class="box"> ... </div> </div> Flexbox Thursday, 18 April 13
  15. With align-items given a value of stretch the items will

    take the height of the tallest. .boxes { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: space-between; } Flexbox Thursday, 18 April 13
  16. With align-items given a value of center. .boxes { display:

    flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; } Flexbox Thursday, 18 April 13
  17. With align-items given a value of flex- end. .boxes {

    display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; } Flexbox Thursday, 18 April 13
  18. The order property means we can order our flex items

    independently of source order. .boxes .box:nth-child(1) { order:3; } .boxes .box:nth-child(2) { order:1; } .boxes .box:nth-child(3) { order:2; } Flexbox Thursday, 18 April 13
  19. Using CSS Flexible Boxes - https://developer.mozilla.org/en-US/docs/ CSS/Tutorials/Using_CSS_flexible_boxes Advanced Cross Browser

    Flexbox - http://dev.opera.com/articles/view/ advanced-cross-browser-flexbox/ Working with Flexbox - http://www.adobe.com/devnet/html5/articles/ working-with-flexbox-the-new-spec.html Flexbox Resources Thursday, 18 April 13
  20. Define a grid using the new grid and inline-grid values

    of the display property. .wrapper { display: grid; } Grid Layout Thursday, 18 April 13
  21. The grid-definition- columns property defines the grid columns; grid- definition-rows

    the grid rows. .wrapper { display: grid; grid-definition-columns: 200px 20px auto 20px 200px; grid-definition-rows: auto 1fr; } Grid Layout Thursday, 18 April 13
  22. I have declared a grid on the wrapper so the

    children need to be positioned. <div class=”wrapper”> <h1 class="title"></h1> <article class=”content”></div> <nav class=”mainnav”></nav> <blockquote class=”quote”></blockquote> </div> Grid Layout Thursday, 18 April 13
  23. grid-start and grid- end set the column position; grid-before and

    grid-after the row. .content { grid-start: 3; grid-end: 4; grid-before: 2; grid-after: 3; } Grid Layout Thursday, 18 April 13
  24. Columns used as gutters still count as a column, when

    positioning items. .mainnav { grid-start: 1; grid-end:2; grid-before: 2; grid-after: 3; } .title { grid-start: 3; grid-end: 4; grid-before: 1; grid-after: 2; } .quote { grid-start: 5; grid-end:6; grid-before: 2; grid-after: 3; } Grid Layout Thursday, 18 April 13
  25. When we place an item we declare the grid lines

    that contain it. .content { grid-start: 3; grid-end: 4; grid-before: 2; grid-after: 3; } Grid Layout Thursday, 18 April 13
  26. Defining a grid in the IE10 implementation. .wrapper { display:

    -ms-grid; -ms-grid-columns: 200px 20px auto 20px 200px; -ms-grid-rows: auto 1fr; } Grid Layout Thursday, 18 April 13
  27. The grid-column and grid-row properties are used differently in the

    new Working Draft. This is how to position grid items in IE10. .mainnav { -ms-grid-column: 1; -ms-grid-row: 2; } .title { -ms-grid-row: 1; -ms-grid-column:3; } .content { -ms-grid-column: 3; -ms-grid-row: 2; -ms-grid-row-span: 1; } .quote { -ms-grid-column: 5; -ms-grid-row: 2; } Grid Layout Thursday, 18 April 13
  28. Giving Content Priority with CSS Grid Layout - http://24ways.org/2012/ css3-grid-layout/

    My Grid examples on CodePen - http://codepen.io/rachelandrew/tag/ 24%20ways CSS Grid Layout - what has changed? - http://www.rachelandrew.co.uk/ archives/2013/04/10/css-grid-layout---what-has-changed/ Using CSS Grid Layout to build a game - http://www.sitepoint.com/ using-css-grid-layout-and-blend-5-to-build-a-game/ Grid Resources Thursday, 18 April 13
  29. My content is inside the article element. <div class="wrapper"> <article

    class="main"> ... </div> <div class="region1 article-regions"></div> <div class="regionwrapper"> <div class="region2 article-regions"></div> <div class="region3 article-regions"></div> <div class="region4 article-regions"></div> </div> <div class="region5 article-regions"></div> </div> Regions Thursday, 18 April 13
  30. The CSS property flow-into has a value of the name

    you choose for this content. .main { flow-into: article-thread; } Regions Thursday, 18 April 13
  31. The property flow- from sets where this content thread should

    flow from. .article-regions { flow-from: article-thread; } Regions Thursday, 18 April 13
  32. Once the content reaches a height of 6em it will

    have to flow into the next region. .region1 { height: 6em; margin: 0 0 1em 0; } Regions Thursday, 18 April 13
  33. The positioning of the regions can use any CSS layout

    method you like. .regionwrapper { display: flex; flex-direction: row; } .region2 { flex: 1; padding: 0.8em; height: 10em; border-right: 1px dotted #ccc; } .region3 { flex: 1; padding: 0.8em; height: 10em; border-right: 1px dotted #ccc; background-color: rgb(255,255,255); } .region4 { flex: 1; padding: 0.8em; height: 10em; } Regions Thursday, 18 April 13
  34. A height of auto on a region means it will

    expand to take whatever content is there. A fixed height means once that height is reached the content moves onto the next region. .region5 { padding: 1em 0 0 0; margin: 1em 0 0 0; border-top: 1px dotted #ccc; height: auto; } Regions Thursday, 18 April 13
  35. Regions do not have to be adjacent. <div class="regionwrapper"> <div

    class="region2 article-regions"></div> <div class="region3"><img src="img/cabbage1.jpg" alt="a cabbage" /></div> <div class="region4 article-regions"></div> </div> Regions Thursday, 18 April 13
  36. Using CSS Regions to flow content through a layout -

    http:// docs.webplatform.org/wiki/css/tutorials/css-regions Say hello to CSS Regions Polyfill - http://corlan.org/2013/02/08/say- hello-to-css-regions-polyfill/ CSS Regions examples on CodePen from Adobe - http://codepen.io/ collection/jabto Regions Resources Thursday, 18 April 13
  37. Positioning the exclusion can be done with any positioning method.

    .exclusion { height: 160px; width: 200px; padding: 10px; position: absolute; top: 120px; left: 120px; } Exclusions Thursday, 18 April 13
  38. The wrap-flow property makes the text flow round the exclusion.

    .exclusion { height: 160px; width: 200px; padding: 10px; position: absolute; top: 120px; left: 120px; wrap-flow:both; } Exclusions Thursday, 18 April 13
  39. Experimenting with CSS Exclusions - http:// blog.digitalbackcountry.com/2012/03/experimenting-with-css-exclusions/ Exclusions and Shapes

    examples on CodePen from Adobe - http:// codepen.io/collection/qFesk Exclusions Resources Thursday, 18 April 13