Flexible grids using Sass

Slide 1

Slide 1 text

Vinay Raghu

Slide 2

Slide 2 text

@rvinay88 @arachattack http://viii.in

Slide 3

Slide 3 text

“…in your head you will already have a pre-conception of your layout” http://www.designer-daily.com/the-use-of-grids-in-website-design-6639

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

http://sixrevisions.com/web_design/the-evolution-of-web-design/

Slide 6

Slide 6 text

Table based layouts are so bad, there’s no article about it since 2011

Slide 7

Slide 7 text

• Floats – for layouts (clearfix hacks) • Grid systems

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

•A nice abstraction

Slide 12

Slide 12 text

•A nice abstraction •Maintainable

Slide 13

Slide 13 text

•A nice abstraction •Maintainable •Nestable

Slide 14

Slide 14 text

•A nice abstraction •Maintainable •Nestable •Center columns

Slide 15

Slide 15 text

•Fixed width 960px

Slide 16

Slide 16 text

•Fixed width 960px •Not responsive

Slide 17

Slide 17 text

•Fixed width 960px •Not responsive •Worked great for fixed screen sizes

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

•Additional grids at different media query breakpoints

Slide 21

Slide 21 text

•Additional grids at different media query breakpoints •Mobile first

Slide 22

Slide 22 text

•Additional grids at different media query breakpoints •Mobile first •Source ordering (push, pull, offset)

Slide 23

Slide 23 text

•5 grids •xs, sm, md, lg, xl

Slide 24

Slide 24 text

•3 grids •small, medium, large

Slide 25

Slide 25 text

Symmetric 12 column grid at every breakpoint

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Slide 29

Slide 29 text

•Not readable

Slide 30

Slide 30 text

•Not readable •Not semantic

Slide 31

Slide 31 text

April fool’s joke - http://bootstrapfoundationfive.github.io/documentation.html

Slide 32

Slide 32 text

We are headed towards even more presentational classes in our markup

Slide 33

Slide 33 text

• Create new grid classes

Slide 34

Slide 34 text

• Create new grid classes • Backtrack your markup

Slide 35

Slide 35 text

• Create new grid classes • Backtrack your markup •Add presentational classes to define new behavior

Slide 36

Slide 36 text

•Not readable •Not semantic

Slide 37

Slide 37 text

•Not readable •Not semantic •Not scalable

Slide 38

Slide 38 text

•Not readable •Not semantic •Not scalable •Not maintainable

Slide 39

Slide 39 text

“We shouldn’t be abstracting our layout options into one-size-fits-all downloads, but should instead be designing grid systems that are custom-tailored to our content” https://gridsetapp.com/blog/gridset-sketch-guides/

Slide 40

Slide 40 text

We are reverse-engineering a unique design onto a generic grid

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

With single page apps, do you need 12 columns or just 2 columns?

Slide 43

Slide 43 text

https://gist.github.com/rvinay88/11451814 Stackoverflow question

Slide 44

Slide 44 text

Its tricky to build an odd number of columns that utilize the entire screen screen width in a generic 12 column grid

Slide 45

Slide 45 text

•Not readable •Not semantic •Not scalable •Not maintainable

Slide 46

Slide 46 text

•Not readable •Not semantic •Not scalable •Not maintainable •Generic

Slide 47

Slide 47 text

•Not readable •Not semantic •Not scalable •Not maintainable •Generic •Constraint to design

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

•5786 loc •CSS minified 98kb •JS minified 29kb

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

•6372 loc •CSS minified 146kb •JS minified 86kb

Slide 52

Slide 52 text

Do you use 12 columns on a small device?

Slide 53

Slide 53 text

Do you use 12 columns on ANY device?

Slide 54

Slide 54 text

We are shipping code that would never be used

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

• Not readable • Not semantic • Not scalable • Not maintainable • Generic • Constraint to design

Slide 57

Slide 57 text

• Not readable • Not semantic • Not scalable • Not maintainable • Generic • Constraint to design • Code bloat

Slide 58

Slide 58 text

•Susy •Singularity •Jeet •Zen •Gridset App •Flint

Slide 59

Slide 59 text

•Scott Kellum •Sam Richard •Dale Sande •Mason Wendell •SingularityGS

Slide 60

Slide 60 text

•CSS grids module •Flexbox

Slide 61

Slide 61 text

Talk is cheap. Show me the code. - Linus Torvalds

Slide 62

Slide 62 text

•Add grid •Add grid at breakpoint •Add gutter •Add gutter at breakpoint •Isolation span •Float span

Slide 63

Slide 63 text

•Five column layout •Source ordering •Fixed sidebar, fluid content

Slide 64

Slide 64 text

• https://gridsetapp.com/specs/fonmon/?gridset=show • https://gridsetapp.com/specs/marber/?gridset=show • https://gridsetapp.com/specs/gerstner/?gridset=show

Slide 65

Slide 65 text

No content