Web tools

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

What is the nature of the web? 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