Web tools

A presentation at UC Tech Santa Barbara 2019 in July 2019 in Santa Barbara, CA, USA by Scott Gruber

Web Tools speaking.scottgruber.me @ UC Tech Santa Barbara 2019

What is in your toolkit? speaking.scottgruber.me @ UC Tech Santa Barbara 2019

speaking.scottgruber.me @ UC Tech Santa Barbara 2019

speaking.scottgruber.me @ UC Tech Santa Barbara 2019

speaking.scottgruber.me @ UC Tech Santa Barbara 2019

speaking.scottgruber.me @ UC Tech Santa Barbara 2019

speaking.scottgruber.me @ UC Tech Santa Barbara 2019

What is the nature of the web? speaking.scottgruber.me @ UC Tech Santa Barbara 2019

speaking.scottgruber.me @ UC Tech Santa Barbara 2019

speaking.scottgruber.me @ UC Tech Santa Barbara 2019

speaking.scottgruber.me @ UC Tech Santa Barbara 2019

What’s else? speaking.scottgruber.me @ UC Tech Santa Barbara 2019

A11Y speaking.scottgruber.me @ UC Tech Santa Barbara 2019

UX speaking.scottgruber.me @ UC Tech Santa Barbara 2019

Design Systems speaking.scottgruber.me @ UC Tech Santa Barbara 2019

HTML & CSS Flexbox, multi-column layout and CSS Grid Microformats and semantic markup speaking.scottgruber.me @ UC Tech Santa Barbara 2019

<nav class=”ucla-c-topic-nav”> <ul> <li><a href=”#climate-change”>Climate Change</a></li> <li><a href=”#energy”>Energy</a></li> <li><a href=”#policy-law-regulation”>Policy, Law & Regulation</a></li> <li><a href=”#economics-corporate-sustainability”>Economics & Corporate Sustainability</a></li> </ul> </nav> speaking.scottgruber.me @ UC Tech Santa Barbara 2019

Flexbox speaking.scottgruber.me @ UC Tech Santa Barbara 2019

.ucla-c-topic-nav ul { display: flex; flex-direction: column; list-style: none; } @media screen and (min-width: 30em) { .ucla-c-topic-nav ul { display: flex; flex-direction: row; flex-wrap: wrap; } } speaking.scottgruber.me @ UC Tech Santa Barbara 2019

<h2><a id=”climate-change”></a>Climate Change</h2> <div class=”ucla-c-faculty-advisors”> <ul> <li><a href=”#”>Alan Barreca</a></li> <li><a href=”#”>Alex Hall</a></li> <li><a href=”#”>Peter Kareiva</a></li> <li><a href=”#”>Liz Koslov</a></li> </ul> </div> speaking.scottgruber.me @ UC Tech Santa Barbara 2019

Multi-Column speaking.scottgruber.me @ UC Tech Santa Barbara 2019

@media screen and (min-width: 30em) { .ucla-c-faculty-advisors > ul { column-count: 3; column-gap: 1em; } } @media screen and (min-width: 60em) { .ucla-c-faculty-advisors > ul { column-count: 5; column-gap: 1em; } } speaking.scottgruber.me @ UC Tech Santa Barbara 2019

Microformats and HTML5 speaking.scottgruber.me @ UC Tech Santa Barbara 2019

<div class=”ucla-c-people-grid”> <article class=”h-card”> <a class=”u-url” href=”#”> <h2 class=”fn p-name”>Jane Kitty Doe</h2> <img class=”u-photo” src=”https://placekitten.com/300/400” alt=”kitten photo” /> <p class=”p-job-title”>Assistant Professor</p> <small class=”p-org”>Institute of the Environment and Sustainability</small> </a> </article> <article class=”h-card”> … </article> </div> speaking.scottgruber.me @ UC Tech Santa Barbara 2019

<div class=”ucla-c-people-grid”> <article class=”h-card”> <a class=”u-url” href=”#”> <figure> <img class=”u-photo” src=”https://placekitten.com/300/400” alt=”kitten photo” /> <figcaption> <h2 class=”fn p-name”>Kitty Doe</h2> <p class=”p-job-title”>Assistant Professor</p> <small class=”p-org”>Institute of the Environment and Sustainability</small> </figcaption> </figure> </a> </article> </div> speaking.scottgruber.me @ UC Tech Santa Barbara 2019

CSS Grid speaking.scottgruber.me @ UC Tech Santa Barbara 2019

RWD speaking.scottgruber.me @ UC Tech Santa Barbara 2019

.ucla-c-people-grid { display: grid; grid-gap: 2vw; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-rows: auto; } speaking.scottgruber.me @ UC Tech Santa Barbara 2019

/* fall back if no grid support */ .ucla-c-people-grid > article { display: inline-block; margin: 1em; vertical-align: top; width: 300px; } .ucla-c-people-grid > img { height: auto; width: 200px; } speaking.scottgruber.me @ UC Tech Santa Barbara 2019

@supports (display: grid) { .ucla-c-people-grid { display: grid; grid-gap: 2vw; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-rows: auto; } /* reset properties */ .ucla-c-people-grid > article { margin: initial; width: initial; } } speaking.scottgruber.me @ UC Tech Santa Barbara 2019

What’s next? speaking.scottgruber.me @ UC Tech Santa Barbara 2019

Art Direction for the Web. Thank you. speaking.scottgruber.me @ UC Tech Santa Barbara 2019

Scott Gruber
@scottgruber

1 / 39

Building with WordPress and CSS layouts at the UCLA Institute of the Environment and Sustainability

In this brief demo, we’ll look at the code to style several components for directory lists. We’ll see how CSS Grid, flexbox, multi-column layouts, microformats and semantic HTML are used in production today.

Video

Code

The following code examples from the presentation can be tried out live.

https://codepen.io/scottgruber/pen/qzeLGO

Flexbox nav
https://codepen.io/scottgruber/pen/WqVPgB

Multicolumn Layout
https://codepen.io/scottgruber/pen/rEXRyw

CSS Grid layout

Includes support queries, minmax and fallback for browsers that don’t support CSS Grid.

Resources

The following resources were mentioned during the presentation or are useful additional information.