Web Layout, tendenze, Flexbox

Come sviluppare layout per il web usando le ultime tecnologie come il Flexbox Layout Module, ma anche il Grid e altre cose da 20 anni a questa parte.

Slide del talk al WordPress Meetup Torino del 19 aprile 2017.

Video del talk: https://wordpress.tv/2017/04/27/style-matters/

Transcript

1. 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, overflow: hidden; Una cosa è standard quando diventa fallback Il CSS non esiste (è una parola inventata) @marcolago frontend developer HUB09 web layout, tendenze, flexbox ma anche grid e altre cose da 20 anni a questa parte
2. 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 tipografiche applicate al web Design tool basati su Bootstrap Visual Composer Temi di WordPress out-of-the-box GSS The Grid
3. Facile ironia WEB DESIGNER - CIRCA 2011
4. Si può fare? Quanto costa? Le domande
5. Si può fare tutto! Dipende! Le risposte Si può fare? Quanto costa?
6. MA #@$%** {}!! O_o ! TIENI DURO! NON MANCA MOLTO AL WEEKEND… Mobile First
7. Giochiamo <style> .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; } </style> <div class="container black"> <div class="box-a red">Box A</div> <div class="box-b blue">Box B</div> </div> REGOLE Se barate me ne accorgo Chiudete i computer 1 quadretto = 10px Non copiate!
8. La soluzione (sbagliata) Box A Box B
9. La soluzione (sbagliata 2) Box A Box B
10. La soluzione (sbagliata ancora, e ancora…) Box A Box B Box A Box B Box A Box B
11. La soluzione (corretta) Box A Box B
12. Giochiamo… la vendetta
13. Il Flexbox Elementi (rettangoli) flessibili, 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).
14. Le infografighette 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;
15. Imparare giocando http://www.flexboxdefense.com/ http://cssgridgarden.com/
16. Studiare documentazione e esempi https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/
17. 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-flexbox/ Non mancheranno, inoltre, esempi presi dall’Internet, a seconda del caso. It’ Spiegazione Time!
18. 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/
19. Dove trovare cosa Queste slides https://bit.ly/wpmeetup-flexbox Me https://twitter.com/marcolago/ http://codepen.io/marcolago/ https://github.com/marcolago/ …/marcolago/ AH! QUANTO MI PIACE QUESTA SLIDE!