Share
Bourbon er et førsteklasses Sass mixin-bibliotek for designere. Den har en minimalistisk tilnærming og er seriøs om å skape kvalitetskode som bryr seg om semantikk. Bourbon-biblioteket oppfordrer også gode metoder for å utvikle skalerbar kode.
Faktisk, langt fra å være bare et mixin-bibliotek, har Bourbon vokst til en liten pakke prosjekter som vedlikeholdes av designerne på thoughtbot. I de neste opplæringsprogrammene skal jeg dekke alle follwingene i detalj:
For nå er her kjernen:
bourbon hovedsakelig gir et lite, men saftig sett av mixins og funksjoner som er hentet fra ulike designers Sass-kode. Tanken var å sentralisere nyttige mixiner og unngå å gjenoppfinne hjulet hele tiden.
Ryddig er et lett gridramme for Sass. Den er bygget på toppen av Bourbon og var motivert av behovet for en semantisk tilnærming til layoutsider.
påfyll er en samling av designmønstre, pent stylet eller ustylt. De er også designet med Bourbon og Neat. Super nyttige kodeeksempler står til din disposisjon.
bitters er noen stillas stiler, variabler og litt struktur for nye Bourbon prosjekter. De får deg i gang på kort tid.
Den originale Bourbon ble utgitt tidlig i 2011 av Philip LaPier, på den tiden digital produktdesigner på thoughtbot. Prosjektet startet ved å sentralisere ulike mixins fra ulike designere i selskapet.
I dag er Bourbon en førsteklasses Sass bibliotek for designere. Den har en minimalistisk tilnærming og er seriøs om å skape kvalitetskode som bryr seg om semantikk. Jeg liker det spesielt fordi det oppmuntrer til beste praksis for å utvikle god kode som skalerer.
Denne perlen hjelper designere til å skrive sin kode raskere og styrer mange nitty-gritty detaljer (som irriterende leverandør prefiks). Dens mixins fungerer ofte som wrappers for å utstede kvalitet CSS, men forblir som vanilje som mulig ved å holde seg til den opprinnelige CSS-syntaksen.
Akkurat da, la oss få dette til å flytte! Brann opp terminalen din, bytt til prosjektets katalog, og installer Bourbon via RubyGems:
bash $ gem install bourbon Merk: Hvis du ikke er helt komfortabel med kommandolinjen, sjekk ut vår nybegynnerserie Kommandolinjen for webdesign
Bytt til prosjektets stilark katalog og generer din bourbon mappe.
bash $ bourbon installasjon
Denne kommandoen genererer en bourbon-mappe som inneholder funksjoner, mixins, hjelpere og innstillinger som du trenger. Jeg anbefaler at du ikke berører denne mappen; det vil gi deg en mye jevnere opplevelse å oppdatere Bourbon i fremtiden.
Fullfør oppsettet ved å importere de genererte Sass-filene i stilarkene dine. Importer Bourbon på toppen av din application.sass fil og sørg for at du importerer andre Sass-filer under det:
I application.sass:
css @ import 'bourbon / bourbon' @import 'andre-sass-partials-under'
Bourbon har et bredt spekter av super nyttige mixins for å få fart på arbeidet ditt. Når det gjelder design, er det trygt å si at dets skapere vil støtte dine egne designbeslutninger uten å tvinge en bestemt stil på deg. Du oppfordres til å blande din egen fantastiske saus, ved hjelp av disse mixins som en stabil og relativt nøytral basis.
Her er et par mixins jeg anbefaler at du sjekker ut først:
Accentsconagua
bakgrunnsbildelineær-gradientborder-radiusretina-bildeinline-blokkovergangerbox-sizinganimasjonerskrifttypetriangelclearfixstillingknappstørrelseVi lærer mer om individuelle Bourbon mixins i fremtidige opplæringsprogrammer.
Sass har allerede massevis av innebygde funksjoner. De spenner fra manipulerende strenger, for å rote med opasitet og farger. Bourbon legger til et par utvalgte forbedringer og gir veldig praktiske Sass-funksjoner for en rekke brukssaker. Begynn med å se på dette valget:
lineær-gradient ()modulære-skala ()gylden-ratio ()skygge()fargetone ()em ()Igjen ser vi detaljert på Bourbon-funksjoner senere i serien.
Bourbon definerer noen små, men nyttige sett med standardvariabler, for eksempel:
$ Lucida-grande$ monospace$ helvetica$ Verdana$ georgiaI stedet for den tradisjonelle måten å definere skriftstabler:
css font-familie: "Helvetica Neue", Helvetica, Arial, sans-serif med Bourbon bruker du en av skriftfamiliens variabler:
css font-familie: $ helvetica
Bourbon gir en rekke timingvariabler, rett ut av boksen. En blanding som overgang har følgende syntaks:
"css .some-element + overgang (alle 5s $ enkelt i krets)
// SCSS syntaks // .some-element @include overgang (alle 5s $ ease-in-circ); // "
Den siste parameteren definerer dens timing gjennom en variabel. Du kan finjustere overgangsoppførelsen ved å gi en av 24 variabler for å kontrollere timingen. Følgende GIF illustrerer alternativene:
Gjør din fremtidige selv og dine kolleger en tjeneste og gi Bourbon et skudd. Denne perlen legger høy verdi på semantisk markering, samtidig som den er lett og enkel. Det vil tjene deg godt med design og CSS-arkitektur, pluss det hjelper å dyrke beste praksis for å skape enestående kode.
Bli med i neste del av denne serien, når jeg tar en dypere titt på Bourbon's mixins.
