Grids Everywhere

Transcript

1. GRIDS EVERYWHERE
2. Ivan Banov BankFacil
3. So, what’s a grid? Any group of line that were drawn to guide a design http://waltermattos.com/artigos/grids-no-design-grafico-o-que-voce-precisa-saber-antes-de-comecar-a-usar/
4. So, what’s a grid? Any group of line that were drawn to guide a design http://waltermattos.com/artigos/grids-no-design-grafico-o-que-voce-precisa-saber-antes-de-comecar-a-usar/
5. So, what’s a grid? Any group of line that were drawn to guide a design
6. So, what’s a grid? Any group of line that were drawn to guide a design
7. So, what’s a grid? Any group of line that were drawn to guide a design
8. GRID FROM THE BEGINNING
9. Looking back The design grew up to the grids
10. Looking back Bauhaus, the first design’s school of the world just consolidated the history
11. Grid anatomy No matter how simple or complex, grids share some common parts, the anatomy many times will get similar “blocks” http://vanseodesign.com/web-design/grid-anatomy/
12. Grid anatomy Format Format is the stage of the design, such as the browser window on websites The format defines the live area of a design where type, images, and other media are present http://vanseodesign.com/web-design/grid-anatomy/
13. Grid anatomy Columns Vertical segments which can be any number in a grid, as much as more columns, more flexibility and sometimes harder to work http://vanseodesign.com/web-design/grid-anatomy/
14. Grid anatomy Rows Rows are the horizontal equivalent of columns. Online it’s harder to plan for rows as the height of the format is often inconsistent and dynamic http://vanseodesign.com/web-design/grid-anatomy/
15. Grid anatomy Gutters Gutters are the spaces separating modules either vertically or horizontally http://vanseodesign.com/web-design/grid-anatomy/
16. Grid anatomy Margins Margins are the negative space between the edge of the format and the outer edge of the content http://vanseodesign.com/web-design/grid-anatomy/
17. WHY TO USE ?
18. Why to use? - Quicker development
19. Why to use? - Quicker development - Collaborating with other developers much easier
20. Why to use? - Quicker development - Collaborating with other developers much easier - Productivity
21. Why to use? - Quicker development - Collaborating with other developers much easier - Productivity - Extremely simpler to work responsiveness
22. DEV X DESIGNERS
23. DEV x Designer The DESIGN should guide the grid and not the opposite
24. DEV x Designer The CODE should be guided by the design/grid
25. DEV x Designer The BEST solution is always the closest approach between the design and the code
26. { CODING }
27. Define a strategy First of all it’s needed to define how the grid will work
28. Define a strategy First of all it’s needed to define how the grid will work - Class names convention
29. Define a strategy First of all it’s needed to define how the grid will work - Class names convention - CSS technique
30. Define a strategy First of all it’s needed to define how the grid will work - Class names convention - CSS technique - Relative and absolute columns
31. Define a strategy First of all it’s needed to define how the grid will work - Class names convention - CSS technique - Relative and absolute columns - Mixins and helpers
32. Define a strategy First of all it’s needed to define how the grid will work - Class names convention - CSS technique - Relative and absolute columns - Mixins and helpers - Breakpoints
33. Define a strategy First of all it’s needed to define how the grid will work - Class names convention - CSS technique - Relative and absolute columns - Mixins and helpers - Breakpoints - Media query manager
34. Define a strategy First of all it’s needed to define how the grid will work - Class names convention - CSS technique - Relative and absolute columns - Mixins and helpers - Breakpoints - Media query manager - Handling common problems
35. MOBILE FIRST!
36. Define a strategy Class names convention Columns Sizes .col / .column .small-6 / .sm-3 / .col-sm-1 .col-sm-2-3 / .column-1-6.large .column.six.wide.device
37. Define a strategy Class names convention Wrappers .grid / .grid.N-columns / .gridbox / .flex-grid / .row
38. Define a strategy .breakpoint-X .column .row / .row.column .grid .col-breakpoint-N .col-breakpoint-N-N CSS technique This is an important point where should be decided the classes responsibilities
39. Define a strategy Relative and absolute columns <div class="grid"> <div class="column small-4"></div> <div class="column small-4"></div> <div class="column small-4"></div> </div>
40. Define a strategy Relative and absolute columns <div class="grid"> <div class="column small-1-4"></div> <div class="column small-1-4"></div> <div class="column small-2-4"></div> </div> <div class="grid"> <div class="col-sm-1-4"></div> <div class="col-sm-1-4"></div> <div class="col-sm-2-4"></div> </div>
41. Define a strategy Relative and absolute columns <div class="flexgrid"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div> <div class="gridbox-3"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>
42. Define a strategy Offsets .pull / .push Aligment .center / .end Block control .stack / .relaxed Mixins and helpers Here comes the classes and mixins that help the grid to fit in all the situations that the design would like to create
43. Define a strategy Column generator column(small, 6) columnSize(4) Grid grid(3) Mixins and helpers Here comes the classes and mixins that help the grid to fit in all the situations that the design would like to create
44. Define a strategy $breakpoints = { small : 320px, medium : 768px, large : 992px, wide : 1440px } Breakpoints Even knowing the most common sizes of devices The breakpoints whenever possible should be defined with the design team
45. Define a strategy media(small, true) media(small, large) Block code +media(medium) { prop: value; } Media query manager Define how the mixin for media queries will work is extremely important
46. Define a strategy Handling common problems Same size columns
47. Define a strategy Handling common problems Vertical alignment
48. Define a strategy Handling common problems Negative margins
49. USING A GRID
50. Using a grid Template Sizes <div class="grid"> .component { <div class="column size"> column(3); }
51. THAT'S ALL FOLKS