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

The New CSS Layout - ConFoo 2014

Rachel Andrew
February 26, 2014

The New CSS Layout - ConFoo 2014

Updated once again - things change rapidly in this area! My slides as presented at ConFoo in Montreal, Canada.

Rachel Andrew

February 26, 2014
Tweet

More Decks by Rachel Andrew

Other Decks in Technology

Transcript

  1. ConFoo, February 2014
    Rachel Andrew
    @rachelandrew
    The New CSS
    Layout
    Wednesday, 26 February 14

    View Slide

  2. We need designed for purpose layout tools!
    Floats, positioning, display: table,
    display: inline-block
    CSS for Layout
    Wednesday, 26 February 14

    View Slide

  3. Our existing layout methods make
    creating complex in-browser application
    layouts difficult
    Layout for
    applications
    Wednesday, 26 February 14

    View Slide

  4. W3C Candidate Recommendation, 12th April 2011
    http://www.w3.org/TR/css3-multicol/
    Multi-column
    Layout
    Wednesday, 26 February 14

    View Slide

  5. http://www.flickr.com/photos/[email protected]/6277209256/
    Wednesday, 26 February 14

    View Slide

  6. 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
    Wednesday, 26 February 14

    View Slide

  7. 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
    Wednesday, 26 February 14

    View Slide

  8. 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
    Wednesday, 26 February 14

    View Slide

  9. 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
    Wednesday, 26 February 14

    View Slide

  10. 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
    Wednesday, 26 February 14

    View Slide

  11. The column-span
    property makes an
    element span
    columns.
    .col-wrapper h1 {
    column-span: all;
    padding: 0 0 .5em 0;
    }
    Multi-col
    Wednesday, 26 February 14

    View Slide

  12. Wednesday, 26 February 14

    View Slide

  13. Perch UI
    Wednesday, 26 February 14

    View Slide

  14. Images are
    constrained by the
    columns.
    img {
    max-width: 100%;
    }
    Multi-col
    Wednesday, 26 February 14

    View Slide

  15. If a browser does not
    support multiple-
    column layout it will
    display the content
    in a single column.
    Multi-col
    Wednesday, 26 February 14

    View Slide

  16. 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
    Wednesday, 26 February 14

    View Slide

  17. W3C Candidate Recommendation, 18th September 2012
    http://www.w3.org/TR/css3-flexbox/
    Flexible Box
    Layout Module
    Wednesday, 26 February 14

    View Slide

  18. http://www.flickr.com/photos/megangoodchild/4603320792
    Wednesday, 26 February 14

    View Slide

  19. Navigation marked
    up as a list. I want to
    space these items
    evenly.

    What a Cabbage Is
    Selecting the Soil
    Preparing the Soil
    The Manure

    Flexbox
    Wednesday, 26 February 14

    View Slide

  20. 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
    Wednesday, 26 February 14

    View Slide

  21. 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
    Wednesday, 26 February 14

    View Slide

  22. The default value of
    flex-direction is row.
    nav ul{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    }
    Flexbox
    Wednesday, 26 February 14

    View Slide

  23. 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
    Wednesday, 26 February 14

    View Slide

  24. Creating equal
    height boxes using
    flexbox.

    ...
    ...
    ...

    Flexbox
    Wednesday, 26 February 14

    View Slide

  25. 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
    Wednesday, 26 February 14

    View Slide

  26. 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
    Wednesday, 26 February 14

    View Slide

  27. 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
    Wednesday, 26 February 14

    View Slide

  28. 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
    Wednesday, 26 February 14

    View Slide

  29. http://css-tricks.com/old-flexbox-and-new-flexbox/
    Wednesday, 26 February 14

    View Slide

  30. Wednesday, 26 February 14

    View Slide

  31. you CAN use these techniques even where there is limited browser support
    Use new CSS sparingly, as an
    enhancement for small UI elements -
    rather than thinking in terms of full layouts.
    Wednesday, 26 February 14

    View Slide

  32. http://philipwalton.github.io/solved-by-flexbox/
    Wednesday, 26 February 14

    View Slide

  33. 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
    Solved by Flexbox - http://philipwalton.github.io/solved-by-flexbox/
    Flexbox Playground - http://the-echoplex.net/flexyboxes/
    Flexbox Resources
    Wednesday, 26 February 14

    View Slide

  34. W3C Working Draft, 23rd January 2014
    http://www.w3.org/TR/css3-grid-layout/
    CSS
    Grid Layout
    Wednesday, 26 February 14

    View Slide

  35. http://www.flickr.com/photos/adactio/1799953270
    Wednesday, 26 February 14

    View Slide

  36. 7th April 2011
    First public draft
    History of CSS
    Grid Layout
    Wednesday, 26 February 14

    View Slide

  37. http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/
    Wednesday, 26 February 14

    View Slide

  38. 23 January 2014
    Current Working Draft
    CSS Grid Layout
    Wednesday, 26 February 14

    View Slide

  39. Define a grid using
    the new grid and
    inline-grid values of
    the display property.
    .wrapper {
    display: grid;
    }
    Grid Layout
    Wednesday, 26 February 14

    View Slide

  40. The grid-template-
    columns property
    defines the grid
    columns; grid-
    template-rows the
    grid rows.
    .wrapper {
    display: grid;
    grid-template-columns: 200px 20px auto 20px 200px;
    grid-template-rows: auto 1fr;
    }
    Grid Layout
    Wednesday, 26 February 14

    View Slide

  41. I have declared a
    grid on the wrapper
    so the children need
    to be positioned.






    Grid Layout
    Wednesday, 26 February 14

    View Slide

  42. grid-column-start
    and grid-column-end
    set the column
    position; grid-row-
    start and grid-row-
    end the row.
    .content {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    }
    Grid Layout
    Wednesday, 26 February 14

    View Slide

  43. Columns used as
    gutters still count as
    a column, when
    positioning items.
    .mainnav {
    grid-column-start: 1; grid-column-end:2;
    grid-row-start: 2; grid-row-end: 3;
    }
    .title {
    grid-column-start: 3; grid-column-end: 4;
    grid-row-start: 1; grid-row-end: 2;
    }
    .quote {
    grid-column-start: 5; grid-column-end:6;
    grid-row-start: 2; grid-row-end: 3;
    }
    Grid Layout
    Wednesday, 26 February 14

    View Slide

  44. When we place an
    item we declare the
    grid lines that
    contain it.
    .content {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    }
    Grid Layout
    Wednesday, 26 February 14

    View Slide

  45. When we place an
    item we declare the
    grid lines that
    contain it.
    .content {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    }
    Grid Layout
    Wednesday, 26 February 14

    View Slide

  46. When we place an
    item we declare the
    grid lines that
    contain it.
    .content {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    }
    Grid Layout
    Wednesday, 26 February 14

    View Slide

  47. When we place an
    item we declare the
    grid lines that
    contain it.
    .content {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    }
    Grid Layout
    Wednesday, 26 February 14

    View Slide

  48. When we place an
    item we declare the
    grid lines that
    contain it.
    .content {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    }
    Grid Layout
    Wednesday, 26 February 14

    View Slide

  49. We can also declare
    named grid lines.
    .wrapper {
    display: grid;
    grid-template-columns: (nav) 200px
    (gutter) 20px
    (main) auto
    (gutter) 20px
    (sidebar) 200px;
    grid-template-rows: (header) auto (content) 1fr (content-
    end);
    }
    Grid Layout
    Wednesday, 26 February 14

    View Slide

  50. You then use the
    name rather than the
    number to place the
    content.
    .content {
    grid-column-start: main;
    grid-column-end: span 1;
    grid-row-start: content;
    grid-row-end: span 1;
    }
    Grid Layout
    Wednesday, 26 February 14

    View Slide

  51. It will also be
    possible to declare
    grid template areas
    .wrapper {
    display: grid;
    grid-template-columns: 200px 20px auto 20px 200px;
    grid-template-rows: auto 1fr;
    grid-template-areas: "header header header header
    header"
    "nav . content . sidebar"
    }
    Grid Layout
    Wednesday, 26 February 14

    View Slide

  52. With a template
    defined you can
    more simply target
    areas of the
    template.
    .content {
    grid-area: content;
    }
    Grid Layout
    Wednesday, 26 February 14

    View Slide

  53. New proposals
    CSS Grid Layout
    Wednesday, 26 February 14

    View Slide

  54. http://lists.w3.org/Archives/Public/www-style/2013May/0077.html
    Wednesday, 26 February 14

    View Slide

  55. Based on the earlier Draft
    IE10 Implementation
    CSS Grid Layout
    Wednesday, 26 February 14

    View Slide

  56. 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
    Wednesday, 26 February 14

    View Slide

  57. 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
    Wednesday, 26 February 14

    View Slide

  58. The IE10
    implementation
    specifies the row and
    column, rather than
    the lines around.
    .content {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    }
    Grid Layout
    Wednesday, 26 February 14

    View Slide

  59. The IE10
    implementation
    specifies the row and
    column, rather than
    the lines around.
    Grid Layout .content {
    -ms-grid-column: 3;
    -ms-grid-row: 2;
    }
    Wednesday, 26 February 14

    View Slide

  60. http://codepen.io/rachelandrew/pen/sFhmx
    Wednesday, 26 February 14

    View Slide

  61. Wednesday, 26 February 14

    View Slide

  62. http://lists.w3.org/Archives/Public/www-style/2013May/0114.html
    Flexbox is for one-dimensional layouts
    Grid is for two-dimensional layouts
    Grid or Flexbox?
    Wednesday, 26 February 14

    View Slide

  63. http://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/
    Flexbox performs poorly when used to
    layout full pages.
    Grid or Flexbox
    Wednesday, 26 February 14

    View Slide

  64. 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/
    Named Lines and Grid areas - http://www.rachelandrew.co.uk/archives/
    2013/04/29/css-grid-layout-named-grid-lines-and-areas/
    My Grid Resources
    Wednesday, 26 February 14

    View Slide

  65. Test Drive Grid (IE10 implementation) - http://ie.microsoft.com/
    testdrive/graphics/hands-on-css3/hands-on_grid.htm
    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/
    IE10 implementation Polyfill - https://github.com/codler/Grid-Layout-
    Polyfill
    More resources
    Wednesday, 26 February 14

    View Slide

  66. http://html.adobe.com/webplatform/enable/
    Wednesday, 26 February 14

    View Slide

  67. W3C Working Draft, 18th February 2014
    http://www.w3.org/TR/css3-regions/
    CSS Regions
    Wednesday, 26 February 14

    View Slide

  68. http://html.adobe.com/webplatform/layout/regions/
    Wednesday, 26 February 14

    View Slide

  69. http://blogs.adobe.com/webplatform/2013/09/18/ios-7-safari-new-web-platform-features/
    Wednesday, 26 February 14

    View Slide

  70. My content is inside
    the article element.

    ...








    Regions
    Wednesday, 26 February 14

    View Slide

  71. The CSS property
    flow-into has a value
    of the name you
    choose for this
    content.
    .main {
    flow-into: article-thread;
    }
    Regions
    Wednesday, 26 February 14

    View Slide

  72. The property flow-
    from sets where this
    content thread
    should flow from.
    .article-regions {
    flow-from: article-thread;
    }
    Regions
    Wednesday, 26 February 14

    View Slide

  73. 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
    Wednesday, 26 February 14

    View Slide

  74. 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
    Wednesday, 26 February 14

    View Slide

  75. 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
    Wednesday, 26 February 14

    View Slide

  76. Regions do not have
    to be adjacent.


    alt="a cabbage" />


    Regions
    Wednesday, 26 February 14

    View Slide

  77. Wednesday, 26 February 14

    View Slide

  78. I have created a
    separate HTML
    document to store
    my content.




    Regions content
    href="common.css" />


    ...


    Regions
    Wednesday, 26 February 14

    View Slide

  79. On the page that will
    display the content, I
    have an iframe with
    an ID, and also the
    empty regions into
    which content will
    flow.

    iframe>







    Regions
    Wednesday, 26 February 14

    View Slide

  80. The flow-into
    property on the
    iframe ID causes the
    iframe to disappear.
    #regions-content {
    -ms-flow-into: article-thread;
    }
    Regions
    Wednesday, 26 February 14

    View Slide

  81. We then flow-into
    the regions as
    before.
    .article-regions {
    -ms-flow-from: article-thread;
    }
    Regions
    Wednesday, 26 February 14

    View Slide

  82. Regions can be
    positioned using any
    method - here I am
    using the IE10 Grid
    Layout
    implementation.
    .regionwrapper {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    -ms-grid-rows: 10em 10em auto;
    }
    .region1 {
    margin: 0 0 1em 0;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-column-span: 3;
    }
    Regions
    Wednesday, 26 February 14

    View Slide

  83. Edit the grid
    definition to change
    height of rows to
    adjust content flow.
    .regionwrapper {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    -ms-grid-rows: 10em 6em auto;
    }
    Regions
    Wednesday, 26 February 14

    View Slide

  84. http://alistapart.com/blog/post/css-regions-considered-harmful
    “CSS Regions Considered Harmful”
    January 2014
    Wednesday, 26 February 14

    View Slide

  85. https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/kTktlHPJn4Q/
    YrnfLxeMO7IJ
    CSS Regions to be removed from the Blink
    rendering engine
    January 2014
    Wednesday, 26 February 14

    View Slide

  86. 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
    An Introduction to CSS Regions - http://dev.opera.com/articles/view/an-
    introduction-to-css-regions/
    WebPlatform.org CSS Regions - http://docs.webplatform.org/wiki/
    tutorials/css-regions
    Regions Resources
    Wednesday, 26 February 14

    View Slide

  87. W3C Working Draft, 28th May 2013
    http://www.w3.org/TR/css3-exclusions/
    CSS Exclusions
    Wednesday, 26 February 14

    View Slide

  88. Defines the wrap-flow and wrap-through properties.
    Allow you to wrap text around elements
    that are not floated.
    Exclusions
    Wednesday, 26 February 14

    View Slide



  89. ...

    alt="A cabbage" />

    Exclusions
    Wednesday, 26 February 14

    View Slide

  90. Positioning the
    exclusion can be
    done with any
    positioning method.
    .exclusion {
    height: 160px;
    width: 200px;
    padding: 10px;
    position: absolute;
    top: 120px;
    left: 120px;
    }
    Exclusions
    Wednesday, 26 February 14

    View Slide

  91. 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
    Wednesday, 26 February 14

    View Slide

  92. http://adobe.github.io/web-platform/utilities/css-exclusions-support-matrix/
    Wednesday, 26 February 14

    View Slide

  93. Wrap-flow and CSS Exclusions - http://advent2012.digitpaint.nl/21/
    Adobe post on separation of the Shapes and Exclusions specs - http://
    blogs.adobe.com/webplatform/2013/06/04/how-to-make-a-chocolate-
    peanut-butter-cup/
    -ms-wrap-flow information on using wrap-flow in IE10 - http://
    msdn.microsoft.com/en-us/library/windows/apps/hh767314.aspx
    The CSS Exclusions Module - Vanseo Design - http://
    www.vanseodesign.com/css/exclusions/
    Exclusions Resources
    Wednesday, 26 February 14

    View Slide

  94. Level 1 Last Call Working Draft, 3rd December 2013
    Level 2 Editor’s Draft, 15th November 2013
    http://www.w3.org/TR/css-shapes/
    CSS Shapes
    Wednesday, 26 February 14

    View Slide

  95. Current level 1 working draft defines shape-outside, and allows shapes only on floats.
    The Level 2 editor’s draft reimplements shape-inside.
    Wrap content around and inside things
    that are not rectangles.
    CSS Shapes
    Wednesday, 26 February 14

    View Slide

  96. http://adobe.github.io/web-platform/samples/css-exclusions/nevermore/index.html
    Wednesday, 26 February 14

    View Slide

  97. Requires elements to be floated.
    shape-outside
    Shapes Level 1
    Wednesday, 26 February 14

    View Slide

  98. The shape-outside
    property allows text
    to be wrapped
    around a shape such
    as a circle.
    .float {
    width: 250px;
    height: 250px;
    float: left;
    shape-outside: circle(50%);
    }
    CSS Shapes
    Wednesday, 26 February 14

    View Slide

  99. http://sarasoueidan.com/blog/css-shapes/
    Wednesday, 26 February 14

    View Slide

  100. Flow text inside a custom shape
    shape-inside
    Shapes Level 2
    Wednesday, 26 February 14

    View Slide

  101. http://betravis.github.io/shape-tools/polygon-drawing/
    Wednesday, 26 February 14

    View Slide

  102. http://betravis.github.io/shape-tools/polygon-drawing/
    Wednesday, 26 February 14

    View Slide

  103. http://sarasoueidan.com/blog/css-shapes/
    Wednesday, 26 February 14

    View Slide

  104. http://blogs.adobe.com/webplatform/2013/10/23/css-shapes-visual-storytelling/
    Wednesday, 26 February 14

    View Slide

  105. Adobe Web Platform: Shapes - http://html.adobe.com/webplatform/
    layout/shapes/
    Experimenting with CSS Exclusions (actually covers Shapes) - http://
    blog.digitalbackcountry.com/2012/03/experimenting-with-css-exclusions/
    Shapes examples on CodePen from Adobe - http://codepen.io/
    collection/qFesk
    CSS Shape Tools - http://betravis.github.io/shape-tools
    Shapes Resources
    Wednesday, 26 February 14

    View Slide

  106. CSS Shapes “Alice in Wonderland” example - http://blogs.adobe.com/
    webplatform/2013/10/23/css-shapes-visual-storytelling/
    Creating Non-Rectangular Layouts with CSS Shapes - http://
    sarasoueidan.com/blog/css-shapes/
    CSS Shapes from Images - http://hansmuller-webkit.blogspot.co.uk/
    2013/11/css-shapes-from-images.html
    Shapes Resources
    Wednesday, 26 February 14

    View Slide

  107. While specs are at an early stage your
    opinion can change things.
    Get involved with
    new specs!
    http://lists.w3.org/Archives/Public/www-style/
    Wednesday, 26 February 14

    View Slide

  108. http://rachelandrew.co.uk/presentations/new-css-layout
    @rachelandrew
    rachelandrew.co.uk
    edgeofmyseat.com
    grabaperch.com
    Thank you!
    Wednesday, 26 February 14

    View Slide