Share
Sei contento di avere una delle librerie di griglia CSS disponibili? No? Non ti biasimo. Inserisci Susy, un plug-in per il framework CSS di Compass che ti consente di creare il tuo framework griglia personalizzato, riducendo al minimo il sovraccarico, rendendolo più comprensibile da usare. Sembra buono, giusto? Facciamo un salto.
Non ho intenzione di approfondire la questione su Compass o SCSS (la lingua in cui scrivi il CSS), ma sentiti libero di fare riferimento al nostro CSS Sostenibile con il corso Sass e Compass Premium, se vuoi saperne di loro.
Puoi creare tre diversi tipi di griglie: statico, fluido e magico.
Le odierne librerie di grid popolari sembrano essere insufficienti in un modo o nell'altro. Le griglie come 960 e Blueprint sono entrambe griglie statiche con valori di pixel molto specifici. La visualizzazione di queste griglie su schermi di dimensioni inferiori a 950 pixel risulta in barre di scorrimento orizzontali, la rovina del Web.
Le griglie dei fluidi sono difficili da ottenere correttamente, ma alcune esistono. Gran parte delle griglie fluide funzionano con percentuali anziché pixel, ma tendono ad avere una dimensione massima e rendono impossibile scalare una larghezza massima rispettabile. Di per sé, un layout fluido è quasi tanto dannoso quanto un layout fisso, perché mentre si ottiene una copertura migliore dei computer desktop, i dispositivi mobili tendono a soffrire di un layout peggiore. In questa particolare situazione, una griglia statica ti offre un'esperienza migliore. Sì, è necessario scorrere orizzontalmente su dispositivi con una risoluzione più bassa, ma i sistemi basati su percentuale di solito finiscono con una colonna che è, ad esempio, il 10% di 480px. Ciò provoca una divisione verticale nel testo.
Una soluzione a questo problema è CSS media query. Alcune delle librerie più popolari, come la "griglia 1140" e la "griglia di scaffalature Bootstrap", sono dotate di query multimediali preimpostate. La griglia 1140 ha un layout fluido, ma le dimensioni ridotte dello schermo fanno sì che le colonne si sovrappongano l'una sull'altra.
Le griglie dei fluidi sono difficili da ottenere correttamente ...
La griglia di scaffalature di Bootstrap, d'altra parte, incorpora diversi layout statici. Quando le dimensioni dello schermo cambiano, Bootstrap cambia il layout in quello più adatto alle dimensioni dello schermo corrente. Una volta raggiunto lo schermo di un dispositivo mobile, Bootstrap carica la stessa configurazione della griglia 1140, un layout fluido con tutte le colonne impilate l'una sull'altra.
Cosa c'è di sbagliato nella scelta di uno di questi? Beh, tecnicamente niente, ma non sono fatti su misura per la tua app specifica. Questo ti costringe a costruire la tua app nella loro griglia e ad aggirare i limiti del framework. Puoi sempre modificare il loro framework, ma potresti anche crearne uno personale e sbarazzarti delle funzioni overhead non necessarie.
Come ho detto prima, Susy è un plugin per il framework Compass che offre una vasta gamma di mix-in per creare le tue griglie CSS. Basta specificare il numero predefinito di colonne e alcune opzioni di dimensione (larghezza della colonna, riempimento della griglia, ecc.) E Susy calcola le percentuali corrette per i propri elementi. Questo ti dà la possibilità di cambiare il numero di colonne e le loro dimensioni.
Puoi creare tre diversi tipi di griglie: statico, fluido e magico.
Sai già quali sono le griglie statiche e fluide; diamo un'occhiata a quali griglie "magiche" ti danno. Le griglie magiche hanno un elastico all'esterno e un fluido all'interno. In altre parole, l'esterno della griglia (larghezza massima) si regola in base alla dimensione del carattere predefinito del browser (i browser desktop di solito hanno un valore predefinito di circa 16px). La griglia si ridimensiona all'interno in base alla larghezza effettiva del browser. Questa combinazione offre al tuo sito un aspetto più coerente attraverso i browser, pur continuando a supportare schermi più piccoli.
Susy fornisce un mix-in chiamato "at-breakpoint", che consente di impostare CSS personalizzati in base alle dimensioni dello schermo. Questo mix-in realizza questa impresa con le query multimediali CSS. Ad esempio, puoi riorganizzare le colonne per impilarle l'una sull'altra come nei framework precedentemente discussi e puoi anche rimuovere il contenuto che non si adatta a un dispositivo mobile.
Presumo che tu abbia già installato Compass, ma in caso contrario, puoi fare riferimento alle serie di video di Jeffrey. Per installare Susy, basta aprire una riga di comando Ruby e digitare quanto segue:
sudo gem installa susy
Quindi crea un progetto Compass. Digitare quanto segue:
bussola crea nome_programma -r susy -u susy
Dovresti vedere una pagina informativa, che spiega come iniziare.
All'interno della directory appena creata, dovresti vedere due cartelle insieme a un file di configurazione. Potrai modificare i file che risiedono nel insolenza directory; Compass compila questi file per produrre il CSS finale nella cartella dei fogli di stile.
Per risparmiare tempo nel compilare i file CSS dopo ogni aggiornamento, puoi usare Compass ' orologio comando per fare in modo che Compass ricompili automaticamente i tuoi file ogni volta che salvi un aggiornamento. Quindi, nella finestra del terminale digita il seguente comando:
orologio da bussola
Compass inizierà ora il monitoraggio e la ricompilazione dei file nel insolenza cartella. Tenere presente che è necessario tenere aperta la finestra del terminale per monitorare la cartella; se si utilizza il terminale per la modifica dei file (ad es. vim), è necessario aprire un'altra finestra.
Ora che hai tutto configurato, diamo un'occhiata alla mia demo rapida. Ho intenzione di mantenere l'HTML breve perché è il CSS per cui siamo veramente qui. La demo è un gestore ospite dell'evento che elenca gli ospiti invitati e tiene traccia di chi RSVP'd. È un'idea semplice che mette in mostra molti dei concetti discussi.
Dal punto di vista HTML, ci sarà un'area di intestazione seguita da una riga con il nome dell'evento, alcuni controlli e infine l'elenco effettivo degli ospiti. Puoi dare un'occhiata all'immagine qui sotto per capire meglio il layout.
Ecco l'intera pagina HTML per la demo:
Plan It! Gestore ospiti dell'evento
Lista degli ospiti per - John's Wedding
Aggiungi dai contatti Aggiungi nuovo ospite
Nome Telefono Cellula Stato RSVP Dave K. Samten [email protected] 708-6777 360-234-1192 Confermato Bob Renper [email protected] 537-4267 621-124-4294 Confermato Kevin D. Turner [email protected] 942-2674 930-654-4144 RSVP
Susy usa min-width per le query multimediali per impostazione predefinita; quindi, si inizia definendo il CSS per il layout più piccolo e poi si espande gradualmente il layout con le crescenti dimensioni dello schermo. La versione "mobile" separa la tagline e i pulsanti sulle proprie linee e facciamo in modo che tutto riempia la larghezza della pagina.
Io uso un altro plug-in Compass, chiamato Sassy Buttons, per generare il CSS dei pulsanti. Non è parte integrante di questa demo, ma puoi installarla digitando quanto segue in un terminale:
gem install sassy-buttons
Quindi aggiungi la seguente riga al tuo config.rb file:
richiedere 'pulsanti impertinenti'
Definiamo il layout. Aperto _base.scss nel insolenza cartella. Questo file contiene tutto il importare affermazioni e variabili di cui abbiamo bisogno in seguito. Sostituisci tutto all'interno di quel file con quanto segue:
@import "susy"; // se vuoi usare i pulsanti plugin @import "sassy-buttons"; // questo è il numero predefinito di colonne $ total-columns: 5; // larghezza di ogni colonna $ column-width: 4em; // spazio tra le colonne $ gutter-width: 1em; // spazio a destra e a sinistra della griglia $ grid-padding: $ gutter-width; // punti di interruzione di layout alternativi $ tablet: 8; $ computer: 55em 12;
Di per sé, un layout fluido è quasi tanto male quanto un layout fisso ...
Il totali colonne detiene il numero predefinito di colonne per la visualizzazione più piccola nel tuo layout.
Sono andato con tre layout totali: mobile, tablet e computer. I punti di interruzione di Susy consentono di eseguire operazioni come l'impostazione delle dimensioni min e max per le query multimediali e persino l'aggiunta di supporto speciale per Internet Explorer. Ho intenzione di mantenere questo esempio semplice e di coprire solo due tipi.
Il punto di interruzione della tavoletta si attiva quando lo schermo può contenere otto colonne. Il punto di interruzione del computer si attiva quando lo schermo è largo almeno 55em e 12 nel $ computer: 55em 12; dice a Susy di passare a dodici colonne.
Ora salva questo file e aprilo screen.scss. Cancella tutto nel file e importa il file di base. Definiamo anche il contenitore principale:
@import "base"; body background: # F7F3E8; a decorazione del testo: nessuna; .container @include container ($ total-columns, $ tablet, $ computer);
Si noti che non è necessario il trattino basso o l'estensione del file quando si importa base file. All'interno della classe contenitore, utilizziamo il primo mixaggio Susy che definisce i diversi layout per la griglia. Quindi, è solo regolare SCSS per il layout mobile:
Accentsconagua
#header font-weight: 700; font-size: 72px; span font-weight: 300; font-size: 18px; blocco di visualizzazione; #controls #buttons margin-bottom: 5px; #phonebook @include sassy-button ("simple", 6px, 14px, # 337EC4); #newguest margin-top: 5px; @include sassy-button ("simple", 6px, 14px, # D93131); table width: 100%; thead color: #FEFEFE; sfondo: # 000; th text-align: left; font-weight: 500; padding: 10px; tbody border: 3px solid # 000; tr background: # E5E5E5; tr.alt background: #EEEEEE; .buttoncell .confirm @include sassy-button ("simple", 6px, 14px, # F39B06); .unconfirm @include sassy-button ("flat", 6px, 14px, # 3BA06F); .email display: none; .phone display: none; Come puoi vedere nelle ultime due righe, nascondo le colonne email e telefono nella tabella in modo che la pagina si adatti normalmente a un dispositivo mobile. Come best practice, offri all'utente un modo diverso di visualizzare le informazioni complete (ad es. Modale, altra pagina), ma lo lascio fuori per amore della semplicità di questo esempio.
Ora abbiamo completato il CSS di base per il sito Web mobile e possiamo iniziare a modificare il layout con i punti di interruzione. Ecco una rapida schermata che ho preso sul mio iPhone della versione mobile:
Il primo punto di interruzione che dobbiamo implementare è la versione tablet; ricorda, dobbiamo iniziare prima con il layout più piccolo. Le dimensioni del tablet sono abbastanza grandi da mettere la tagline sulla propria linea e possiamo anche visualizzare la colonna email. Sfortunatamente, non è ancora abbastanza grande da mettere il nome dell'evento e i pulsanti sulla stessa riga. Ecco lo SCSS per questo punto di interruzione:
@include at-breakpoint ($ tablet) body .container #header span display: inline; table .email display: table-cell;
Qui non ci sono comandi "magici", solo SCSS standard all'interno di un mixaggio di Susy. Ecco uno screenshot da un iPad del layout del tablet:
Infine, implementiamo la versione desktop. Abbiamo sicuramente più spazio per tutte le colonne; pertanto, indentiamo la tabella su entrambi i lati in modo che non abbia troppo spazio. Spostiamo anche i pulsanti sulla stessa riga del nome dell'evento, allineandolo sul lato destro, per centrare il tavolo (almeno visivamente). Ecco quel codice:
@include at-breakpoint ($ computer) body .container #controls #menutitle @include span-columns (5); margin-top: 5px; #buttons text-align: right; @include span-columns (5 omega); table @include prefix (1); @include suffix (1); .cell display: table-cell;
Questa è la prima volta che usiamo il Span colonne mix-in. Susy prende qualsiasi valore tu passi per calcolare la percentuale di larghezza del contenitore. Il omega parola chiave dice a Susy che questa è la colonna finale nella riga. Ciò rende Compass mobile la colonna a destra e rimuove il margine destro.
Il
prefissoesuffissoi mix-ins spingono il contenitore x la quantità di colonne da sinistra e destra rispettivamente.
Ora puoi salvare questo file e lasciare che la bussola lo compili nei CSS. Se hai aggiunto il plugin di pulsanti sassy dopo aver avviato il orologio da bussola comando, devi fermare il comando watch (scorciatoia: CTLR-C) e riavviarlo per compilare SCSS.
Questa è una breve introduzione a Susy. Per un elenco più completo di funzionalità, è possibile visitare la documentazione di Susy.
Spero che questo articolo ti sia piaciuto e ti ringrazio per la lettura. Come sempre, sentiti libero di lasciare commenti o domande nella sezione commenti. Puoi anche contattarmi su Twitter - @GabrielManricks e cercherò di risponderti al più presto.
