Web Tools speaking.scottgruber.me @ UC Tech Santa Barbara 2019
Slide 1
Slide 2
What is in your toolkit? speaking.scottgruber.me @ UC Tech Santa Barbara 2019
Slide 3
speaking.scottgruber.me @ UC Tech Santa Barbara 2019
Slide 4
speaking.scottgruber.me @ UC Tech Santa Barbara 2019
Slide 5
speaking.scottgruber.me @ UC Tech Santa Barbara 2019
Slide 6
speaking.scottgruber.me @ UC Tech Santa Barbara 2019
Slide 7
speaking.scottgruber.me @ UC Tech Santa Barbara 2019
Slide 8
What is the nature of the web? speaking.scottgruber.me @ UC Tech Santa Barbara 2019
Slide 9
speaking.scottgruber.me @ UC Tech Santa Barbara 2019
Slide 10
speaking.scottgruber.me @ UC Tech Santa Barbara 2019
Slide 11
speaking.scottgruber.me @ UC Tech Santa Barbara 2019
Slide 12
What’s else? speaking.scottgruber.me @ UC Tech Santa Barbara 2019
Slide 13
A11Y speaking.scottgruber.me @ UC Tech Santa Barbara 2019
Slide 14
UX speaking.scottgruber.me @ UC Tech Santa Barbara 2019
Slide 15
Design Systems speaking.scottgruber.me @ UC Tech Santa Barbara 2019
Slide 16
HTML & CSS Flexbox, multi-column layout and CSS Grid Microformats and semantic markup speaking.scottgruber.me @ UC Tech Santa Barbara 2019
Slide 17
Slide 18
<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
Slide 19
Flexbox speaking.scottgruber.me @ UC Tech Santa Barbara 2019
Slide 20
.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
Slide 21
Slide 22
<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
Slide 23
Multi-Column speaking.scottgruber.me @ UC Tech Santa Barbara 2019
Slide 24
@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
Slide 25
Slide 26
Microformats and HTML5 speaking.scottgruber.me @ UC Tech Santa Barbara 2019
Slide 27
<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
Slide 28
<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
Slide 29
CSS Grid speaking.scottgruber.me @ UC Tech Santa Barbara 2019
Slide 30
Slide 31
Slide 32
Slide 33
Slide 34
RWD speaking.scottgruber.me @ UC Tech Santa Barbara 2019
Slide 35
.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
Slide 36
/* 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
Slide 37
@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
Slide 38
What’s next? speaking.scottgruber.me @ UC Tech Santa Barbara 2019
Slide 39
Art Direction for the Web. Thank you. speaking.scottgruber.me @ UC Tech Santa Barbara 2019
