Introducerea Bourbon Sass Mixins ușoare și multe altele

Bourbon este o bibliotecă de primă oră Sass mixin pentru designeri. Are o abordare minimalistă și este serios în ceea ce privește crearea unui cod de calitate care să aibă grijă de semantică. Biblioteca Bourbon încurajează, de asemenea, cele mai bune practici pentru dezvoltarea unui cod scalabil.

O scurtă introducere

De fapt, departe de a fi doar o bibliotecă mixin, Bourbon a devenit o mică suită de proiecte care sunt întreținute de designeri la thinkbot. În următoarele tutoriale, voi detalia toate detaliile următoare:

• Bourbon
• ordinat
• refills
• absint

Deocamdată, iată principiul:

Bourbon oferă în principal un set mic și suculent de amestecuri și funcții care au fost extrase din codul Sass al diferitelor designeri. Ideea era de a centraliza mixuri utile și de a evita reinventarea roții tot timpul.

ordinat este un cadru ușor pentru Sass. Acesta este construit pe partea de sus a Bourbon și a fost motivat de necesitatea unei abordări semantice a siturilor de aspect.

refills este o colecție de modele de design, frumos ornamentat sau neatins. Ele sunt, de asemenea, proiectate cu Bourbon și Neat. Exemple de coduri super utile sunt la dispoziția dumneavoastră.

absint sunt câteva stiluri de schelet, variabile și un pic de structură pentru proiectele Bourbon noi. Te vor face să fugi în cel mai scurt timp.

Bourbon: o bibliotecă Mixin pentru Sass

Originalul Bourbon a fost lansat la începutul anului 2011 de Philip LaPier, la momentul designerului de produse digitale de la thinkbot. Proiectul a început prin centralizarea diferitelor mixuri de la diferiți designeri din companie.

Astăzi, Bourbon este un Sass de prim rang bibliotecă pentru designeri. Are o abordare minimalistă și este serios în ceea ce privește crearea codului de calitate care să-l pese semantică. Îmi place mai ales pentru că încurajează cele mai bune practici pentru dezvoltarea unui cod grozav care se scaldă.

Această bijuterie îi ajută pe designeri să-și scrie mai repede codul și gestionează multe detalii detaliate (cum ar fi prefixele enervante ale furnizorilor). Mixinurile sale acționează adesea ca ambalaje pentru a scoate CSS de calitate, dar rămân cât mai mult posibil de vanilie, rămânând la sintaxa originală CSS.

Merită

• Bourbon este pur Sass, platformă agnostică și funcționează cu orice proiect Sass.
• Este foarte aproape de sintaxa CSS de vanilie.
• Nu este legat de Ruby (spre deosebire de Compass).
• Bourbon include funcții minunate.
• Acesta externalizează prefixele furnizorilor.
• Este foarte ușor.
• Este semantică.

Înființat

Atunci, hai să ne mișcăm! Porniți terminalul, treceți la directorul proiectului și instalați Bourbon via RubyGems:

bash $ gem instala bourbon Notă: Dacă nu sunteți complet confortabil folosind linia de comandă, verificați seria de începători Linia de comandă pentru Web Design

Schimbați în directorul de stiluri al proiectului și generați-vă bourbon pliant.

bash $ bourbon install

Această comandă generează un dosar bourbon care conține funcțiile, mixele, ajutoarele și setările de care aveți nevoie. Aș recomanda să nu atingeți acest dosar; aceasta vă va oferi o experiență mult mai netedă actualizând Bourbon în viitor.

Finalizați configurarea importând fișierele Sass generate în foile de stil. Import Bourbon pe partea de sus a dvs. application.sass fișier și asigurați-vă că importați alte fișiere Sass de mai jos:

În application.sass:

css @import 'bourbon / bourbon' @import 'alt-sass-partials-de mai jos'

Bourbon Mixins Prezentare generală

Bourbon are o gamă largă de mixuri super utile pentru a vă grăbi munca. Din punct de vedere al designului, este în siguranță să spui că creatorii săi doresc să sprijine propriile decizii de design fără a forța un anumit stil asupra ta. Sunteți încurajați să vă amestecați propriul sos minunat, folosind aceste amestecuri ca o bază stabilă și relativ neutră.

Iată câteva combinații: Vă recomandăm să verificați mai întâi:

• imagine de fundal
• liniar gradient
• border-radius
• retină imagine
• inline-block
• tranziții
• box-dimensionare
• animații
• font-face
• triunghi
• clearfix
• poziţie
• buton
• mărimea

Vom afla mai multe despre amestecurile individuale de Bourbon în tutoriale viitoare.

Funcții Bourbon Prezentare generală

Sass are deja o mulțime de funcții încorporate. Acestea variază de la manipularea șirurilor, până la mizeria cu opacitate și culori. Bourbon adaugă câteva îmbunătățiri selectate și oferă funcții foarte bune Sass pentru o varietate de cazuri de utilizare. Începeți prin a căuta această selecție:

• liniar gradient ()
• Scară modulară ()
• ratia de aur()
• umbră()
• tentă()
• em ()

Din nou, vom analiza detaliat funcțiile Bourbon din seria următoare.

Suplimente Bourbon

Bourbon definește câteva seturi mici, dar utile ale variabilelor implicite, de exemplu:

Variabilele stivei de fonturi

• $ Lucida-grande
• $ monospace
• $ Helvetica
• $ Verdana
• $ georgia

În loc de modul tradițional de definire a stivei de fonturi:

css font-family: "Helvetica Neue", Helvetica, Arial, sans-serif cu Bourbon folosiți una dintre variabilele font-familie:

css font-family: $ helvetica

Variabile de temporizare

Bourbon oferă o tona de variabile de sincronizare, direct din cutie. Un amestec asemănător tranziție are următoarea sintaxă:

"css .some-element + tranziție (toate 5s $ ease-in-circ)

// Sintaxă SCSS // .un element @ include tranziție (toate 5s $ ease-in-circ); // "

Ultimul parametru îi definește sincronizare printr-o variabilă. Puteți ajusta comportamentul de tranziție furnizând una din cele 24 de variabile pentru a controla momentul. Următorul GIF ilustrează opțiunile:

Concluzie

Îți faci o favoare în viitorul tău și colegilor tăi și dă-i lui Bourbon o lovitură. Această bijuterie acordă o mare valoare marcajului semantic, fiind ușor și simplu. Acesta vă va servi bine cu designul și arhitectura CSS, plus ajutând la cultivarea celor mai bune practici pentru crearea unui cod superb.

Alăturați-mă în următoarea parte a acestei serii, când mă uit mai adânc la amestecurile lui Bourbon.