Building the grid

22 Nov, 2016 · 1 min read
\[caption id="attachment\_200" align="alignnone" width="919"\]\[/caption\]\[caption id="attachment\_202" align="alignnone" width="613"\]\[/caption\]

Just putting these calculations here for future reference. Columns: Columns = 12 Gutter = 15px Rows: Rows = 12 Gutter = 15px Margins: Top = 10px Left = 20px Bottom = 10px Right = 20px

References

Calc(). (2016, May 17). Retrieved November 22, 2016, from https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Can I use… Support tables for HTML5, CSS3, etc. (2016, October 23). Retrieved November 27, 2016, from http://caniuse.com/#search=calc

Drewniak, J. (2014, November 6). Creating your own CSS grid system. Retrieved November 25, 2016, from http://j4n.co/blog/Creating-your-own-css-grid-system

Gamache, D. (2016) A dead simple, responsive boilerplate. Retrieved November 25, 2016, from http://getskeleton.com/

Imling, M. (2016). One% CSS Grid. Retrieved November 25, 2016, from http://onepcssgrid.mattimling.com/

Rand-Hendriksen, M. (2015, July 16). Making sense of the CSS box model. Retrieved November 25, 2016, from https://www.lynda.com/CSS-tutorials/Making-Sense-CSS-Box-Model/372544-2.html

H5bp/html5-boilerplate. (2016, November 17). Retrieved November 25, 2016, from https://github.com/h5bp/html5-boilerplate

Fiona MacNeill
Authors
UX Researcher, Learning Designer, Technologist
Passionate about creating inclusive and accessible experiences, tools, and services for learning and doing.