$30 off During Our Annual Pro Sale. View Details »

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.

Yiannis Konstantakopoulos

October 24, 2018
Tweet

More Decks by Yiannis Konstantakopoulos

Other Decks in Design

Transcript

  1. Grids, typography and
    all that jazz
    Yiannis Konstantakopoulos, porcupine.gr
    LEARNING FRIDAY @VENTURE GEEKS

    View Slide

  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

    View Slide

  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

    View Slide

  4. What is a grid in web design?

    View Slide

  5. What is a grid in web design?

    View Slide

  6. What is a grid in web design?

    View Slide

  7. What is a grid in web design?

    View Slide

  8. How to create a grid?

    View Slide

  9. What is a grid in web design?

    View Slide

  10. How to create a grid?

    View Slide

  11. How to create a grid?

    View Slide

  12. How to create a grid?

    View Slide

  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

    View Slide

  14. The 8-Point Grid System
    The 8-Point Grid System

    View Slide

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

    View Slide

  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

    View Slide

  17. The 8-Point Grid
    The 8-Point Grid
    Every UI element you create
    should be aligned to the pixel grid.

    View Slide

  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.

    View Slide

  19. The 8-Point Grid
    The 8-Point Grid

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  23. CSS Box Model

    View Slide

  24. CSS Box Model

    View Slide

  25. CSS Box Model

    View Slide

  26. typography.css
    html {
    font-size: 62.5%; /* 16px * .625 = 10px */
    }
    h1 {
    font-size: 3.6rem; /* 36px */
    }

    View Slide

  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 */
    }

    View Slide

  28. Why not px?
    Enter: responsive typography

    View Slide

  29. Responsive typography
    Responsive Typography: The Basics

    View Slide

  30. Responsive typography
    Responsive Typography: The Basics

    View Slide

  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

    View Slide

  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

    View Slide

  33. Modular Scale
    “A modular scale, like a musical scale, is a
    prearranged set of harmonious proportions.”
    More Meaningful Typography

    View Slide

  34. Modular Scale

    View Slide

  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

    View Slide

  36. Vertical Rhythm

    View Slide

  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

    View Slide

  38. Vertical Rhythm

    View Slide

  39. Vertical Rhythm
    Baseliner
    Baseliner

    View Slide

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

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

    View Slide