CSS Shapes: upgrade your page layouts - FEL

Grids are great, but we can do better. Progressively enhance your layout and break out of the grid.

Here's a link to the PDF with speaker notes: http://symphonicknot.com/css-typography/images/css-shapes-with-notes.pdf.

Transcript

1. CSS Shapes: upgrade your page layouts Progressively enhance your layout @knotnicky and break out of your grids! Grids are great, but we can do more…
2. CSS Shapes: upgrade your page layouts Progressively enhance your layout @knotnicky and break out of your grids! Grids are great, but we can do more…
3. Why are grids so great, anyway?
4. http://www.graphics.com/article-old/brief-history-grids 14th century manuscript
5. 16th century Bible http://www.graphics.com/article-old/brief-history-grids
6. Josef Müller-Brockmann’s Grid Systems in Graphic Design http://www.graphics.com/article-old/brief-history-grids
7. Massimo Vignelli’s Unigrid https://www.flickr.com/photos/20745656@N00/3022709268/
8. https://twitter.com/jongold/status/694591217523363840
9. https://twitter.com/jongold/status/694591217523363840
10. http://www.novolume.co.uk/blog/all-websites-look-the-same/
11. http://www.novolume.co.uk/blog/all-websites-look-the-same/
12. “There’s a way in which we can use graphic design unlike we’ve ever seen on the web before —the power of the entire 20th century brought to the web” - Jen Simmons http://alistapart.com/event/web-typography-layout-past-present-future
13. “There’s a way in which we can use graphic design unlike we’ve ever seen on the web before —the power of the entire 20th century brought to the web” - Jen Simmons http://alistapart.com/event/web-typography-layout-past-present-future
18. .jpg
19. .js
22. CSS Shapes!
23. shape-outside shape-outside: circle() polygon() url() inset() ellipse() https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes
24. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes shape-outside shape-outside: circle() polygon() url() inset() ellipse()
25. shape-outside: circle()
26. shape-outside: circle()
27. https://codepen.io/knotnicky/pen/Lerqgz .circle { float: left; width: 120px; height: 120px; background-color: #FD5605; border-radius: 50%; } <div class="circle"></div> <div class=“content”> <h1>We’re Berlin!</h1> ... </div>
28. https://codepen.io/knotnicky/pen/Lerqgz .circle { float: left; width: 120px; height: 120px; background-color: #FD5605; border-radius: 50%; shape-outside: circle(); } <div class="circle"></div> <div class=“content”> <h1>We’re Berlin!</h1> ... </div>
29. With shape-outside support: Without shape-outside support:
30. shape-outside: polygon()
31. https://codepen.io/knotnicky/pen/LerqKe shape-outside: polygon()
32. shape-outside: polygon(0px -40px, //a 0px 180px, //b 220px 180px); //c a b c https://codepen.io/knotnicky/pen/LerqKe shape-outside: polygon()
33. .triangle { border-style: ... border-color: ... } <div class=“triangle"></div> <div class=“content”> <h1>We’re Berlin!</h1> ... </div>
34. .triangle { border-style: ... border-color: ... shape-outside: polygon(...); } <div class=“triangle"></div> <div class=“content”> <h1>We’re Berlin!</h1> ... </div>
35. With shape-outside support: Without shape-outside support:
36. shape-outside: polygon()
37. //polygon(a, b, c, d); shape-outside: polygon(0px 0px, 288px 0px, 466px 240px, 0px 240px); https://codepen.io/knotnicky/pen/VyEwJG shape-outside: polygon() a d b c
38. shape-outside: polygon()
39. //polygon(a, b, ...); shape-outside: polygon(17px 11px, 82px 42px, 133px 6px, 150px 62px, 157px 100px, 208px 125px, 244px 164px, 251px 200px, 247px 260px, 284px 263px, 325px … https://codepen.io/knotnicky/pen/xpQygm shape-outside: polygon()
41. https://vimeo.com/250359252
43. shape-outside: url()
44. shape-outside: url()
45. https://codepen.io/knotnicky/pen/xpJZvb img { shape-outside: url(image.png); shape-image—threshold: 0.5; shape-margin: 16px; } <img src="image.png" /> <p>In an age of…</p>
46. shape-inside: WIP https://drafts.csswg.org/css-shapes-2/ shape-inside
47. http://superhumanclass.blogspot.co.uk/2010/03/idea-old-mazda-lamp-50-100-150-w- by.html
48. Things to remember
49. Firefox Nightly has the CSS Shapes editor in dev tools, coming to Firefox soon
50. https://twitter.com/jensimmons/status/565551927879270400
51. https://stuffandnonsense.co.uk/help
53. what will you make? share your shapes
54. Thanks • twitter.com/knotnicky - share your shapes! • More ideas: http://labs.jensimmons.com/ • Firefox nightly tools: https://vimeo.com/250359252 • Icons by nounproject, AlfredoCreates.com