Share
Hvis du bruker Sass, bruk Bourbon og vil bruke et smart gridramme for lette oppsett, kan Neat bli en pålitelig følgesvenn i overskuelig fremtid. I dette korte introduksjonsstykket vil jeg gi deg et par fornuftige grunner for å gi dette unopinionated grid-rammen et skudd.
Bourbon Neat ble oppfattet av Reda Lemeden og er en del av den fantastiske Bourbon-pakken. Det er et lett, responsivt gridramme, bygget på toppen av Sass og Bourbon. Prosjektet selv støttes av thoughtbot og deres designere tar vare på det.
Før vi installerer noe, la meg gi deg et par gode grunner til å se på det. Det finnes utallige rammer som lover å levere en stabil ramme for å utvikle designene dine. Og de fleste av dem lykkes sikkert på en eller annen måte. Men i hvilken grad? Spør deg selv:
Hvis svar på noen av problemene ovenfor er lydende alarmklokker, vil jeg bare forsikre deg om at slike hodepine er lett å unngå i disse dager. Det er veldig sjelden å komme over et prosjekt som balanserer utbetalingene sine så vel som Bourbon Neat (Eller bare "Ryddig" for kort). Hvorfor det? Her er et par gode grunner:
Bourbon har også som mål å gi deg muligheter, ikke svar. Det jeg spesielt liker er at det ikke er en fabrikk for generiske, forhåndsdefinerte stiler. På den måten hjelper det designerens egne designbeslutninger uten å stå i veien.
Dette er et viktig problem, men jeg vil gjøre det kort: stygg presentasjonsklasser og ytterligere tomme wrapper divs som du ofte finner i front-end-biblioteker, er spøkelser fra fortiden (minst de bør være spøkelser). Ryddig spiller en viktig rolle i å bevege seg forbi disse gnarly semantiske vaner. Det hjelper deg med å skrive rent, diskret oppslag, og ha alle ristestilene dine skikkelig skilt i stilarkene dine ved hjelp av mixins.
Hvorfor håndtere gridrammer i det hele tatt? Vel, design handler om relasjoner og forhold kan være vanskelig. Gitter gjør dem enklere ved å hjelpe deg å knytte strukturer sammen på en mer meningsfylt og organisert måte. De forenkler, reduserer og stabiliserer, i hovedsak, de bidrar til å trimme fettet ut av design. Ryddig oppnår dette med bare fjorten mixins ...
Accentsconagua
reset-layout-retningenretning-kontekstskiftinntegn-sammenhengskjerm-kontekstytre beholder-span-kolonnerreset-skjermfylle-foreldreTilbakestill altomegamediaskiftepadrad... en enkelt funksjon for å sette brytpunkter ...
ny-stoppunkt... og tolv variabler for innstillinger:
default-layout-retningenvisuelle-gitter-opasitetborder-box-sizingvisuelle-gitter-indeksdeaktivere-advarslervisuelle-gitter-fargedefault-funksjonenrutenett-kolonnermax breddevisual-gitterkolonnegrøftBoom, det er det! Ganske lav nøkkel, men den utstyrer deg med mye hestekrefter!
Endring og Behov for fleksibilitet er konstant fremtidssikre nødvendigheter. Inkludering av medieforespørsler bør være glatt og lett håndterlig, men de kan raskt bli et rot hvis de ikke håndteres med forsiktighet.
Bourbon Neat oppfordrer a TØRKE tilnærming til å håndtere dine pausepunkter med sin "nye pause" -funksjon. Lagre pause i variabler og resirkulere dem hvor du trenger. Å bytte en rekke medieforespørsler på ett sted er vanskelig å slå.
For å være mer konkret, la meg gi deg et eksempel. Her er en tilfeldig Sass-kodebrikke ved hjelp av funksjonen "New-Breakpoint" for media-spørringer:
$ mobil: nytt bruddpunkt (maksimal bredde 500px 4) .sidebar + spansøyler (3) + media ($ mobile) + spansøyler (1) .content + spansøyler (9) + media + span-kolonner (3)
For øyeblikket, ikke bekymre deg for mye med blandingene som brukes i dette eksemplet. I de kommende opplæringsprogrammene vil jeg dykke dypere inn i det nitty-gritty av dette. Hva som skal være tydelig i dette eksemplet, er imidlertid brukervennlighet hvis du bestemmer deg for å endre medieforespørsler. Gjennom bruk av Sass-variabler og denne funksjonen, har du et konsistent, autoritativt sted å endre og justere ditt responsive layout uten å berøre hvert element individuelt.
Nå som du vet hva du får deg til, la oss installere denne skjønnheten:
Merk: du må installere Sass før du starter.)
Ta en titt på min veiledning om Bourbon hvis du trenger å følge dette trinnet.
Dette gjøres via RubyGems, slik som:
perle installasjon ryddig
Via kommandolinjen, bytt til en Sass-katalog du velger, og kjør deretter:
ryddig installasjon
Dette vil installere alle nødvendige mixins, innstillinger og funksjoner i din utpekte katalog.
@import 'bourbon / bourbon' @import 'rutenett-innstillinger' @import 'ryddig / ryddig'
Merk: Importordren er viktig her. Fordi Neat ble bygget på toppen av Bourbon, må du først importere Bourbon. Det samme gjelder for sin rutenett-innstillinger.
Hvis du vil bruke Neat med Rails, må du legge til:
perle pent
til Gemfile.
Kjør deretter:
bunt installasjon
i terminalen din.
I "application.sass" må du da legge til:
@import 'bourbon' @import 'rutenett-innstillinger' @import 'ryddig'
og du er god til å gå. Husk det, det @importere Spiller ikke bra med Sprockets-direktiver, og derfor må du slette referanser. I "application.sass", "require", "require_tree" og "require_self" må du gå.
Sist men ikke minst har de fine folkene på thoughtbot gitt oss et flott kommandolinjegrensesnitt. Den kommer med tre selvforklarende kommandoer:
ryddig installere ryddig oppdatering, slett fjerne
Ved hjelp av intelligente verktøy som dette, er det en glede å jobbe med grids. Dette rammeverket gjør en god jobb med å planlegge for utviklerens lykke (lang og kort sikt).
I den neste opplæringen tar vi et nærmere, mer teknisk utseende på hvordan du bruker Neat.
