Share
Se usi Sass, divertiti con Bourbon e vorresti usare un framework smart grid per layout leggeri, Neat potrebbe davvero diventare il tuo compagno fidato per il prossimo futuro. In questo breve pezzo introduttivo ti fornirò un paio di motivi sensati per dare un colpo a questa struttura di griglia senza precedenti.
Bourbon Neat è stato concepito da Reda Lemeden e fa parte della fantastica suite Bourbon. È una struttura di griglia leggera e reattiva, costruita su Sass e Bourbon. Il progetto stesso è supportato da thoughtbot e i loro designer si prendono cura di esso.
Prima di installare qualcosa, lascia che ti dia un paio di buoni motivi per esaminarlo. Esistono innumerevoli framework che promettono di fornire una cornice stabile per lo sviluppo dei tuoi progetti. E la maggior parte di loro certamente riesce in un modo o nell'altro. Ma fino a che punto? Chiedilo a te stesso:
Se le risposte a uno dei problemi sopra riportati suonano campanelli d'allarme, voglio solo assicurarti che questi mal di testa sono facilmente evitabili in questi giorni. È molto raro imbattersi in un progetto che bilancia i suoi profitti così bene come Bourbon Neat (o semplicemente "Neat" in breve). Perchè così? Ecco alcuni buoni motivi:
Bourbon ha anche lo scopo di fornire opzioni, non risposte. Quello che mi piace in particolare è che non è una fabbrica per stili generici e predefiniti. In questo modo aiuta le decisioni progettuali del designer senza intralci.
Questo è un problema importante, ma lo farò breve: brutto lezioni di presentazione e aggiuntivo div wrapper vuoto che spesso trovi nelle librerie front-end sono i fantasmi del passato (almeno loro dovrebbero sii fantasma). Neat svolge un ruolo significativo nel superare queste nodose abitudini semantiche. Ti aiuta a scrivere un markup pulito e discreto, e tutti i tuoi stili di griglia vengono separati in modo pulito nei tuoi fogli di stile tramite mixin.
Perché trattare con un framework di rete? Bene, il design è interamente basato sulle relazioni e le relazioni possono essere difficili. Le griglie li rendono più facili aiutandoti a legare le strutture in un modo più significativo e organizzato. Semplificano, riducono e stabilizzano - in sostanza, aiutano a tagliare il grasso dai disegni. Neat realizza questo con solo quattordici mixin ...
Accentsconagua
reset-Layout-direzionedirezione contestoshift-in-contextDisplay-contextesterno-contenitoreSpan colonnereset-Displayfill-genitoreresetta tuttoomegamediacambiotamponeriga... una singola funzione per impostare i punti di interruzione ...
new-breakpoint... e dodici variabili per le impostazioni:
default-layout direzionevisual-grid-opacitàborder-box-sizingvisual-grid-indexdisable-avvertimentivisual-grid-coloredefault-funzioneGriglie di colonnelarghezza massimavisual-gridcolonnagrondaiaBoom, è così! Abbastanza basso, ma ti equipaggia con un sacco di potenza!
Modificare e il bisogno di flessibilità sono costanti necessità a prova di futuro. Includere le domande dei media dovrebbe essere semplice e facile da gestire, ma possono diventare rapidamente un disastro se non gestite con cura.
Bourbon Neat incoraggia a ASCIUTTO approccio per la gestione dei punti di interruzione con la sua funzione "nuovo punto di interruzione". Salva i punti di interruzione nelle variabili e riutilizzale ovunque ti serva. Cambiare un sacco di domande sui media in un posto è difficile da battere.
Per essere più concreto, ti faccio un esempio. Ecco un snippet Sass casuale che utilizza la funzione "new-breakpoint" per le query multimediali:
$ mobile: new-breakpoint (max-width 500px 4) .sidebar + span-columns (3) + media ($ mobile) + span-columns (1) .content + span-columns (9) + media ($ mobile) + campata colonne (3)
Per ora, non preoccuparti troppo dei mixin usati in questo esempio. Nei prossimi tutorial mi tufferò più in profondità nel nocciolo di ciò. Ciò che dovrebbe essere evidente in questo esempio, tuttavia, è la facilità d'uso se si decide di modificare le query multimediali. Attraverso l'uso delle variabili di Sass e questa funzione, avrai un posto coerente, autorevole per cambiare e modificare il tuo layout reattivo, senza toccare ogni elemento singolarmente.
Ora che sai in cosa ti stai immedesimando, installiamo questa bellezza:
Nota: hai bisogno di Sass installato prima di iniziare.)
Dai un'occhiata al mio tutorial su Bourbon se devi seguire questo passaggio.
Questo viene fatto tramite RubyGems, in questo modo:
gem installare pulito
Tramite la riga di comando, cambia in una directory Sass di tua scelta, quindi esegui:
installazione pulita
Questo installerà tutti i mixin, le impostazioni e le funzioni necessarie nella directory designata.
@import 'bourbon / bourbon' @import 'impostazioni della griglia' @import 'neat / necklace'
Nota: l'ordine di importazione è importante qui. Poiché Neat è stato costruito su Borbone, devi prima importare Bourbon. Lo stesso vale per il suo grid-settings.
Se si desidera utilizzare Neat con Rails, è necessario aggiungere:
gioiello pulito
al tuo Gemfile.
Quindi esegui:
installazione bundle
nel tuo terminale.
In "application.sass" dovrai aggiungere:
@import 'bourbon' @import 'grid-settings' @import 'neat'
e sei a posto. Ricorda però, quello @importare non sta giocando bene con le direttive Sprockets e quindi dovrai cancellare i loro riferimenti. In "application.sass", "require", "require_tree" e "require_self" devono andare.
Ultimo ma non meno importante, la brava gente di thoughtbot ci ha fornito una bella interfaccia a riga di comando. Viene fornito con tre comandi autoesplicativi:
pulito installare pulito aggiornamento pulito rimuovere
Usando strumenti intelligenti come questo, è una gioia lavorare con le griglie. Questo framework fa un ottimo lavoro nella pianificazione della felicità degli sviluppatori (a lungo e breve termine).
Nel prossimo tutorial faremo uno sguardo più vicino e più tecnico su come usare Neat.
