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
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!