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

CSS Layout and Responsive Design

CSS Layout and Responsive Design

For a workshop for the editorial team at Groupon.

6389097e6acf134606d06217a3c41e47?s=128

Mike Aparicio

July 20, 2016
Tweet

More Decks by Mike Aparicio

Other Decks in Technology

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

  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. CSS position Property

  11. position: static • The default value • Content is positioned

    in the normal flow of the page
  12. None
  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
  14. None
  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
  16. None
  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
  18. None
  19. None
  20. None
  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
  22. None
  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
  25. None
  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
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. The future present of CSS layout

  41. http://caniuse.com/

  42. None
  43. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  44. None
  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

  49. None
  50. None
  51. Responsive Web Design • Fluid Grid • Flexible Media •

    Media Queries • (Viewport Meta Tag)
  52. Fluid Grid

  53. None
  54. Flexible Media

  55. None
  56. None
  57. None
  58. None
  59. Media Queries

  60. None
  61. None
  62. None
  63. None
  64. Media Queries @media (min-width: 600px) {
 .column {
 flex: 1;

    } } Apply styles inside declaration when (condition) is met
  65. None
  66. None
  67. None
  68. Viewport Meta Tag

  69. None
  70. None
  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