CSS Layout and Responsive Design

For a workshop for the editorial team at Groupon.

Transcript

1. CSS Layout & Responsive Design Mike Aparicio User Interface Engineer maparicio@groupon.com
2. Part I • Learn CSS layout methods • Apply CSS layout to personal site Part II • Learn Responsive Web Design basics • Apply RWD principles to personal site
3. http://info.cern.ch/hypertext/WWW/TheProject.html
10. CSS position Property
11. position: static • The default value • Content is positioned in the normal flow of the page
13. position: relative • Content is positioned relative to its normal position • Can adjust position using top, right, bottom, left properties (px, em, rem, %) • Surrounding content does not adjust based on positioning of relative elements • Also used to set position context for absolutely positioned child elements
15. position: fixed • Content is positioned relative to the viewport • Stays in the same place even as the viewport is scrolled • Can adjust position using top, right, bottom, left properties • Does not leave a gap where it would have normally been located on the page (“Removed from the flow”) • Set sufficient margin/padding on content to accommodate fixed elements
17. position: absolute • Content is positioned relative to nearest positioned (not static) ancestor • If no positioned ancestors exist, uses the body element • Scrolls with surrounding content • Can adjust position using top, right, bottom, left properties • Does not leave a gap where it would have normally been located on the page
21. z-index • Positioned elements can overlap • Applying z-index specifies stacking order of elements • Can use positive or negative numbers • Without z-index, element last in HTML markup will be on top
23. Centering with margin: auto
24. margin: auto • Block elements will expand to the width of their parent • Applying a width will prevent this (px/em/rem/%) • Setting left and right margins to auto will center horizontally • Using max-width instead of width will make the box flexible up to the max-width value
26. CSS float Property
27. float • Used to wrap text around images • Elements can be floated left or right • Elements after a floated element will flow around it
40. The future present of CSS layout
41. http://caniuse.com/
43. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
45. https://css-tricks.com/snippets/css/complete-guide-grid/
46. Personal Website
47. Layout Cheatsheet Position Properties position: static|absolute*|fixed|relative; top|right|bottom|left: [value in px/ems/rems/%]; z-index: X; * relative to closest positioned ancestor Centering with margin: auto margin: X auto; X = top/bottom margin Float Property float: none|left|right; clear: left; /* clears proceeding element */ overflow: hidden; /* self-clears parent of floated elements */
48. Responsive Web Design
51. Responsive Web Design • Fluid Grid • Flexible Media • Media Queries • (Viewport Meta Tag)
52. Fluid Grid
54. Flexible Media
59. Media Queries
64. Media Queries @media (min-width: 600px) {
 .column {
 flex: 1; } } Apply styles inside declaration when (condition) is met
68. Viewport Meta Tag
71. Personal Website
72. Responsive Cheatsheet Viewport Meta Tag <meta name="viewport" content=“width=device-width,initial-scale=1"> (In Codepen - Settings -> “Insert the most common viewport meta tag”) Flexible Media img { max-width: 100%; } .video { position: relative; padding-bottom: 56.25%; height: 0; } iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } Responsive Grid http://www.responsivegridsystem.com/ Media Queries @media (condition) {
 /* styles to apply when condition is true */ } (max-width, min-width, etc.)
73. Resources • Thinking with Type - Grid (http://www.thinkingwithtype.com/ contents/grid/) • Learn Layout (http://learnlayout.com/) • Responsive Grid System (http://www.responsivegridsystem.com/) • Can I Use? (http://caniuse.com/) • CSS-Tricks (https://css-tricks.com/) • A Book Apart (https://abookapart.com/)
74. Questions? Mike Aparicio maparicio@groupon.com