{"id":696,"date":"2017-01-31T15:58:20","date_gmt":"2017-01-31T14:58:20","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/imparare-dal-lego-un-passo-avanti-nel-modular-web-design\/"},"modified":"2017-01-31T15:58:20","modified_gmt":"2017-01-31T14:58:20","slug":"imparare-dal-lego-un-passo-avanti-nel-modular-web-design","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/imparare-dal-lego-un-passo-avanti-nel-modular-web-design\/","title":{"rendered":"Imparare dal Lego: un passo avanti nel modular web design"},"content":{"rendered":"

Con centinaia di framework e UI kit, stiamo assemblando ogni tipo di blocchi di contenuto per creare pagine web. Tuttavia, una tale modularit\u00e0 e versatilit\u00e0 non \u00e8 ancora stata raggiunta a livello degli elementi web. Imparando dal Lego, possiamo spingere il web design modulare un passo pi\u00f9 in l\u00e0.<\/p>\n

Il modular atomic design \u00e8 in giro da un po’. Concettualmente, lo amiamo tutti: i componenti web dovrebbero essere versatili e riutilizzabili. Dovremmo essere in grado di posizionarli come mattoni, incastrandoli in qualsivoglia maniera senza preoccuparsi di cambiare alcunch\u00e9 nel codice.<\/p>\n

Finora, l’abbiamo fatto a livello del blocco di contenuto: ogni blocco occupa un’intera riga, ha una larghezza consistente ed \u00e8 self-contained. Adesso, siamo in grado di assemblare diversi blocchi per realizzare pagine web senza dover considerare gli stili e gli elementi all’interno di ciascun blocco. \u00c8 un grande passo in avanti e ha portato all’esplosione di framework e UI kit, rendendo il design delle pagine web modulare e anche pi\u00f9 accessibile alle masse.<\/p>\n

Ottenere una simile modularit\u00e0 a livello dell’elemento web non \u00e8 cos\u00ec semplice. Pattern Lab<\/a> dice che dovremmo essere in grado di mettere i pattern UI uno all’interno dell’altro come le matrioske. Ma, pensando alle matrioske, ogni layer ha il suo spessore, l’equivalente di padding e margin nel web design. Quando una matrioska a tre layer viene messa vicino a una matrioska a sette layer, lo spazio tra queste \u00e8 incostante. Mentre non \u00e8 un grande problema con le matrioske, sulle pagine web potrebbe portare o a un white space mal distribuito o a sovrascrivere pi\u00f9 livelli di CSS.<\/p>\n

Per anni, ho utilizzato Bootstrap<\/a> e Foundation<\/a> e questo \u00e8 esattamente quello che succede quando cercavo di scrivere layout complessi all’interno di quei framework: righe annidate in colonne annidate in righe, piccoli elementi in elementi pi\u00f9 grandi, tutti con i propri padding e margin come le matrioske. Poi dovevo gestire i problemi di nesting, togliere il padding eccessivo su first-<\/code> e last-child<\/code>, calcolare, sovrascrivere, aggiungere commenti qua e l\u00e0.<\/p>\n

Non era la cosa pi\u00f9 carina che avrei potuto fare ai miei fogli di stile, ma era ancora tollerabile. Poi sono andata a lavorare in Graphiq<\/a>, una knowledge company che realizza data visualization su pi\u00f9 di 700 argomenti diversi. Qui, ai content editor \u00e8 permesso inserire qualsiasi dato vogliano, in qualunque formato vogliano, per creare la miglior esperienza possibile per i propri lettori. Tale flessibilit\u00e0 ha senso per le piccole startup e noi abbiamo un’interfaccia drag-and-drop che aiuta ad organizzare tutto da un singolo data point a infografiche e grafici, a colonne, blocchi e card. I content editor possono anche aggiungere logica al layout della pagina. Due grafici a barre uno accanto all’altro potrebbero finire in strutture HTML piuttosto diverse. Come potete immaginare, questo livello di versatilit\u00e0 risulta spesso in un inferno di styling per i designer e i developer. Sebbene una soluzione davvero promettente, CSS Grid Layout<\/a>, sia all’orizzonte, non \u00e8 ancora approdata in Chrome. E potrebbero volerci anni per noi per adattarci completamente a un nuovo attributo display<\/code>. Questo mi ha portato a pensare che se possiamo cambiare la mentalit\u00e0 matrioska, possiamo fare un altro passo avanti verso il design modulare con gli strumenti che abbiamo a disposizione.<\/p>\n

\n

Imparare dal Lego<\/h2>\n

Per trovare una metafora migliore, sono tornata al Lego, l’epitomo del modular atomic design. \u00c8 saltato fuori che non dobbiamo mai preoccuparci di padding e margin quando \u201cannidiamo\u201d una piccola struttura Lego in una grande struttura Lego e poi in una struttura Lego ancora pi\u00f9 grande. In effetti, non c’\u00e8 un concetto simile al \u201cnesting\u201d nel Lego. Tutti gli elementi sembrano vivere allo stesso livello, non su layer multipli.<\/p>\n

Ma questo cosa significa per il web design? Noi dobbiamo annidare gli elementi web per la struttura semantica e per selezionare facilmente. Non sto dicendo che dovremmo cambiare le nostre strutture HTML, ma nei nostri fogli di stile potremmo mettere la spaziatura solo sugli elementi web di livello pi\u00f9 basso (o \u201catomi\u201d per citare la terminologia dell’atomic design) e non i molti layer che si trovano in mezzo.<\/p>\n

Date uno sguardo alla parte superiore di ogni singolo mattoncino Lego. Se immaginate che lo spazio attorno l’esterno dei piroli sia il padding di un elemento web e tutto quello che sta all’interno del padding sia il contenuto, scoprirete che tutti i mattoncini Lego hanno un padding consistente attorno al contenuto, che \u00e8 esattamente la met\u00e0 dello spazio tra gli elementi.<\/p>\n

\"Mattoncini Non importa quanti piroli abbia un mattoncino: il padding attorno a questi \u00e8 lo stesso che c’\u00e8 su ogni altro Lego.<\/p>\n

E quando si mettono assieme i mattoncini Lego, tutti gli elementi avranno tra loro lo stesso gutter.<\/p>\n

\"Un Il padding si estende dal punto pi\u00f9 esterno dei piroli di un mattoncino al punto pi\u00f9x esterno dei piroli del mattoncino vicino.<\/p>\n

Non serve altro padding o margin: gli spazi si formano naturalmente. Tutti gli elementi, non importa quanto siano annidati profondamente, appaiono sullo stesso livello e non servono altre sovrascritture CSS o aggiustamenti, nemmeno i reset di first-<\/code> e last-child<\/code>.<\/p>\n

Mettendo tutto questo nel codice, possiamo creare una class che aggiunga la spaziatura half-gutter e applicarla a tutti gli elementi web di livello pi\u00f9 basso sulla pagina. Poi possiamo rimuovere tutta la spaziatura sui div<\/code> strutturali come .row<\/code> e .col<\/code>.<\/p>\n

$gutter: 20px;\n.element <\/span>{<\/span>\n\t padding<\/span>:<\/span> $gutter \/ 2;<\/span>\n}<\/span><\/code><\/pre>\n
Una piccolissima modifica di cui essere consapevoli \u00e8 che quando il padding \u00e8 solo su .element<\/code>, il padding tra gli elementi pi\u00f9 esterni e il div<\/code> padre dovr\u00e0 essere solo la met\u00e0 del gutter.<\/p>\n
\"Rettangolo Il margine esterno \u00e8 solo la met\u00e0 del gutter, per ora.<\/p>\n
Dobbiamo aggiungere lo stesso padding anche al container pi\u00f9 esterno.<\/p>\n
\"Le Il container pi\u00f9 esterno con met\u00e0 gutter aggiunto tutto intorno.<\/p>\n
$gutter: 20px;\n.container,\n.element <\/span>{<\/span>\n\tpadding<\/span>:<\/span> $gutter \/ 2;<\/span>\n}<\/span><\/code><\/pre>\n
E tutto ci\u00f2 risulter\u00e0 in questo:<\/p>\n
\"Rettangolo Con l’aggiunta del padding pi\u00f9 esterno, tutto il padding sembra uguale.<\/p>\n
Pensate a quanti layer di sovrascrittura avremmo bisogno per creare questo layout con l’attuale mentalit\u00e0 a righe e colonne. Il meglio che possiamo fare probabilmente \u00e8 qualcosa cos\u00ec:<\/p>\n
\"Diagramma Lo stesso layout con righe e colonne.<\/p>\n
Con la mentalit\u00e0 Lego, la spaziatura e il codice possono essere molto pi\u00f9 semplici, come mostrato nei due esempi sottostanti:<\/p>\n
Esempio con div: Vedi su Codepen<\/a>.<\/p>\n
Esempio con Flexbox: Vedi su Codepen<\/a>.<\/p>\n<\/div>\n
\n
Pi\u00f9 flessibile del Lego<\/h2>\n
Il Lego \u00e8 davvero una soluzione adatta a tutto. Con il Lego, non dobbiamo modificare leggermente il padding dei mattoncini a seconda dei nostri progetti e non possiamo avere padding orizzontali e verticali diversi. Il web design ci offre molte pi\u00f9 variazioni in quest’area.<\/p>\n
Invece di impostare un unico valore come il gutter, possiamo impostare quattro variabili diverse e ottenere un layout pi\u00f9 flessibile in questo modo:<\/p>\n
$padding-x: 10px;\n$padding-y: 20px;\n$padding-outer-x: 40px;\n$padding-outer-y: 30px;\n\n.container <\/span>{<\/span>\n  padding<\/span>:<\/span> $padding-outer-y $padding-outer-x;<\/span>\n}<\/span>\n.element <\/span>{<\/span>\n  padding<\/span>:<\/span> ($padding-y \/ 2) ($padding-x \/ 2);<\/span>\n}<\/span><\/code><\/pre>\n
Il risultato ha questo aspetto:<\/p>\n
\"La A differenza dei pezzi Lego reali, possiamo impostare diversi valori per il padding.<\/p>\n
\u00c8 ancora modulare, ma ha anche spazi variabili per creare uno stile pi\u00f9 dinamico.<\/p>\n
@mixin layout ($var) <\/span>{<\/span>\n\n  $padding-x: map-get($var, padding-x);\n  $padding-y: map-get($var, padding-y);\n  $padding-outer-x: map-get($var, padding-outer-x);\n  $padding-outer-y: map-get($var, padding-outer-y);\n\n  .container <\/span>{<\/span>\n    padding<\/span>:<\/span> $padding-outer-y $padding-outer-x;<\/span>\n  }<\/span>\n  .element <\/span>{<\/span>\n    padding<\/span>:<\/span> ($padding-y \/ 2) ($padding-x \/ 2);<\/span>\n  }<\/span>\n}<\/span>\n<\/code><\/pre>\n
Usando questo mixin, possiamo inserirgli diverse mappature di spaziature per generare regole CSS per differenti media query:<\/p>\n
\/\/ Variabili di spaziatura\n$spacing<\/span>:<\/span> (\n  padding-x<\/span>:<\/span> 10px,\n  padding-y<\/span>:<\/span> 20px,\n  padding-outer-x<\/span>:<\/span> 40px,\n  padding-outer-y<\/span>:<\/span> 30px\n);<\/span>\n$spacing-tablet<\/span>:<\/span> (\n  padding-x<\/span>:<\/span> 5px,\n  padding-y<\/span>:<\/span> 10px,\n  padding-outer-x<\/span>:<\/span> 20px,\n  padding-outer-y<\/span>:<\/span> 15px\n);<\/span>\n\n\n\/\/ Genera regole CSS di default\n@include layout($spacing)<\/span>;<\/span>\n\n\n\/\/ Genera regole CSS per la visualizzazione tablet\n@media (max-width: 768px) <\/span>{<\/span> \n  @include layout($spacing-tablet)<\/span>;<\/span>\n}<\/span><\/code><\/pre>\n
E in maniera altrettanto semplice, tutti i nostri elementi avranno ora una spaziatura diversa nella vista desktop e in quella tablet.<\/p>\n
\n
Discussione<\/h2>\n
Dopo aver usato questo metodo per quasi un anno, mi sono imbattuta in alcune domande frequenti e casi limite che vorrei affrontare.<\/p>\n
Background e border<\/h3>\n
Quando aggiungete background e border agli elementi web, non applicateli al div<\/code> .element<\/code>. Il background coprir\u00e0 sia il contenuto sia le aree di padding dell’elemento, quindi romper\u00e0 la griglia visivamente in questo modo:<\/p>\n
\"Rettangoli Un background applicato a .element<\/code> rompe la griglia.<\/p>\n
Al contrario, applicate il background al div<\/code> figlio all’interno del div<\/code> .element<\/code>:<\/p>\n
<<\/span>div<\/span> class<\/span>=<\/span>\"<\/span>element\"<\/span><\/span>><\/span><\/span>\n  <<\/span>div<\/span> style<\/span>=<\/span>\"<\/span>background-image:url();\"<\/span><\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span>\n<\/<\/span>div<\/span>><\/span><\/span><\/code><\/pre>\n
\"Rettangoli Un div<\/code> figlio contiene l’immagine, cos\u00ec non si rompe la griglia.<\/p>\n
Ho usato questa struttura in tutti i miei esempi precedenti.<\/p>\n
In maniera simile, il border va attorno al padding nel box model, cos\u00ec dovremmo applicare anche il border dell’elemento a un div<\/code> figlio per mantenere la corretta spaziatura.<\/p>\n
\"Rettangolo Come con il background, applicate il bordo a un div<\/code> figlio.<\/p>\n
Elementi full row<\/h3>\n
Un’altra questione comune si ha quando occasionalmente vogliamo degli elementi full row, concettualmente cos\u00ec:<\/p>\n
\"Un A volte vogliamo interrompere la griglia con degli elementi a riga intera.<\/p>\n
Per assegnare degli stili agli elementi riga seguendo la struttura di .container<\/code> e .element<\/code>, dobbiamo usare il margin negativo:<\/p>\n
.element-full-row <\/span>{<\/span>\n  margin<\/span>:<\/span> 0 (-$padding-outer-x);<\/span>\n  padding<\/span>:<\/span> ($padding-y \/ 2) ($padding-x \/ 2 + $padding-outer-x);<\/span>\n}<\/span><\/code><\/pre>\n
Notate che dobbiamo aggiungere di nuovo il $padding-outer-x<\/code> al padding, cos\u00ec che il contenuto in .element-full-row<\/code> sia allineato al contenuto in .element<\/code>.<\/p>\n
\"Un Il contenuto di .element-full-row<\/code> si allinea con il contenuto di .element<\/code> align.<\/p>\n
Il codice di prima gestisce la spaziatura orizzontale e la stessa logica pu\u00f2 essere applicata anche per sostituire la spaziatura verticale (come mostrato nell’esempio sopra: l’elemento header sostituisce il padding superiore). Possiamo aggiungere anche un margine negativo molto facilmente nei nostri fogli di stile.<\/p>\n
.element-full-row:first-child <\/span>{<\/span>\n  margin<\/span>:<\/span> (-$padding-outer-y) (-$padding-outer-x) 0;<\/span>\n  padding<\/span>:<\/span> ($padding-y \/ 2 + $padding-outer-y) ($padding-x \/ 2 + $padding-outer-x) ($padding-y \/ 2);<\/span>\n}<\/span><\/code><\/pre>\n
Potete applicarla come regola standalone o includerla nel mixin Sass o LESS, poi non dovrete pi\u00f9 preoccuparvene.<\/p>\n
Annidamento<\/h3>\n
La libert\u00e0 completa nell’annidamento \u00e8 quello in cui eccelle questo metodo CSS Lego. Tuttavia, c’\u00e8 un tipo di annidamento che non possiamo fare: non possiamo annidare un .element<\/code> all’interno di un .element<\/code>. Questo creerebbe un padding doppio e la ragion d’essere di questo metodo andrebbe persa. Questo \u00e8 il motivo per cui si dovrebbe applicare la class .element<\/code> solo agli elementi web di livello pi\u00f9 basso (o \u201catomi\u201d per usare la terminologia dell’atomic design) come un pulsante, una input box, una text box, un’immagine, etc.<\/p>\n
Prendiamo in considerazione questa comment box molto generica.<\/p>\n
\"Comment<\/p>\n
Invece di trattarla come un singolo \u201celemento\u201d, dobbiamo trattarla come un gruppo pre-definito di elementi (titolo, textarea, button e helper text):<\/p>\n
<<\/span>div<\/span> class<\/span>=<\/span>\"<\/span>comment\"<\/span><\/span>><\/span><\/span>\n  <<\/span>h3<\/span> class<\/span>=<\/span>\"<\/span>comment-title element\"<\/span><\/span>><\/span><\/span>Add a new comment<\/<\/span>h3<\/span>><\/span><\/span>\n  <<\/span>textarea<\/span> class<\/span>=<\/span>\"<\/span>element\"<\/span><\/span>><\/span><\/span><\/<\/span>textarea<\/span>><\/span><\/span>\n  <<\/span>div<\/span> class<\/span>=<\/span>\"<\/span>clearfix\"<\/span><\/span>><\/span><\/span>\n     <<\/span>div<\/span> class<\/span>=<\/span>\"<\/span>float-left\"<\/span><\/span>><\/span><\/span>\n       <<\/span>div<\/span> class<\/span>=<\/span>\"<\/span>element\"<\/span><\/span>><\/span><\/span>\n         <<\/span>button<\/span> class<\/span>=<\/span>\"<\/span>btn-post\"<\/span><\/span>><\/span><\/span>Post comment<\/<\/span>button<\/span>><\/span><\/span>\n       <\/<\/span>div<\/span>><\/span><\/span>\n     <\/<\/span>div<\/span>><\/span><\/span>\n     <<\/span>div<\/span> class<\/span>=<\/span>\"<\/span>float-right\"<\/span><\/span>><\/span><\/span>\n       <<\/span>div<\/span> class<\/span>=<\/span>\"<\/span>helper-text element\"<\/span><\/span>><\/span><\/span>\n         <<\/span>i<\/span> class<\/span>=<\/span>\"<\/span>icon-question\"<\/span><\/span>><\/span><\/span><\/<\/span>i<\/span>><\/span><\/span>\n           Some HTML is OK.\n       <\/<\/span>div<\/span>><\/span><\/span>\n     <\/<\/span>div<\/span>><\/span><\/span>\n   <\/<\/span>div<\/span>><\/span><\/span>\n<\/<\/span>div<\/span>><\/span><\/span><\/code><\/pre>\n
Poi, possiamo trattare .comment<\/code> come un componente riutilizzabile o, nel contesto dell’atomic design, come una \u201cmolecola\u201d, che si comporter\u00e0 bene con altri componenti riutilizzabili scritti nella stessa maniera e potr\u00e0 essere raggruppata in strutture HTML di pi\u00f9 alto livello. E, indipendentemente da come le organizzerete, la spaziatura tra esse sar\u00e0 sempre corretta.<\/p>\n
Altezze e layout variabili<\/h3>\n
Per la maggior parte di questo articolo, abbiamo usato lo stesso esempio di fitted row. Questo potrebbe portare alcuni a pensare che questo metodo funzioni solo per elementi con altezza e larghezza definiti.<\/p>\n
In realt\u00e0, \u00e8 pi\u00f9 versatile di cos\u00ec. Non importa in che modo gli elementi cambino in altezza e larghezza, lazy load, o float attorno, il padding simile al Lego assicura lo stesso spazio consistente tra gli elementi.<\/p>\n
\"Il Ho creato un rapido flow layout di Pinterest per dimostrare in che modo funziona questa mentalit\u00e0 con elementi fluidi e che cambiano.<\/p>\n
Vedi su Codepen<\/a>.<\/p>\n
Mantenimento<\/h3>\n
Alcuni tra voi potrebbero anche preoccuparsi dei costi di mantenimento. In effetti, ci vuole del tempo per apprendere questo nuovo metodo, ma una volta che si inizia ad adottare questa mentalit\u00e0 e a scrivere i CSS in questo modo, il mantenimento diventa estremamente semplice.<\/p>\n
Specialmente con i layout mixin, tutte le regole di spaziatura sono centralizzate e controllate da alcuni gruppi di variabili. Un singolo cambiamento nelle variabili verr\u00e0 propagato automaticamente a tutti gli elementi sulla pagina web.<\/p>\n
In confronto, potremmo dover cambiare padding e margin in 20 posti diversi con il vecchio metodo e poi dovremmo testare per essere sicuri che funzioni ancora tutto. Sarebbe un processo molto pi\u00f9 movimentato.<\/p>\n
Grid layout<\/h3>\n
Infine, c’\u00e8 il Grid layout, che supporta layout molto complicati e annida in maniera molto pi\u00f9 graceful che i blocchi. Potreste pensare che si tratti di un lavoro piuttosto duro per un problema che va scomparendo.<\/p>\n
Mentre molte delle questioni di cui abbiamo parlato in questo articolo potrebbero sparire con Grid, potrebbero volerci degli anni perch\u00e9 Grid venga supportato dai browser. E poi, potrebbe volerci molto tempo perch\u00e9 la community acquisisca familiarit\u00e0 con il nuovo metodo e sviluppi delle best practice e dei framework attorno ad esso. Come Flex, \u00e8 gi\u00e0 supportato dalla maggior parte dei browser, ma \u00e8 ben lungi dall’essere ampiamente adottato.<\/p>\n
E dopo tutto, potrebbe volerci molto tempo per un tipico utente web per capire Grid e il suo funzionamento. In maniera simile richiederebbe a noi molto sviluppo tradurre lo user layout input in buon codice CSS Grid. Il vecchio metodo a colonne e righe \u00e8 molto pi\u00f9 semplice da capire e quando il nesting non \u00e8 un problema, potrebbe essere una buona soluzione per siti web che permettono agli utenti di fare delle configurazioni.<\/p>\n<\/div>\n
\n
Conclusioni<\/h2>\n
Abbiamo cominciato ad implementare questo metodo in Graphiq<\/a> all’inizio del 2016. Dopo quasi un anno, lo adoriamo e crediamo sia il modo in cui dovremmo scrivere i layout web nel futuro. Man mano che facciamo il refactor di ogni pagina, stiamo cancellando centinaia di righe di vecchio codice CSS e rendendo i fogli di stile molto pi\u00f9 logici e molto pi\u00f9 semplici da leggere. Abbiamo anche molti meno bug nei layout e nelle spaziature rispetto a tutti i nostri refactor del passato. Ora, non importa come i nostri content editor decidano di annidare i loro data point, abbiamo molto poco di cui preoccuparci.<\/p>\n
Da quello che abbiamo visto questo \u00e8 un vero game changer nel modo in cui pensiamo ai nostri layout e come li trasformiamo in codice. Quando i componenti web sono flessibili come i mattoncini Lego fino a livello degli elementi, diventano molto pi\u00f9 versatili e facili da mantenere. Crediamo che questo sia il prossimo passo da fare nel web design modulare. Provatelo voi stessi: potrebbe cambiare il modo in cui scrivete le vostre pagine web.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
\u00c8 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 \u00e8 una rivoluzione.<\/p>\n","protected":false},"author":818,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","categories":[4,244,168],"tags":[],"coauthors":[498],"class_list":["post-696","article","type-article","status-publish","hentry","category-codice","category-css","category-numero-190-31-gennaio-2017"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/696","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=696"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=696"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=696"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Esempio live: Vedi su Codepen<\/a>.<\/p>\n<\/div>\n
Con il responsive design, potremmo anche volere spaziature diverse per media query diverse. Possiamo spingere questo approccio un passo pi\u00f9 in l\u00e0 e scrivere la logica in un mixin Sass<\/a> (in alternativa, potete farlo anche con LESS<\/a>):<\/p>\n
E nel codice: Vedi su Codepen<\/a>.<\/p>\n