Web tools

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

Slide 1

Slide 1

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

Slide 2

Slide 2

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

Slide 3

Slide 3

speaking.scottgruber.me @ UC Tech Santa Barbara 2019

Slide 4

Slide 4

speaking.scottgruber.me @ UC Tech Santa Barbara 2019

Slide 5

Slide 5

speaking.scottgruber.me @ UC Tech Santa Barbara 2019

Slide 6

Slide 6

speaking.scottgruber.me @ UC Tech Santa Barbara 2019

Slide 7

Slide 7

speaking.scottgruber.me @ UC Tech Santa Barbara 2019

Slide 8

Slide 8

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

Slide 9

Slide 9

speaking.scottgruber.me @ UC Tech Santa Barbara 2019

Slide 10

Slide 10

speaking.scottgruber.me @ UC Tech Santa Barbara 2019

Slide 11

Slide 11

speaking.scottgruber.me @ UC Tech Santa Barbara 2019

Slide 12

Slide 12

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

Slide 13

Slide 13

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

Slide 14

Slide 14

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

Slide 15

Slide 15

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

Slide 16

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 17

Slide 18

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 &amp; Regulation</a></li> <li><a href=”#economics-corporate-sustainability”>Economics &amp; Corporate Sustainability</a></li> </ul> </nav> speaking.scottgruber.me @ UC Tech Santa Barbara 2019

Slide 19

Slide 19

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

Slide 20

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 21

Slide 22

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

Slide 23

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

Slide 24

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 25

Slide 26

Slide 26

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

Slide 27

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

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

Slide 29

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

Slide 30

Slide 30

Slide 31

Slide 31

Slide 32

Slide 32

Slide 33

Slide 33

Slide 34

Slide 34

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

Slide 35

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

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

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

Slide 38

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

Slide 39

Slide 39

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