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.

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