Learning Friday at Geekbot

Learning Friday at Geekbot

My good friends at geekbot.io asked me for some help regarding grids, typography and vertical rhythm. And CSS of course. So here it is.

E01750b85a3f385b1a1b28bed70a4e88?s=128

Yiannis Konstantakopoulos

October 24, 2018
Tweet

Transcript

  1. Grids, typography and all that jazz Yiannis Konstantakopoulos, porcupine.gr LEARNING

    FRIDAY @VENTURE GEEKS
  2. What is a grid in web design? “Grids help you

    to achieve effective alignment and consistency with little effort. “Winging it” and relying on your gut does not scale so well. If executed properly, your designs will appear thoughtful, organized, neat and structurally sound.” A Comprehensive Introduction to Grids in Web Design
  3. What is a grid in web design? “Good alignment, like

    much of design, should almost go unnoticed by your users. Less is more.” A Comprehensive Introduction to Grids in Web Design
  4. What is a grid in web design?

  5. What is a grid in web design?

  6. What is a grid in web design?

  7. What is a grid in web design?

  8. How to create a grid?

  9. What is a grid in web design?

  10. How to create a grid?

  11. How to create a grid?

  12. How to create a grid?

  13. How to create a grid? A lightweight Sass tool set

    A lightweight and flexible Sass grid Scaffold styles, variables and structure for Bourbon projects. Bourbon Neat Bitters
  14. The 8-Point Grid System The 8-Point Grid System

  15. The 8-Point Grid System The 8-Point Grid System

  16. The 8-Point Grid System The 8-Point Grid System Why 8pts?

    • Even number • The majority of popular screen sizes are divisible by 8
  17. The 8-Point Grid The 8-Point Grid Every UI element you

    create should be aligned to the pixel grid.
  18. The 8-Point Grid The 8-Point Grid Use multiples of 8

    to define dimensions, padding, and margin of both block and inline elements.
  19. The 8-Point Grid The 8-Point Grid

  20. The 8-Point Grid The 8-Point Grid

  21. The 8-Point Grid Sketch Workflow — 8 point Soft Grids

  22. The 8-Point Grid Sketch Workflow — 8 point Soft Grids

  23. CSS Box Model

  24. CSS Box Model

  25. CSS Box Model

  26. typography.css html { font-size: 62.5%; /* 16px * .625 =

    10px */ } h1 { font-size: 3.6rem; /* 36px */ }
  27. rem vs. em html { font-size: 62.5%; } ul {

    font-size: 1.8rem /* 18px */; } ul ul { font-size: 1.4rem; /* 14px */ } html { font-size: 62.5%; } ul { font-size: 1.8em /* 18px */; } ul ul { font-size: 1.4em; /* 1.4*18px=25.2px */ }
  28. Why not px? Enter: responsive typography

  29. Responsive typography Responsive Typography: The Basics

  30. Responsive typography Responsive Typography: The Basics

  31. html { font-size: 16px; @media (min-width: 800px) {font-size: 18px;} }

    h1 { font-size: 64px /* 16px*4 */; @media (min-width: 800px) {font-size: 72px;} } h2 { font-size: 48px /* 16px*3 */; @media (min-width: 800px) {font-size: 54px;} } h3 { font-size: 32px /* 16px*2 */; @media (min-width: 800px) {font-size: 36px;} } Responsive typography Modular Scale
  32. html { font-size: 1rem; @media (min-width: 800px) {font-size: 1.125rem;} }

    h1 { font-size: 4rem; @media (min-width: 800px) {font-size: 4rem);} } h2 { font-size: 3rem; @media (min-width: 800px) {font-size: 3rem);} } h3 { font-size: 2rem; @media (min-width: 800px) {font-size: 2rem);} } Responsive typography Modular Scale
  33. Modular Scale “A modular scale, like a musical scale, is

    a prearranged set of harmonious proportions.” More Meaningful Typography
  34. Modular Scale

  35. Modular Scale More Meaningful Typography 10.000 * 1.618 = 16.180

    16.180 * 1.618 = 26.179 26.179 * 1.618 = 42.358 42.358 * etc. 10.000 / 1.618 = 6.180 6.180 / 1.618 = 3.819 3.819 / 1.618 = 2.360 2.360 / etc. 1.618
  36. Vertical Rhythm

  37. Vertical Rhythm html { line-height: 18px; } html { line-height:

    150%; } html { line-height: 1.5rem; } html { line-height: 1.5; } So and so Good Good Great
  38. Vertical Rhythm

  39. Vertical Rhythm Baseliner Baseliner

  40. 8-Point Grid - Can we do it? 5+1 examples. 


    Real HTML & CSS code, real web pages. Action!