Share
Dacă utilizați Sass, bucurați-vă de utilizarea Bourbon și doriți să utilizați un cadru de rețea inteligent pentru layouts ușoare, Neat ar putea deveni foarte bine partenerul dvs. de încredere pentru viitorul previzibil. În această piesă scurtă de introducere vă voi oferi câteva motive întemeiate pentru a oferi cadrului grilei neopionizate o șansă.
Bourbon Neat a fost conceput de Reda Lemeden și face parte din fantasticul suite Bourbon. Este un cadru ușor și receptiv, construit pe vârful Sass și Bourbon. Proiectul în sine este susținut de thinkbot și designerii lor au grijă de el.
Înainte de a instala ceva, permiteți-mi să vă dau câteva motive întemeiate să vă uitați în ea. Există nenumărate cadre care promite să aducă un cadru stabil pentru dezvoltarea proiectelor tale. Și cele mai multe dintre ele reușesc într-un fel sau altul. Dar în ce măsură? Intreaba-te pe tine insuti:
Dacă răspunsurile la oricare dintre problemele de mai sus au sunet de clopote de alarmă, vreau doar să vă asigur că astfel de dureri de cap sunt ușor de evitat în aceste zile. Este foarte rar să întâlniți un proiect care echilibrează plățile sale atât de bine ca Bourbon Neat (sau pur și simplu "Neat" pe scurt). De ce? Iată câteva motive bune:
De asemenea, Bourbon își propune să vă ofere opțiuni, nu răspunsuri. Ceea ce îmi place mai ales este faptul că nu este o fabrică pentru stiluri generice predefinite. În felul acesta ajută deciziile de proiectare proprii ale designerului, fără să stea în cale.
Aceasta este o problemă importantă, dar o voi face scurt: urât cursuri de prezentare și suplimentare încărcături goale goale pe care le găsiți adesea în bibliotecile front-end sunt fantome din trecut (cel puțin ele ar trebui să fi fantome). Neat joacă un rol semnificativ în mutarea în trecut a acestor obiceiuri semantice gnarly. Vă ajută să scrieți marcaj curat, discret și să aveți toate stilurile dvs. de grilă separate în foile dvs. de stil prin intermediul mixurilor.
De ce se ocupă de un cadru de rețea? Ei bine, design-ul este totul despre relații și relații poate fi greu. Grilele le ușurează, ajutându-vă să legați structurile împreună într-un mod mai semnificativ și mai organizat. Ele simplifică, reduc și stabilizează - în esență, ajută la tăierea grăsimilor din desene sau modele. Neat atinge acest lucru doar cu paisprezece amestecuri ...
Accentsconagua
reset-layout-direcțieDirecția contextshift-in-contextafișare contextexterior containerdeschideri-coloanereset-displayumple-părintereseteaza totomegamass-mediaschimbtamponrând... o singură funcție pentru setarea punctelor de întrerupere ...
nou-breakpoint... și douăsprezece variabile pentru setări:
default-aspect-direcțievizual-grid-opacitateborder-box-dimensionarevizual-grid indexdezactivați-avertismentevizual-grilă de culoaredefault-caracteristicagrile-coloanelățimea maximăvizual-grilăcoloanăjgheabBoom, asta e! Cheia destul de scăzută, dar vă echipează cu o mulțime de cai putere!
Schimbare si nevoia de flexibilitate sunt necesități constante în viitor. Incorporarea interogărilor media ar trebui să fie netedă și ușor de gestionat, dar ele pot deveni repede o mizerie dacă nu sunt tratate cu grijă.
Bourbon Neat încurajează a USCAT pentru abordarea punctelor de întrerupere cu funcția "nou-breakpoint". Salvați puncte de intersecție în variabile și le resetați ori de câte ori aveți nevoie. Schimbarea unei mulțimi de interogări media într-un singur loc este greu de învins.
Pentru a fi mai concret, permiteți-mi să vă dau un exemplu. Iată un fragment Sass aleator folosind funcția "new-breakpoint" pentru interogările media:
$ mobil: nou-breakpoint (max-lățime 500px 4). sidebar + coloane span (3) + media ($ mobile) + span-coloane (1) + deschideri de coloane (3)
Pentru moment, nu vă îngrijorați prea mult cu amestecurile folosite în acest exemplu. În tutorialele viitoare, mă voi arunca mai adânc în gâtlejul asta. Ceea ce ar trebui să fie evident în acest exemplu, totuși, este ușurința de utilizare dacă decideți să modificați interogările media. Prin utilizarea variabilelor Sass și a acestei funcții, veți avea un loc consecvent, autoritar, pentru a schimba și optimiza aspectul dvs. receptiv, fără a atinge fiecare element individual.
Acum, că știi la ce te implici, să instalezi această frumusețe:
Notă: veți avea nevoie de Sass instalat înainte de a începe.)
Uitați-vă la tutorialul meu despre Bourbon dacă trebuie să urmați acest pas.
Acest lucru se face prin intermediul RubyGems, la fel ca:
bijuterie instalați neted
Prin linia de comandă, treceți într-un director Sass ales de dvs., apoi executați:
instalare netedă
Aceasta va instala toate combinațiile necesare, setările și funcțiile din directorul dvs. desemnat.
@import 'bourbon / bourbon' @import 'grid-settings' @import 'neat / neat'
Notă: ordinul de import este important aici. Deoarece Neat a fost construit pe partea de sus a Bourbon-ului, trebuie să importați primul Bourbon. Același lucru este valabil pentru el grid-settings.
Dacă doriți să folosiți Neat cu Rails, va trebui să adăugați:
bijuterie îngrijită
la Gemfile.
Apoi rulați:
instalare pachet
în terminalul tău.
În "application.sass" va trebui să adăugați:
@import 'bourbon' @import 'grid-settings' @import 'neat'
și ești bine să pleci. Amintiți-vă de asta @import nu se joacă frumos cu directivele Sprockets și, prin urmare, va trebui să ștergeți referințele. În "application.sass", "require", "require_tree" și "require_self" trebuie să meargă.
Nu în ultimul rând, cei mai buni oameni de la gândurile noastre au oferit o interfață de linie de comandă. Se livrează cu trei comenzi explicite:
instalare neat curată actualizare neat eliminați
Folosind astfel de instrumente inteligente, este o bucurie care lucrează cu grilele. Acest cadru are o treabă excelentă în planificarea fericirii dezvoltatorilor (pe termen lung și pe termen scurt).
În următorul tutorial vom examina mai atent cum să folosim Neat.
