Share
960gs è stato fantastico! Quando la maggior parte dei visitatori del tuo sito utilizzava desktop con monitor di almeno 1024 pixel, 960gs rendevano semplice la progettazione di un sito in codice. Tuttavia, con l'avvento della proliferazione dei dispositivi e della prevalenza delle query sui media, i siti a larghezza fissa sono decisamente meno efficaci dei layout reattivi.
In questo documento descriverò come prendere il tuo sito a larghezza fissa di 960gs e spostarlo nel framework di ZURB's Foundation. Senza divagare troppo, voglio essere onesto con 960gs e menzionare adapt.js, la risposta di questo framework al responsive web design. Ora, questo articolo tratterà le basi della griglia della Fondazione, il suo confronto con la griglia di 960gs e alcune opzioni extra con il Foundation's Sass. Per questo tutorial, presumo che tu abbia già familiarità con 960gs e che guardi Foundation come un modo per ottenere un design reattivo.
Per iniziare, è necessario comprendere i concetti di base di righe e colonne in Foundation. La convenzione di 960gs consisteva nell'utilizzare un mega container e fare affidamento su ciascuna combinazione di DIV per creare una riga. Così:
Potresti avere un gettato tra i DIV della griglia che aggiungono fino a 12, ma è facoltativo. Questo layout, in effetti, produrrebbe due righe con due colonne che dividono equamente la larghezza disponibile. Se aggiungi alfa e omega classi, spaccherà rispettivamente l'extra margin-left e margin-right.
Nelle classi HTML predefinite di Foundation, questo stesso layout sarebbe stato realizzato con il seguente snippet:
Non esiste un mega contenitore per Foundation, invece ci sono righe e righe che contengono colonne, e le colonne devono essere totali 12. Ogni colonna è definita aggiungendo il colonne classe accompagnata da almeno una classe per dettare la larghezza di quella colonna.
Per andare su una tangente breve, per quello che vale, la griglia di Foundation è simile alle righe e agli span di Twitter Bootstrap, eccetto Foundation che ti dà la possibilità di definire le larghezze delle colonne in più punti di interruzione.
Noterai la notazione medio-6. Ciò significa che al punto di interruzione medio (tuttavia definito, il valore predefinito è 641 pixel), vedrai sei colonne di larghezza o metà della larghezza disponibile. Un'altra classe può essere aggiunta per indicare quante colonne valgono la larghezza del div dovrebbe occupare altri punti di interruzione, inclusi piccolo e grande. Ecco come sarebbe:
La Fondazione è mobili-prima. Codice per schermi di piccole dimensioni, e dispositivi più grandi erediteranno tali stili. Personalizza per schermi più grandi, se necessario. fonte
Di default, Foundation è progettato in un primo concetto mobile. Ciò che questo significa per le griglie è che il piccolo la classe può essere utilizzata da sola per definire la larghezza di una colonna in corrispondenza del breakpoint piccolo e tutti i punti di interruzione sopra ereditati da quella medio o grande la classe non è presente. Il rovescio della medaglia, se si utilizza solo a medio classe, quindi il layout di breakpoint piccolo predefinito trasformerà i DIV in righe a colonna singola sovrapposte (equivalenti a piccolo-12) che è l'impostazione predefinita applicata alle colonne nel breakpoint piccolo.
Con tutto ciò in mente, le basi per cambiare il tuo markup sono le seguenti: Primo, il div con il contenitore la classe può essere cancellata. Avanti, intorno al tuo griglia_# I DIV che compongono "righe", dovrai creare un div con la classe riga. I singoli DIV contenenti griglia le classi possono essere cambiate in medio-#.
Questo ti darà qualcosa che assomiglia moltissimo al tuo vecchio layout 960gs per viewport superiori a 640 pixel e al di sotto di quella larghezza, avrai solo pile di righe a tutta larghezza, il che significa che ogni colonna div cambierà al 100% della larghezza.
Ecco alcuni concetti di 960gs tradotti nel linguaggio di fondazione:
Nel 960gs, l'annidamento potrebbe essere ottenuto aggiungendo alfa alla prima colonna della tua riga e omega fino all'ultimo, rimuovendo efficacemente i margini orizzontali. Quando si utilizza questo approccio, le righe nidificate dovevano essere una somma della larghezza della colonna in cui vivevano le colonne nidificate.
In Foundation, l'annidamento è fatto per te, devi solo inserire una riga all'interno di una colonna. Non sono richieste classi extra. L'altra differenza principale è che ogni fila di nidi assume 12 nuove colonne nello spazio nido disponibile. Quindi una fila dentro a medio-6 ti permetterà di dividere quelle sei colonne in 12.
Le classi di prefisso e suffisso di 960gs erano eccellenti classi di utilità per la creazione di spazi vuoti nel layout e un mezzo per centrare. La Fondazione ha le stesse funzionalità, con Offset.
Questo è praticamente lo stesso in entrambi i framework. L'ordinamento delle fonti ti consente di creare le colonne in qualsiasi ordine desideri nel tuo HTML effettivo, ma farlo apparire in un diverso ordine da sinistra a destra. Per questo, puoi usare Spingere e Tirare classi.
Foundation copre tutte le funzionalità di 960gs e molto altro. Guarda i documenti per sapere tutto ciò che può fare.
Bene, questa è la ragione principale per cui ti trasferisci in qualcosa come la Fondazione: la reattività. Tu sai di grande, medio e piccolo punti di interruzione, ma ci sono anche XLarge e XXLarge. Ecco a cosa si riferiscono queste classi di breakpoint:
| Punto di rottura | Larghezza Viewport |
|---|---|
| piccolo | < 40em (640px) |
| medio | 40.063em (641 px) < 64em (1024px) |
| grande | 64.063em (1025px) < 90em (1440px) |
| XLarge | 90.063em (1441px)> 120em (1920px) |
| XXLarge | > 120.063em (1921px) |
Si noti che solo il piccolo, medio e grande i punti di interruzione possono essere utilizzati nel codice HTML. Se hai bisogno di usare XLarge o XXLarge, o se desideri personalizzare questi punti di interruzione, puoi utilizzare il lavoro con Sass per personalizzare Foundation in base alle tue esigenze.
La base è costruita per funzionare con Compass e Sass. Se Sass è qualcosa di tuo comodo, può facilitare lo sviluppo, leggi di più su come iniziare con Sass e Foundation.
Il professionista chiave per l'utilizzo di Sass è che invece di aggiungere classi specifiche di Foundation al tuo HTML, puoi semplicemente estendere gli attributi di Foundation in base al markup esistente. Ad esempio, quello esistente div con la classe notizia può essere fatto per imitare a grid-6 colonne div.
Ecco un esempio completo di come questo potrebbe apparire, diciamo che hai questo HTML:
Per ottenere una divisione 50/50 di .notizia e .eventi, il tuo Sass sarebbe simile a questo:
.main @include grid-row; .news @include grid-column (6); .events @ include grid-colmn (6);
Questo è l'equivalente di cambiare il markup a questo:
Se si desidera includere altri punti di interruzione nel SCSS, si utilizzerà semplicemente questa tecnica:
.main @include grid-row; .news @include grid-column (8); @media # $ large-up grid-column (6) .events @include grid-colmn (4); @media # $ large-up grid-column (6)
Che è lo stesso di:
La tecnica SCSS è carina perché mantiene le tue classi in ordine nel tuo codice HTML e ti consente di essere più semantico.
C'è ancora una cosa importante da capire su questo metodo. Se si sta compilando il CSS in un foglio di stile aggiuntivo separato, ma si desidera fare uso di Foundation mixins, dovrai importare ciò di cui hai bisogno, ma prevenire la duplicazione degli stili di base. Per evitare di aggiungere stili ridondanti al tuo output CSS, devi specificare il $ Include-html-classi variabile come falso, ecco come appare:
@import "foundation / settings"; $ include-html-classes: false; @import "fondazione";
Si noti che i percorsi possono variare in base alla propria configurazione. Ciò ti consentirà di utilizzare tutti i mixin, le funzioni e le impostazioni in Foundation, senza dover duplicare tutti i CSS. Questo è utile se stai già includendo il CSS di base sulla pagina su cui stai lavorando. Questo metodo potrebbe, ad esempio, essere utilizzato come luogo in cui memorizzare tutte le sostituzioni per una pagina speciale o un sottoinsieme di pagine.
Questa è solo la punta dell'iceberg: Foundation e Sass hanno molto di più da offrire ed entrambi hanno un ampio seguito di sviluppatori che continuano a renderli entrambi più avanzati e, meglio, meglio.
Accentsconagua