Progressing Our Layouts

Transcript

1. Progressing Our Layouts Jen Simmons @jensimmons thewebahead.net

2. Amazing future! The No-layout Layout Table-based Layouts Float-based Layouts The

   Official Timeline of the Evolution of Web Page Layout
3. None

4. (*Tweets in response, with names removed to protect the, well,

   not the innocent, but to protect people from trolling.)

5. Works Doesn’t work

6. Use It Don’t Use It

7. Works Doesn’t work Use It Don’t Use It

8. Works Doesn’t work Use It Don’t Use It

9. Works Doesn’t work Use It Don’t Use It

10. Works Doesn’t work Use It Don’t Use It Fired.

11. Works Doesn’t work Use It Don’t Use It Fired.

12. Works Doesn’t work Use It Don’t Use It Fired. ✔

13. Works Doesn’t work Use It Don’t Use It

14. Works and Doesn’t Work Use It and Don’t Use It

    Don’t Use It

15. Works and Doesn’t Work Use It and Don’t Use It

    Don’t Use It X
16. None

17. drawing by Dave Ellis novolume.co.uk

18. So, ok, how?

19. This Thing About CSS

20. .box { background: #bbb; border: 10px solid black; border-radius: 50px;

    }
21. None
22. None

23. .box { background: #bbb; border: 10px solid black; border-radius: 50px;

    }

24. .box { background: #bbb; border: 10px solid black; border-radius: 50px;

    } .box { background: #bbb; border: 10px solid black; border-radius: 50px; } Opera Mini IE8 IE7 IE6 Firefox Safari Chrome IE9+ Edge (on all operating systems)

25. That Magic Thing Where “Weird Stuff” Gets Ignored

26. CSS Shapes

27. None

28. img { width: 200px; margin: 0 1.5em 0.5em 0; float:

    left; shape-outside: circle(); } There is a prefix: -webkit-shape-outside: circle(); *
29. None

30. img { width: 200px; margin: 0 1.5em 0.5em 0; float:

    left; shape-outside: circle(); } There is a prefix: -webkit-shape-outside: circle(); *

31. img.grapes { max-width: 600px; float: left; margin-left: -26%; shape-outside:polygon( nonzero,

    -69.6% 101.25%, -84.35% 24.5%, 1.65% 4%, 23.3% 14.25%, 40.4% 13.5%, 43% 13.25%, 57.1% 16.5%, 62.7% 27%, 74.5% 32.25%, 78.15% 42.5%, 80.1% 49.25%, 77.15% 58.75%, 92.25% 68.25%, 92.9% 82.25%, 75.5% 92.5%, 51.55% 90.75%, -5.6% 101.25% ); }

32. img.grapes { max-width: 600px; float: left; margin-left: -26%; shape-outside:polygon( nonzero,

    -69.6% 101.25%, -84.35% 24.5%, 1.65% 4%, 23.3% 14.25%, 40.4% 13.5%, 43% 13.25%, 57.1% 16.5%, 62.7% 27%, 74.5% 32.25%, 78.15% 42.5%, 80.1% 49.25%, 77.15% 58.75%, 92.25% 68.25%, 92.9% 82.25%, 75.5% 92.5%, 51.55% 90.75%, -5.6% 101.25% ); }
33. None

34. labs.jensimmons.com @jensimmons

35. Tool #1: CSS Error Handling

36. Viewport Units + Flexbox

37. None
38. None

39. header { display: flex; height: 100vh; } h1 { margin:

    auto; }

40. header { display: flex; height: 100vh; } h1 { margin:

    auto; }

41. header { display: flex; height: 500px; height: 100vh; } h1

    { margin: auto; }

42. header { display: flex; height: 500px; height: 100vh; } h1

    { margin: auto; }
43. None

44. header { display: flex; height: 500px; height: 100vh; } h1

    { margin: auto; }

45. header { display: flex; height: 500px; height: 100vh; } h1

    { margin-top: 2em; margin: auto; }

46. header { display: flex; height: 500px; height: 100vh; } h1

    { padding: 2em 0; margin: auto; }

47. header { display: flex; height: 500px; height: 100vh; } h1

    { padding: 2em 0; margin: auto; }

48. header { display: flex; height: 500px; height: 100vh; } h1

    { padding: 2em 0; margin: auto; } The running code uses prefixes, which I’ll talk about later. *

49. Tool #2: CSS Overrides

50. Initial Letter

51. None

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

    initial-letter: 4; }
