L’unico modo per vincere è giocare. Viaggiate con Eric Meyer attraverso i meccanismi interni di CSS Grid mentre testa varie tecniche per costruire un tabellone per il gioco del tris riempito con dei contenuti. Prestando attenzione alle fasi iniziali di CSS e di A List Apart, questi hack giocosi riattivano lo spirito della sperimentazione.
Argomento: CSS
Controllare il layout e la tipografia. Design responsive e multi-device. Separare la presentazione dalla struttura e dal comportamento. Le media query e oltre. Tipologie di layout web. Animazioni CSS3. Rimpiazzare JavaScript con CSS3. Creare uno stylesheet per la stampa. Supporto per CSS: i bug dei browser e i workaround. CSS nei device interconnessi, nel mobile e nel resto. Mostrare e nascondere gli elementi, sostituire il testo con le immagini. Sass e Less e altro ancora.
The New CSS Layout, un estratto
In questo estratto dal Capitolo 3 di The New CSS Layout di Rachel Andrew, ci viene mostrato come creare una griglia base a tre colonne usando CSS Grid Layout. Poi, ci spiega come disporre degli elementi su più colonne e righe e come usare le aree coi nomi per descrivere il layout direttamente nel CSS.
La storia di CSS Grid raccontata dai suoi creatori
I designer hanno usato le griglie per secoli e dopo più di 20 anni di attesa, sono finalmente approdate nel browser. Questa è la storia di CSS Grid. Ci sono volute molte persone nel posto giusto al momento giusto perché succedesse.
CSS Grid in pratica: aggiungere Grid a un design esistente
CSS Grid è qui ed è più facile di quello che potreste pensare. Eric Meyer ci mostra come usare Grid in un design esistente facendo in modo che funzioni anche in browser non grid. Che foto! E un paio di “capito!”.
Imparare dal Lego: un passo avanti nel modular web design
È ora di riesaminare i giocattoli nella vostra scatola dei giochi concettuale. Quando capite come rendere modulari i web component fino al livello degli elementi, potete lasciare la metafora della matrioska e cominciare a visualizzare i blocchi di contenuto come mattoncini Lego. Samantha Zhang dice che è una rivoluzione.
Usare le CSS Mod Queries con i range selectors
Quando accettate distrattamente di fare qualcosa che poi realizzate di non saper davvero come fare, cosa fate? Andate un attimo in panico e vi mettete al lavoro. Patrick Clancey se ne esce con un piccolo arsenale di tool che lo aiutano a gestire i mod, range e range all’interno di mod, permettendogli di allontanarsi dall’implementazione standard delle liste con lunghezza fissa o layout fisso.
Mixare i colori per il Web con Sass
Usiamo il colore per influenzare gli stati d’animo, per creare un’ambientazione e per raccontare una storia. 125 anni fa, il pittore impressionista Claude Monet cambiò il modo in cui pensiamo al colore descrivendo il ruolo della luce in esso. Le sue osservazioni sono andate in gran parte perse nel design per il web, ma un preprocessore come Sass offre un potere inedito per mischiare tinte e tonalità che pervaderanno le nostre palette con più sfumature.
Container Queries: uniamo le forze un’altra volta!
Le media queries sono state lo strumento da usare per creare siti responsive, permettendoci di ridimensionare e ricombinare i moduli per adattarli ai vari contesti, layout e viewport. Ma fare affidamento sulle dimensioni fisse della viewport può rapidamente far diventare i fogli di stile dei nodi gordiani. Abbiamo ancora bisogno di un modo future-friendly per gestire i CSS responsive. Mat Marquis esplora il problema e si muove verso la soluzione e ci chiama a raccolta.
Che i link siano link!
La nozione del web come piattaforma per applicazioni non è mai stata più popolare. I framework single-page come Ember e Angular rendono semplice creare applicazioni complesse che offrono esperienze più ricche e più robuste di quello che possono fare i siti web tradizionali. Ma questo beneficio ha un costo. Ross Penman ci dice cosa possiamo fare per questo problema.
Quantity Queries per CSS
Nel responsive design pensiamo molto allo spazio, specialmente nel contesto delle dimensioni di schermo, ma è destino che la quantità di contenuto o il numero di elementi influenzino anche loro lo spazio, esattamente altrettanto imprevedibilmente e, se non vogliamo che i nostri design si impongano sui contenuti, abbiamo bisogno di modi nuovi per rendere i nostri design coscienti del cambiamento di quantità del contenuto. Heydon Pickering ci guida attraverso una nuova idea per creare breakpoint di stile per le quantità di elementi HTML.
