CSS and Web Design

CSS and Web Design Scott Gruber Los Angeles, September 2018

CSS Grid and Web Design Scott Gruber Los Angeles, September 2018

www.ioes.ucla.edu

CSS Grid Layout shipped in production browsers 2017.

CSS Grid Layout brings a twodimensional grid system to the Web.

“What is a grid?”

“A grid is an intersecting set of horizontal and vertical lines”

Grid display: grid;

Grid Rows grid-template-rows grid-row

Grid Columns grid-template-columns grid-column

Grid Gap grid-gap

Grid Area grid-template-areas grid-area

“Design a grid based on your contents constraints, not design your content based on a grid's constraints.”

Bootstrap 12 column grid

“The Fonmon”

“The Gertsner”

“The Carson”

“The Marber”

“The Minimalist”

“Typotron 11, Seven columns”

“Typotron 11, Six columns”

“West Wales Holiday Cottage”

“West Wales Holiday Cottage 1”

“West Wales Holiday Cottage 3”

“Grids can help you create professional-looking designs”

“Don’t just choose a grid. Design it!” –Nathan Ford founder of Gridset

“WWF”

Compound grid of ¼ and ⅓ lines

Rachel Andrew Rachel Andrew is a British web developer, author and speaker known for her expertise in HTML, CSS, JavaScript and PHP. Photo by Drew McLellan

“If I can leave you with any advice, it is to make room for time to play with new things.” –Rachel Andrew

Thank you. https://speaking.scottgruber.me