Share
Mi piacerebbe parlarti di Lemonade. Non la rinfrescante bevanda agli agrumi, ma un sistema a griglia che ho creato.
Lemonade è un sistema a griglia creato per dare a designer e sviluppatori la sicurezza di creare siti web completamente reattivi, eliminando la frustrazione di sfogliare i browser alla ricerca di errori ed errori. Diamo un'occhiata a come è messo insieme e come è possibile costruire il proprio sistema di griglia reattivo.
Prima di costruire il mio, ho spesso usato Skeleton.css per i miei layout reattivi. Tuttavia, col passare del tempo, mi sentivo come se fosse una causa persa, semplicemente perché stavo costantemente modificandolo per le mie esigenze e strappando via elementi inutili che ritenevo non fossero utilizzabili. È un ottimo framework, ma lo consiglierei solo a persone che non si sentono a proprio agio con il front-end.
Ci sono così tante griglie, quadri e librerie là fuori, ma scegliere quello giusto è una decisione difficile. Il modo più semplice per decidere è chiedersi "Cosa sto cercando di fare?" Ad esempio: attualmente sto costruendo un CMS (principalmente PHP) e non voglio affatto concentrarmi sull'interfaccia (il pannello di amministrazione), quindi ho optato per Bootstrap. Bootstrap è un framework incredibilmente completo e si prende letteralmente cura di te durante ogni aspetto del processo di progettazione.
Volevo davvero fare qualcosa che mi avrebbe dato il pieno controllo, dove non avrei dovuto passare la maggior parte del mio tempo a personalizzare la griglia. Per cominciare pensavo che fare una griglia sarebbe stata una passeggiata nel parco, in realtà pensavo di poterlo fare in poche ore. Il 24 giugno 2013, alle 12:30 circa, ho aperto il mio editore e ho iniziato a scrivere il codice, in gran parte. Ma sorpresa, sorpresa, era estremamente difficile andare avanti; come si crea qualcosa che è stato creato centinaia di volte, ma meglio? Avevo bisogno di pensare al futuro, avevo bisogno di crearlo come avrei voluto che funzionasse, non di come pensavo che un sistema di griglie avrebbe dovuto funzionare, così mi sono posto tre obiettivi (li ho scritti su bigliettini e li ho incollati sulla parete):
Lascia che ti guidi attraverso questi obiettivi in modo più dettagliato. Volevo che la griglia fosse piccola, così piccola che se dovessi mai modificarla, non avrei maledetto lo schermo con frustrazione. Aveva bisogno di lavorare su browser moderni (dimentica IE8 e sotto); Volevo rimuovere lo scenario di sfogliare i browser preoccupandoti che tutto fosse a posto. L'obiettivo finale era tutto per usarlo, non volevo creare qualcosa e semplicemente attaccarlo su GitHub e non usarlo mai più. Se dovessi creare qualcosa, dovrebbe essere usato in ogni progetto che ho realizzato.
Per prima cosa affrontiamo il CSS. Ricorda il primo obiettivo: "Sii piccolo, ma potente"
*, *: after, *: before margin: 0; padding: 0; / * Rimuove il comportamento del padding in larghezza * / -webkit-box-dimensionamento: border-box; -moz-box-dimensionamento: border-box; dimensionamento della scatola: border-box; / * Selettore di attributi * / [class * = 'bit-'] float: left; imbottitura: 10px; / * Fa fluttuare l'ultima ".bit-" a destra * / [class * = 'bit -']: last-of-type padding-right: 10px; float: giusto; / * Clearfix * / .frame: after content: ""; display: tabella; chiaro: entrambi;
Essenzialmente questa è la spina dorsale della griglia; questo è ciò che fa funzionare la griglia e tiene insieme il tutto.
L'impostazione di border-box con un selettore universale ci impedisce di preoccuparci del riempimento dei nostri elementi che incasina le nostre larghezze.
Mentre siamo sul tema dei selettori, il più grande killer spaziale nella nostra griglia è il selettore di attributi. Puoi vedere il selettore dell'attributo in azione dove ho usato [Class = * 'bit-']. Ciò riguarda tutti gli elementi il cui attributo di classe contiene "po-". Potremmo anche averlo usato [Class = ^ 'bit-'] che si rivolge a tutti gli elementi in cui la classe inizia con "bit-". L'utilizzo di un selettore di attributi per comprendere tutte le nostre varie classi di colonne ci farà risparmiare così tanto tempo durante la scrittura di nuove larghezze di colonne.
Un'altra cosa da notare è l'uso di un selettore di ultimo tipo [Class = * 'po -']: last-of-type. Ogni riga di "bit-" s sarà contenuta all'interno di a telaio elemento:
Usando il selettore di ultimo tipo possiamo mirare all'ultimo elemento "bit-" nel gruppo, istruendolo a fluttuare a destra, invece che a sinistra. Ciò assicura che tutto si allinea perfettamente contro il lato destro, nel supporto dei browser.
Una domanda comune che sento molto riguardo a Lemonade è: "Perché nomi di classe così bizzarri?" Non è una storia eccitante, ho semplicemente continuato a riferirmi alle colonne come "bit" nei miei appunti, quindi è sorta di escalation da lì. Dicendo ciò, penso che inconsciamente volevo che le classi fossero diverse dallo standard "col-1" visto in molti altri sistemi di grid.
Ho generato le larghezze delle colonne usando una calcolatrice (vedi, non devi essere un nerd matematico). Calcolare le colonne non è stato affatto difficile, infatti è stato davvero facile. Ad esempio, nella mia griglia, ogni bit è una frazione dell'intera larghezza, bit-8 è un ottavo. Quindi 100 ÷ 8 = 12,5, quindi impostiamo la larghezza di ogni bit-8 al 12,5%.
Ho accuratamente testato ogni sezione di colonna con contenuti reali e funzionano perfettamente su diversi browser e dispositivi.
/ * Larghezze principali * / .bit-1 larghezza: 100%; .bit-2 larghezza: 50%; .bit-3 larghezza: 33,33%; .bit-4 larghezza: 25%; .bit-5 larghezza: 20%; .bit-6 larghezza: 16.6666666667%; .bit-7 larghezza: 14.2857142857%; .bit-8 larghezza: 12.5%; .bit-9 larghezza : 11.1111111111%; .bit-10 larghezza: 10%; .bit-11 larghezza: 9.09090909091%; .bit-12 larghezza: 8.33%;
Ora, come puoi vedere, le larghezze sono super pulite, leggibili e questo è quello che volevo inizialmente: puoi facilmente vedere cosa è cosa e se necessario, puoi fare confusione e modificare le dimensioni con facilità.
Editing Lemonade è piacevolmente semplice. I sistemi di griglie sono spesso intimidatori da modificare, quindi mi sono sfidato a rendere il mio il più semplice possibile. L'unica regola per personalizzare la limonata è: finché le colonne sono pari al 100%, funzionerà perfettamente. Aggiungere i propri bit è semplice, poiché i selettori degli attributi si occupano della maggior parte della struttura della griglia:
.bit-25 larghezza: 25%; bit-75 larghezza: 75%;
Questi due in combinazione andrebbero bene.
Rendendolo reattivo è stato piuttosto impegnativo, per renderlo perfetto su ogni dispositivo e determinare i punti di interruzione, è stato estremamente frustrante. Lascia che ti guidi attraverso il codice. Ho scelto di lavorare desktop down, piuttosto che mobile in primo luogo, ma dipende interamente da te quale approccio preferisci.
Abbiamo già impostato le larghezze di base, quindi ora utilizziamo i dispositivi tra 800px e 1100px:
/ * tablet di base in stili desktop piccoli * / @media (larghezza minima: 800px) e (larghezza massima: 1100px) .bit-2, .bit-7 larghezza: 100%; .bit-4, .bit-8, .bit-10, .bit-12 width: 50%;
Potremmo descriverlo in modo approssimativo come targeting di Landscape Tablet to Desktop (benché sappiate che le larghezze dei dispositivi non sono affatto impostate in pietra). Questo era importante tanto quanto le altre domande sui media: perché? Poiché ho scoperto che la maggior parte delle persone che posseggono notebook da 13 "raramente hanno il browser a larghezza intera, avranno un paio di centinaia di pixel in meno rispetto alla larghezza totale, quindi quello che sembra buono sul tablet del panorama, deve avere un bell'aspetto anche sul desktop.
/ * stili della tavoletta di base * / @media (larghezza massima: 800px) .bit-4, .bit-6, .bit-8, .bit-10, .bit-12 larghezza: 50%; .bit-1, .bit-2, .bit-3, .bit-5, .bit-7, .bit-9, .bit-11 width: 100%;
Questa gamma mi piace pensare come targeting per dispositivi mobili per tablet (anche se, ancora una volta, la definizione di dispositivi per risoluzione dello schermo è territorio roccioso). Perché i punti di rottura strani? Niente di troppo pazzo, è proprio quello che ha funzionato meglio - le griglie sono molto noiose quando si tratta di quanto devono essere rigide le larghezze, e ho trovato che questi punti di rottura funzionavano bene in natura.
L'unicità delle dimensioni delle colonne era piuttosto difficile da creare e questo è stato in realtà ciò su cui ho dedicato la maggior parte delle mie ricerche; cosa vedi di solito sul desktop che cambia radicalmente sui dispositivi mobili? Principalmente contenuti in linea che diventano contenuti impilati - quindi ho dovuto pensare a ciò che è più che probabile che verrà affiancato e ciò che sarà impilato uno sopra l'altro.
/ * stili mobili base - tutto 100% * / @media (larghezza massima: 480px) .bit-1, .bit-2, .bit-3, .bit-4, .bit-5, .bit-6 , .bit-7, .bit-8, .bit-9, .bit-10, .bit-11, .bit-12 width: 100%;
Questo punto di interruzione riguarda ciò che la maggior parte delle persone riconoscerebbe come mobile. Ho cercato di essere più creativo impostando le larghezze per i dispositivi mobili, ma sentivo che avevo bisogno di mantenerlo di base, come immagino la maggior parte delle persone non stia cercando una sorta di layout della metropolitana o qualcosa di troppo pazzo del genere.
L'HTML è super semplice e questo è il bello di questa griglia. Per continuare con il nostro esempio, creiamo una colonna a tre griglia (potrebbe essere una galleria, per esempio).
Ecco qua, una galleria reattiva e compatibile con tre colonne. Puoi, ovviamente, giocare con l'HTML e creare tutti i tipi di layout.
Building Lemonade è stata una grande curva di apprendimento per me, mi ha insegnato che se non mi trovo a mio agio con qualcosa allora non devo restare in attesa e aspettare alternative - Posso creare il mio!
Spero che questo tutorial ti abbia dato un'idea di come creare cose davvero fantastiche. Dai un'occhiata ad alcuni siti in natura, per vedere come altri l'hanno usato:
Se hai domande o problemi, lascia un commento qui sotto o sentiti libero di twittare me.
Accentsconagua
