Grids Everywhere - Speaker Deck

Slide 1

Slide 1 text

GRIDS EVERYWHERE

Slide 2

Slide 2 text

Ivan Banov BankFacil

Slide 3

Slide 3 text

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/

Slide 4

Slide 4 text

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/

Slide 5

Slide 5 text

So, what’s a grid? Any group of line that were drawn to guide a design

Slide 6

Slide 6 text

So, what’s a grid? Any group of line that were drawn to guide a design

Slide 7

Slide 7 text

So, what’s a grid? Any group of line that were drawn to guide a design

Slide 8

Slide 8 text

GRID FROM THE BEGINNING

Slide 9

Slide 9 text

Looking back The design grew up to the grids

Slide 10

Slide 10 text

Looking back Bauhaus, the first design’s school of the world just consolidated the history

Slide 11

Slide 11 text

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/

Slide 12

Slide 12 text

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/

Slide 13

Slide 13 text

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/

Slide 14

Slide 14 text

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/

Slide 15

Slide 15 text

Grid anatomy Gutters Gutters are the spaces separating modules either vertically or horizontally http://vanseodesign.com/web-design/grid-anatomy/

Slide 16

Slide 16 text

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/

Slide 17

Slide 17 text

WHY TO USE ?

Slide 18

Slide 18 text

Why to use? - Quicker development

Slide 19

Slide 19 text

Why to use? - Quicker development - Collaborating with other developers much easier

Slide 20

Slide 20 text

Why to use? - Quicker development - Collaborating with other developers much easier - Productivity

Slide 21

Slide 21 text

Why to use? - Quicker development - Collaborating with other developers much easier - Productivity - Extremely simpler to work responsiveness

Slide 22

Slide 22 text

DEV X DESIGNERS

Slide 23

Slide 23 text

DEV x Designer The DESIGN should guide the grid and not the opposite

Slide 24

Slide 24 text

DEV x Designer The CODE should be guided by the design/grid

Slide 25

Slide 25 text

DEV x Designer The BEST solution is always the closest approach between the design and the code

Slide 26

Slide 26 text

{ CODING }

Slide 27

Slide 27 text

Define a strategy First of all it’s needed to define how the grid will work

Slide 28

Slide 28 text

Define a strategy First of all it’s needed to define how the grid will work - Class names convention

Slide 29

Slide 29 text

Define a strategy First of all it’s needed to define how the grid will work - Class names convention - CSS technique

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Slide 35

Slide 35 text

MOBILE FIRST!

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Define a strategy Class names convention Wrappers .grid / .grid.N-columns / .gridbox / .flex-grid / .row

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Define a strategy Relative and absolute columns

Slide 40

Slide 40 text

Define a strategy Relative and absolute columns

Slide 41

Slide 41 text

Define a strategy Relative and absolute columns

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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