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/
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Web Layout, tendenze, Flexbox
1. Tutto è relativo
What
TheFloat
Non è quì e ora,
ma in relazione
a cosa e quando
Quandovedo
unpixel
mettomano
allapistola
Neldubbio,
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
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).
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!