Share
Bourbon ist eine erstklassige Sass-Mixin-Bibliothek für Designer. Es hat einen minimalistischen Ansatz und legt großen Wert darauf, Qualitätscode zu erstellen, der sich auf Semantik konzentriert. Die Bourbon-Bibliothek bietet außerdem Best Practices für die Entwicklung von skalierbarem Code.
Eigentlich ist Bourbon nicht nur eine Mix-Bibliothek, sondern hat sich zu einer kleinen Suite von Projekten entwickelt, die von den Designern von thoughtbot betreut werden. In den kommenden Tutorials werde ich ausführlich auf Folgendes eingehen:
Für jetzt ist hier der Kern:
Bourbon bietet hauptsächlich einen kleinen, aber saftigen Satz von Mixins und Funktionen, die aus dem Sass-Code verschiedener Designer extrahiert wurden. Die Idee war, nützliche Mixins zu zentralisieren und zu vermeiden, das Rad ständig neu zu erfinden.
Ordentlich ist ein leichtes Gitter für Sass. Es ist auf Bourbon aufgebaut und wurde durch die Notwendigkeit eines semantischen Ansatzes für Layout-Sites motiviert.
Nachfüllen ist eine Sammlung von Designmustern, schön gestaltet oder unstyled. Sie sind auch mit Bourbon und Neat gestaltet. Sehr nützliche Codebeispiele stehen Ihnen zur Verfügung.
Bitter Es gibt ein paar Gerüststile, Variablen und ein bisschen Struktur für neue Bourbon-Projekte. Sie bringen Sie in kürzester Zeit zum Laufen.
Der ursprüngliche Bourbon wurde Anfang 2011 von Philip LaPier, damals Digital Product Designer bei thoughtbot, veröffentlicht. Das Projekt begann mit der Zentralisierung verschiedener Mixins von verschiedenen Designern im Unternehmen.
Heute ist Bourbon ein erstklassiger Sass Bibliothek für Designer. Es hat einen minimalistischen Ansatz und legt großen Wert darauf, Qualitätscodes zu erstellen, die für ihn wichtig sind Semantik. Ich mag es besonders, weil es Best Practices für die Entwicklung von großartigem Code fördert, der skaliert.
Dieses Juwel hilft Designern, ihren Code schneller zu schreiben, und verwaltet viele der wichtigsten Details (wie beispielsweise lästige Herstellerpräfixe). Die Mixins fungieren oft als Wrapper für die Ausgabe von hochwertigem CSS, bleiben aber so vanilla wie möglich, indem sie der ursprünglichen CSS-Syntax treu bleiben.
Dann lass uns das in Bewegung setzen! Starten Sie Ihr Terminal, wechseln Sie in das Verzeichnis Ihres Projekts und installieren Sie Bourbon über RubyGems:
bash $ gem installiere Bourbon Hinweis: Wenn Sie mit der Befehlszeile nicht ganz vertraut sind, lesen Sie unsere Einsteigerserie The Command Line for Web Design
Wechseln Sie in das Stylesheets-Verzeichnis Ihres Projekts und generieren Sie Ihr Bourbon Mappe.
bash $ bourbon installieren
Dieser Befehl generiert einen Bourbon-Ordner, der die Funktionen, Mixins, Helfer und Einstellungen enthält, die Sie benötigen. Ich würde empfehlen, dass Sie diesen Ordner nicht berühren. Es wird Ihnen eine viel glattere Erfahrung beim Aktualisieren von Bourbon in der Zukunft geben.
Beenden Sie das Setup, indem Sie die generierten Sass-Dateien in Ihre Stylesheets importieren. Importieren Sie Bourbon auf Ihrem application.sass Datei und stellen Sie sicher, dass Sie andere Sass-Dateien darunter importieren:
Im application.sass:
css @import 'Bourbon / Bourbon' @import 'andere-sass-partials-unter'
Bourbon bietet eine Vielzahl von sehr nützlichen Mixins, um Ihre Arbeit zu beschleunigen. In Bezug auf das Design kann man mit Sicherheit sagen, dass seine Ersteller Ihre eigenen Designentscheidungen unterstützen möchten, ohne Ihnen einen bestimmten Stil aufzuzwingen. Sie können Ihre eigene tolle Sauce mischen und diese Mixins als stabile und relativ neutrale Basis verwenden.
Hier sind ein paar Mixins, die ich dir zuerst empfehlen sollte:
Accentsconagua
Hintergrundbildlinearer GradientGrenzradiusNetzhautbildInline-BlockÜbergängeBox-SizingAnimationenSchriftartDreieckClearfixPositionTasteGrößeIn zukünftigen Tutorials erfahren Sie mehr über einzelne Bourbon-Mixins.
Sass hat bereits eine Menge eingebauter Funktionen. Sie reichen von der Manipulation von Strings bis hin zu Durchsichtigkeit und Farben. Bourbon fügt einige ausgewählte Verbesserungen hinzu und bietet sehr praktische Sass-Funktionen für eine Vielzahl von Anwendungsfällen. Beginnen Sie mit der Auswahl dieser Auswahl:
linearer Gradient ()modularer Maßstab ()Goldener Schnitt()Schatten()Farbton()em ()Wir werden uns später in der Serie noch genauer mit den Funktionen von Bourbon befassen.
Bourbon definiert einige kleine, aber nützliche Sätze von Standardvariablen, zum Beispiel:
$ lucida-grande$ Monospace$ helvetica$ verdana$ georgiaAnstelle der traditionellen Art, Fontstacks zu definieren:
css-Schriftfamilie: "Helvetica Neue", Helvetica, Arial, serifenlos Bei Bourbon verwenden Sie eine der Schriftfamilienvariablen:
css-Schriftfamilie: $ helvetica
Bourbon bietet eine Vielzahl von Timing-Variablen, die sofort einsatzbereit sind. Eine Mischung wie Übergang hat die folgende Syntax:
"css .some-element + transition (alle 5s $ ease-in-circ)
// SCSS-Syntax // .some-element @include Übergang (alle 5s $ ease-in-circ); // "
Der letzte Parameter definiert sein zeitliche Koordinierung durch eine Variable. Sie können das Übergangsverhalten verfeinern, indem Sie eine von 24 Variablen zur Steuerung des Timings angeben. Die folgende GIF veranschaulicht die Optionen:
Tun Sie Ihrem zukünftigen Selbst und Ihren Kollegen einen Gefallen und geben Sie Bourbon einen Schuß. Dieser Edelstein legt großen Wert auf semantisches Markup und ist dabei leicht und einfach. Es wird Ihnen mit Ihrem Design und Ihrer CSS-Architektur gute Dienste leisten und hilft Ihnen dabei, bewährte Methoden zur Erstellung hervorragenden Codes zu entwickeln.
Kommen Sie mit mir zum nächsten Teil dieser Serie, wenn ich mir die Mixins von Bourbon genauer anschaue.
