Flexible grids using Sass

How grids evolved over time and why a 12 column grid might not work for your design. How to overcome these limitations using Singularity GS. You can view the full video along with code demos at the below link

https://www.youtube.com/watch?v=NoYcJ0YCc5o

Transcript

1. Vinay Raghu
2. @rvinay88 @arachattack http://viii.in
3. “…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
5. http://sixrevisions.com/web_design/the-evolution-of-web-design/
6. Table based layouts are so bad, there’s no article about it since 2011
7. • Floats – for layouts (clearfix hacks) • Grid systems
11. •A nice abstraction
12. •A nice abstraction •Maintainable
13. •A nice abstraction •Maintainable •Nestable
14. •A nice abstraction •Maintainable •Nestable •Center columns
15. •Fixed width 960px
16. •Fixed width 960px •Not responsive
17. •Fixed width 960px •Not responsive •Worked great for fixed screen sizes
20. •Additional grids at different media query breakpoints
21. •Additional grids at different media query breakpoints •Mobile first
22. •Additional grids at different media query breakpoints •Mobile first •Source ordering (push, pull, offset)
23. •5 grids •xs, sm, md, lg, xl
24. •3 grids •small, medium, large
25. Symmetric 12 column grid at every breakpoint
28. <div class="sidebar-primary"></div>
29. •Not readable
30. •Not readable •Not semantic
31. April fool’s joke - http://bootstrapfoundationfive.github.io/documentation.html
32. We are headed towards even more presentational classes in our markup
33. • Create new grid classes
34. • Create new grid classes • Backtrack your markup
35. • Create new grid classes • Backtrack your markup •Add presentational classes to define new behavior
36. •Not readable •Not semantic
37. •Not readable •Not semantic •Not scalable
38. •Not readable •Not semantic •Not scalable •Not maintainable
39. “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/
40. We are reverse-engineering a unique design onto a generic grid
42. With single page apps, do you need 12 columns or just 2 columns?
43. https://gist.github.com/rvinay88/11451814 Stackoverflow question
44. Its tricky to build an odd number of columns that utilize the entire screen screen width in a generic 12 column grid
45. •Not readable •Not semantic •Not scalable •Not maintainable
46. •Not readable •Not semantic •Not scalable •Not maintainable •Generic
47. •Not readable •Not semantic •Not scalable •Not maintainable •Generic •Constraint to design
49. •5786 loc •CSS minified 98kb •JS minified 29kb
51. •6372 loc •CSS minified 146kb •JS minified 86kb
52. Do you use 12 columns on a small device?
53. Do you use 12 columns on ANY device?
54. We are shipping code that would never be used
56. • Not readable • Not semantic • Not scalable • Not maintainable • Generic • Constraint to design
57. • Not readable • Not semantic • Not scalable • Not maintainable • Generic • Constraint to design • Code bloat
58. •Susy •Singularity •Jeet •Zen •Gridset App •Flint
59. •Scott Kellum •Sam Richard •Dale Sande •Mason Wendell •SingularityGS
60. •CSS grids module •Flexbox
61. Talk is cheap. Show me the code. - Linus Torvalds
62. •Add grid •Add grid at breakpoint •Add gutter •Add gutter at breakpoint •Isolation span •Float span
63. •Five column layout •Source ordering •Fixed sidebar, fluid content
64. • https://gridsetapp.com/specs/fonmon/?gridset=show • https://gridsetapp.com/specs/marber/?gridset=show • https://gridsetapp.com/specs/gerstner/?gridset=show