53. None
54. None

55. Safari 9 (iOS and Mac OSX)

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

    initial-letter: 4; }

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

    initial-letter: 4; }

58. @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; } }

59. Tool #3: @supports, aka Feature Queries

60. None

61. @supports (initial-letter: 4 ) or (-webkit-initial-letter: 4 ) p {color:red;}

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

62. // Layout overrides for browsers that // don't support Flexbox

    flex-wrap, // namely, Firefox 25 to 28. @supports (not (flex-wrap: wrap)) { .article-list { display: block; } article { flex: none; float: left; width: 48%; } }

63. Tool #3: @supports, aka Feature Queries

64. Prefixes

65. None
66. None
67. None

68. Bonus Tool: Autoprefixer

69. Tool #4: Modernizer

70. modernizer.com

71. None

72. .flexwrap { // // the flexbox layout // // }

    .no-flexwrap { // // the old school layout // // }

73. Tool #5: Conditional Stylesheets

74. Tool #0: Conditional Stylesheets

75. <link rel="stylesheet" type="text/css" href="css/style.css" /> <!--[if IE 7]><link rel="stylesheet" type="text/css"

    media="screen" href="css/ie7.css" />< ![endif]—> <!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css" />< ![endif]-->

76. <!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE

    7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

77. @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // IE10+

    CSS here }

78. Tool #6: Polyfill

79. Grid

80. None
81. None
82. None
83. None
84. None
85. None
86. None

87. ul { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 50vw; grid-auto-flow:

    dense; @media (min-width: 360px) { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 33vw; } @media (min-width: 500px) { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 25vw; } @media (min-width: 700px) { grid-template-columns: repeat(5, 1fr); grid-auto-rows: 20vw; } @media (min-width: 900px) { li { height: 100%; border: 1px solid black; } li.highlight-box { grid-row: span 2; grid-column: span 2; } li.highlight-tall { grid-row: span 2; } li.highlight-wide { grid-column: span 2; } img { display: block; object-fit: cover; height: 100%; }

88. labs.jensimmons.com

89. None

90. 1. Fact CSS ignores code it doesn’t recognize 2. The

    CSS Cascade 3. Feature Queries with @supports { } 4. Modernizer 5. Conditional Stylesheets for IE 6. Polyfills

91. ¿ ? What are we going to do about full-page

    layout?

92. Don’t use Grid 
 until 100% of your audience has

    it

93. Write float-based 
 (inline block / display table) layout &

    deliver that to some browsers, while the rest 
 get Grid layout

94. (You should NOT be jacking up the HTML order for

    layout anyway, so the HMTL for both will be identical.)

95. Deliver a “mobile” / skinny / simplified layout to older

    browsers, and a full-page Grid layout to supporting browsers
96. None
97. None

98. Use a Polyfill for Grid

99. None
100. None
101. None

102. Use a Polyfill for Grid

103. Basic layout, that doesn’t require Grid. Or Media Queries. Or

     Feature Queries. Hand-write your own CSS for this. Drop layout frameworks & learn vanilla CSS.

104. Basic layout, that doesn’t require Grid. Or Media Queries. Or

     Feature Queries. Hand-write your own CSS for this. Drop layout frameworks & learn vanilla CSS. Code that uses Grid to create the layout. Use Feature Queries to hide it from non-supporting browsers.
105. None

106. Thanks! labs.jensimmons.com @jensimmons thewebahead.net