CSS and Web Design
A presentation at CC Fest LA in in Los Angeles, CA, USA by Scott Gruber
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
Bootstrap 12 column grid
“The Fonmon”
“The Gertsner”
“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”
“WWF”
“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
Introduction and hands-on workshop about CSS Grid Layout, Codepen.io and Firefox developer tools.
for free. You
can too.
Resources
The following resources were mentioned during the presentation or are useful additional information.
Buzz and feedback
Here’s what was said about this presentation on social media.
