Introduktion till Bourbon Lightweight Sass Mixins och More

Bourbon är ett toppklassigt Sass mixinbibliotek för designers. Det har en minimalistisk inställning och är allvarlig för att skapa kvalitets kod som bryr sig om semantik. Bourbon-biblioteket uppmuntrar också bästa metoder för att utveckla skalbar kod.

En kort introduktion

I själva verket, långt från att vara bara ett mixinbibliotek, har Bourbon vuxit till en liten serie projekt som upprätthålls av designersna på thoughtbot. I de kommande handledningarna täcker jag alla follwing i detalj:

• Bourbon
• Propert
• Patroner
• Bitters

För nu är här kärnan:

Bourbon tillhandahåller främst en liten men saftig uppsättning mixins och funktioner som har extraherats från olika designers Sass-kod. Tanken var att centralisera användbara mixins och för att undvika att återuppfinna hjulet hela tiden.

Propert är ett lätta rutnät för Sass. Den är byggd ovanpå Bourbon och motiverades av behovet av en semantisk inställning till layoutsidor.

Patroner är en samling designmönster, snyggt stylad eller ostylad. De är också utformade med Bourbon och Neat. Super användbara kod exempel finns till ditt förfogande.

Bitters är några byggnadsstilar, variabler och lite struktur för nya Bourbon-projekt. De får dig igång på nolltid.

Bourbon: Ett mixinbibliotek för Sass

Den ursprungliga Bourbon släpptes i början av 2011 av Philip LaPier, då digital produktdesigner på thoughtbot. Projektet startade genom att centralisera olika mixins från olika designers i företaget.

Idag är Bourbon en toppklassig Sass bibliotek för designers. Det har en minimalistisk inställning och är allvarlig för att skapa kvalitets kod som bryr sig om semantik. Jag gillar det speciellt eftersom det uppmuntrar bästa praxis för att utveckla bra kod som skala.

Denna pärla hjälper designers att skriva sin kod snabbare och hanterar en hel del nitty-gritty detaljer (som irriterande leverantör prefix). Dess mixins fungerar ofta som omslag för utmatning av CSS-kvalitet, men förblir som vanilj som möjligt genom att hålla sig till den ursprungliga CSS-syntaxen.

Värt att peka ut

• Bourbon är ren Sass, agnostisk plattform och fungerar med alla Sass-projekt.
• Det ligger mycket nära vanilj CSS-syntaxen.
• Det är inte knutet till Ruby (till skillnad från Compass).
• Bourbon innehåller fantastiska funktioner.
• Det lägger ut leverantörs prefix.
• Det är super lätt.
• Det är semantiskt.

Inrätta

Låt oss få det här! Sätt upp din terminal, byt till projektets katalog och installera Bourbon via RubyGems:

bash $ gem install bourbon Notera: Om du inte är helt bekväm med kommandoraden, kolla in vår nybörjarserie Kommandoraden för webbdesign

Byt till ditt projekts stylesheets katalog och generera din bourbon mapp.

bash $ bourbon installera

Detta kommando genererar en bourbon-mapp som innehåller funktioner, mixins, helpers och inställningar som du behöver. Jag rekommenderar att du inte rör den här mappen; Det kommer att ge dig en mycket mjukare upplevelse som uppdaterar Bourbon i framtiden.

Avsluta installationen genom att importera de genererade Sass-filerna i dina stylesheets. Importera Bourbon ovanpå din application.sass fil och se till att du importerar andra Sass-filer under det:

I application.sass:

css @ import 'bourbon / bourbon' @ import 'andra-sass-partials-under'

Bourbon Mixins Översikt

Bourbon har ett brett utbud av super användbara mixins för att påskynda ditt arbete. När det gäller design är det säkert att säga att dess skapare vill stödja dina egna designbeslut utan att tvinga en viss stil på dig. Du uppmuntras att blanda din egen fantastiska sås, med hjälp av dessa mixins som en stabil och relativt neutral grund.

Här är ett par mixins jag rekommenderar att du kolla först:

• bakgrundsbild
• linjär-gradient
• border-radius
• retina-bild
• inline-blocket
• övergångar
• box-dimensionering
• animationer
• font-face
• triangel
• clearfix
• placera
• knapp
• storlek

Vi lär oss mer om individuella Bourbon mixins i framtida handledning.

Bourbon Funktionsöversikt

Sass har redan massor av inbyggda funktioner. De sträcker sig från att manipulera strängar, för att röra med opacitet och färger. Bourbon lägger till ett par utvalda förbättringar och ger mycket praktiska Sass-funktioner för olika användningsfall. Börja med att titta på det här urvalet:

• linjär-gradient ()
• modulär-skala ()
• gyllene snittet()
• skugga()
• nyans()
• em ()

Återigen ser vi i detalj på Bourbon-funktionerna senare i serien.

Bourbon Add-ons

Bourbon definierar några små men användbara uppsättningar av standardvariabler, till exempel:

Font Stack Variables

• $ Lucida-grande
• $ monospace
• $ helvetica
• $ Verdana
• $ Georgia

I stället för det traditionella sättet att definiera typsnittstaplar:

css teckensnittsfamilj: "Helvetica Neue", Helvetica, Arial, sans-serif med Bourbon använder du en av typsnittfamiljvariablerna:

css font-family: $ helvetica

Timing Variables

Bourbon ger en massa timingvariabler, rakt ut ur lådan. En blandning som övergång har följande syntax:

"css .som-element + övergång (alla 5s $ enkelt i cirkel)

// SCSS-syntax // .some-element @include transition (alla 5s $ easy-in-circ); // "

Den sista parametern definierar dess timing genom en variabel. Du kan finjustera övergångsbeteendet genom att ge en av 24 variabler för att styra tidpunkten. Följande GIF illustrerar alternativen:

Slutsats

Gör din framtid själv och dina kollegor en tjänst och ge Bourbon ett skott. Denna pärla lägger högt värde på semantisk markering, samtidigt som den är lätt och enkel. Det kommer att fungera bra med din design och CSS-arkitektur, plus det hjälper till att odla bästa praxis för att skapa superb kod.

Gå med i nästa del av denna serie när jag tar en djupare titt på Bourbons mixins.