CSS and Web Design Scott Gruber Los Angeles, September 2018
Slide 1
Slide 2
CSS Grid and Web Design Scott Gruber Los Angeles, September 2018
Slide 3
www.ioes.ucla.edu
Slide 4
CSS Grid Layout shipped in production browsers 2017.
Slide 5
Slide 6
Slide 7
CSS Grid Layout brings a twodimensional grid system to the Web.
Slide 8
“What is a grid?”
Slide 9
“A grid is an intersecting set of horizontal and vertical lines”
Slide 10
Slide 11
Grid display: grid;
Slide 12
Grid Rows grid-template-rows grid-row
Slide 13
Grid Columns grid-template-columns grid-column
Slide 14
Grid Gap grid-gap
Slide 15
Grid Area grid-template-areas grid-area
Slide 16
“Design a grid based on your contents constraints, not design your content based on a grid's constraints.”
Slide 17
Bootstrap 12 column grid
Slide 18
Bootstrap 12 column grid
Slide 19
“The Fonmon”
Slide 20
“The Gertsner”
Slide 21
“The Gertsner”
Slide 22
“The Carson”
Slide 23
“The Marber”
Slide 24
“The Minimalist”
Slide 25
“Typotron 11, Seven columns”
Slide 26
“Typotron 11, Six columns”
Slide 27
“West Wales Holiday Cottage”
Slide 28
“West Wales Holiday Cottage 1”
Slide 29
“West Wales Holiday Cottage 3”
Slide 30
“Grids can help you create professional-looking designs”
Slide 31
“Don’t just choose a grid. Design it!” –Nathan Ford founder of Gridset
Slide 32
“WWF”
Slide 33
“WWF”
Slide 34
“WWF”
Slide 35
Slide 36
Slide 37
Slide 38
Slide 39
Slide 40
Compound grid of ¼ and ⅓ lines
Slide 41
Slide 42
Slide 43
Slide 44
Slide 45
Slide 46
Slide 47
Slide 48
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
Slide 49
“If I can leave you with any advice, it is to make room for time to play with new things.” –Rachel Andrew
Slide 50
Thank you. https://speaking.scottgruber.me
