Front Trends 2013 - The New CSS Layout

Transcript

1. Front Trends, April 2013 Rachel Andrew @rachelandrew The New CSS

   Layout Friday, 26 April 13

2. W3C Candidate Recommendation, 12th April 2011 http://www.w3.org/TR/css3-multicol/ Multi-column Layout Friday,

   26 April 13

3. http://www.flickr.com/photos/62693815@N03/6277209256/ Friday, 26 April 13

4. 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 Friday, 26 April 13

5. 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 Friday, 26 April 13

6. 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 Friday, 26 April 13

7. 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 Friday, 26 April 13

8. 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 Friday, 26 April 13

9. The column-span property makes an element span columns. .col-wrapper h1

   { column-span: all; padding: 0 0 .5em 0; } Multi-col Friday, 26 April 13

10. http://caniuse.com/#feat=multicolumn Friday, 26 April 13

11. Perch UI Friday, 26 April 13

12. Images are constrained by the columns. img { max-width: 100%;

    } Multi-col Friday, 26 April 13

13. If a browser does not support multiple- column layout it

    will display the content in a single column. Multi-col Friday, 26 April 13

14. 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 Friday, 26 April 13

15. W3C Candidate Recommendation, 18th September 2012 http://www.w3.org/TR/css3-flexbox/ Flexible Box Layout

    Module Friday, 26 April 13

16. http://www.flickr.com/photos/megangoodchild/4603320792 Friday, 26 April 13

17. 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 Friday, 26 April 13

18. 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 Friday, 26 April 13

19. 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 Friday, 26 April 13

20. The default value of flex-direction is row. nav ul{ display:

    flex; flex-direction: row; justify-content: space-between; align-items: stretch; } Flexbox Friday, 26 April 13

21. 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 Friday, 26 April 13

22. Creating equal height boxes using flexbox. <div class="boxes"> <div class="box">

    ... </div> <div class="box"> ... </div> <div class="box"> ... </div> </div> Flexbox Friday, 26 April 13

23. 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 Friday, 26 April 13

24. 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 Friday, 26 April 13

25. 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 Friday, 26 April 13

26. 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 Friday, 26 April 13

27. http://css-tricks.com/old-flexbox-and-new-flexbox/ Friday, 26 April 13

28. http://caniuse.com/#feat=flexbox Friday, 26 April 13

29. 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 Friday, 26 April 13

30. W3C Working Draft, 4th April 2013 http://www.w3.org/TR/css3-grid-layout/ CSS Grid Layout

    Friday, 26 April 13

31. http://www.flickr.com/photos/adactio/1799953270 Friday, 26 April 13

32. Define a grid using the new grid and inline-grid values

    of the display property. .wrapper { display: grid; } Grid Layout Friday, 26 April 13

33. 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 Friday, 26 April 13

34. 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 Friday, 26 April 13

35. 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 Friday, 26 April 13

36. 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 Friday, 26 April 13

37. 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 Friday, 26 April 13

38. 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 Friday, 26 April 13

39. 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 Friday, 26 April 13

40. 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 Friday, 26 April 13

41. 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 Friday, 26 April 13

42. 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 Friday, 26 April 13

43. 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; } .quote { -ms-grid-column: 5; -ms-grid-row: 2; } Grid Layout Friday, 26 April 13

44. The IE10 implementation specifies the row and column, rather than

    the lines around. .content { grid-start: 3; grid-end: 4; grid-before: 2; grid-after: 3; } Grid Layout .content { -ms-grid-column: 3; -ms-grid-row: 2; } Friday, 26 April 13

45. http://codepen.io/rachelandrew/pen/sFhmx Friday, 26 April 13

46. http://caniuse.com/#feat=css-grid Friday, 26 April 13

47. http://www.w3.org/TR/css3-grid-layout/ Friday, 26 April 13

48. 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/ CSS Grid Layout Overhaul, comments needed! - http://www.css3.info/ css-grid-layout-overhaul-comments-needed/ Grid Resources Friday, 26 April 13

49. W3C Working Draft, 23rd August 2012 http://www.w3.org/TR/css3-regions/ CSS Regions Friday,

    26 April 13

50. http://html.adobe.com/webplatform/layout/regions/ Friday, 26 April 13

51. 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 Friday, 26 April 13

52. The CSS property flow-into has a value of the name

    you choose for this content. .main { flow-into: article-thread; } Regions Friday, 26 April 13

53. The property flow- from sets where this content thread should

    flow from. .article-regions { flow-from: article-thread; } Regions Friday, 26 April 13

54. 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 Friday, 26 April 13

55. 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 Friday, 26 April 13

56. 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 Friday, 26 April 13

57. 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 Friday, 26 April 13

58. http://adobe.github.io/web-platform/utilities/css-regions-support-matrix/ Friday, 26 April 13

59. 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 Friday, 26 April 13

60. W3C Working Draft, 3rd May 2012 http://www.w3.org/TR/css3-exclusions/ CSS Exclusions and

    Shapes Friday, 26 April 13

61. http://html.adobe.com/webplatform/layout/exclusions/ Friday, 26 April 13

62. <div class="wrapper"> <article class="main"> ... </article> <div class="exclusion"><img src="img/cabbage1.jpg" alt="A

    cabbage" /></div> </div> Exclusions Friday, 26 April 13

63. Positioning the exclusion can be done with any positioning method.

    .exclusion { height: 160px; width: 200px; padding: 10px; position: absolute; top: 120px; left: 120px; } Exclusions Friday, 26 April 13

64. 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 Friday, 26 April 13

65. http://adobe.github.io/web-platform/samples/css-exclusions/nevermore/index.html Friday, 26 April 13

66. http://adobe.github.io/web-platform/utilities/css-exclusions-support-matrix/ Friday, 26 April 13

67. 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 Friday, 26 April 13

68. http://rachelandrew.co.uk/presentations/new-css-layout @rachelandrew rachelandrew.co.uk edgeofmyseat.com grabaperch.com Thank you! Friday, 26 April

    13