Web Layout, tendenze, Flexbox

Slide 1

Slide 1 text

Tutto è relativo What The Float Non è quì e ora, ma in relazione a cosa e quando Quando vedo un pixel metto mano alla pistola Nel dubbio, overﬂow: hidden; Una cosa è standard quando diventa fallback Il CSS non esiste (è una parola inventata) @marcolago frontend developer HUB09 web layout, tendenze, ﬂexbox ma anche grid e altre cose da 20 anni a questa parte

Slide 2

Slide 2 text

Retro storia del fare layout sul web Grid Layout Module Flexbox Layout Module Bootstrap Foundation altri eventuali Float Clear @#$%?§!! CSS Zen Garden Table Tr Td Passato Futuro Griglie tipograﬁche applicate al web Design tool basati su Bootstrap Visual Composer Temi di WordPress out-of-the-box GSS The Grid

Slide 3

Slide 3 text

Facile ironia WEB DESIGNER - CIRCA 2011

Slide 4

Slide 4 text

Si può fare? Quanto costa? Le domande

Slide 5

Slide 5 text

Si può fare tutto! Dipende! Le risposte Si può fare? Quanto costa?

Slide 6

Slide 6 text

MA #@$%** {}!! O_o ! TIENI DURO! NON MANCA MOLTO AL WEEKEND… Mobile First

Slide 7

Slide 7 text

Giochiamo .black { width: 300px; background-color: black; } .red { width: 150px; height: 150px; float: left; background-color: red; } .blue { width: 100px; height: 100px; float: left; background-color: blue; }

Box A

Box B

REGOLE Se barate me ne accorgo Chiudete i computer 1 quadretto = 10px Non copiate!

Slide 8

Slide 8 text

La soluzione (sbagliata) Box A Box B

Slide 9

Slide 9 text

La soluzione (sbagliata 2) Box A Box B

Slide 10

Slide 10 text

La soluzione (sbagliata ancora, e ancora…) Box A Box B Box A Box B Box A Box B

Slide 11

Slide 11 text

La soluzione (corretta) Box A Box B

Slide 12

Slide 12 text

Giochiamo… la vendetta

Slide 13

Slide 13 text

Il Flexbox Elementi (rettangoli) ﬂessibili, in entrambe le direzioni, in relazione al genitore e ai fratelli. Responsive nell’anima Elementi centrati verticalmente (quasi) gratis. Impatto basso e (quasi) prevedibile con gli elementi circostanti. Elementi di una riga sempre della stessa altezza, e altri allineamenti comodi. Il Santo Graal dei layout. Ordinamento arbitrario degli elementi. Risolve problemi (ne crea degli altri).

Slide 14

Slide 14 text

Le infograﬁghette width: 600px; Extra space = 300px 300/6 = 50px width: 900px; flex-grow: 1; flex-shrink: 1; flex-basis: 200px; 200 + (50*1) = 250px 200 + (50*3) = 350px 200 + (50*2) = 300px flex-grow: 3; flex-shrink: 1; flex-basis: 200px; flex-grow: 2; flex-shrink: 1; flex-basis: 200px;

Slide 15

Slide 15 text

Imparare giocando http://www.ﬂexboxdefense.com/ http://cssgridgarden.com/

Slide 16

Slide 16 text

Studiare documentazione e esempi https://css-tricks.com/snippets/css/a-guide-to-ﬂexbox/ https://css-tricks.com/snippets/css/a-guide-to-ﬂexbox/

Slide 17

Slide 17 text

E, di fatto, andiamo a vedere le cose su CSS-Tricks. Perché sono già pronte e fatte bene. Ricordiamo l’indirizzo: https://css-tricks.com/snippets/css/a-guide-to-ﬂexbox/ Non mancheranno, inoltre, esempi presi dall’Internet, a seconda del caso. It’ Spiegazione Time!

Slide 18

Slide 18 text

Flexbox (e non solo) in pratica Facciamo quello che dicono sempre di non fare durante una presentazione… Lavoriamo direttamente sul codice. Tutti su Codepen. Forza! http://codepen.io/marcolago/collections/

Slide 19

Slide 19 text

Dove trovare cosa Queste slides https://bit.ly/wpmeetup-ﬂexbox Me https://twitter.com/marcolago/ http://codepen.io/marcolago/ https://github.com/marcolago/ …/marcolago/ AH! QUANTO MI PIACE QUESTA SLIDE!