Bourbon Neat Semantische, unopinionierte, responsive Raster

Wenn Sie Sass verwenden, Bourbon genießen und ein Smart-Grid-Framework für leichte Layouts verwenden möchten, könnte Neat auf absehbare Zeit Ihr zuverlässiger Begleiter werden. In diesem kurzen Einführungsstück werde ich Ihnen ein paar vernünftige Gründe nennen, um diesem unopinionierten Rasterfeld einen Schuss zu geben.

Willkommen bei Ihrem neuen Lieblingstool

Bourbon Neat wurde von Reda Lemeden konzipiert und ist Teil der fantastischen Bourbon-Suite. Es ist ein leichtes, reaktionsfähiges Gitter-Framework, das auf Sass und Bourbon aufgebaut ist. Das Projekt selbst wird von thoughtbot unterstützt und ihre Designer kümmern sich darum.

Ein Wort zu Frameworks

Bevor wir etwas installieren, möchte ich Ihnen ein paar gute Gründe nennen, um es zu untersuchen. Es gibt unzählige Frameworks, die einen stabilen Rahmen für die Entwicklung Ihrer Designs versprechen. Und die meisten von ihnen sind auf die eine oder andere Weise sicher erfolgreich. Aber bis zu welchem ​​Grad? Frag dich selbst:

• Werden Sie (leicht) in der Lage sein, in Zukunft Frameworks zu wechseln?
• Gibt es Probleme mit dem Durcheinander von Markups??
• Ist es für die Skalierung von Projekten geeignet??
• Ist es lächerlich in der Größe??
• Kommt es mit einer steilen Lernkurve??
• Verleiht es Ihren Websites ein generisches Aussehen??

Wenn Antworten auf eines der oben genannten Probleme Alarmglocken auslösen, möchte ich Ihnen nur versichern, dass solche Kopfschmerzen heutzutage leicht zu vermeiden sind. Es ist sehr selten, ein Projekt zu finden, das seine Gewinne so gut ausbalanciert wie Bourbon Neat (oder kurz „Neat“). Warum so Hier sind ein paar gute Gründe:

• Es ist super leicht
• Es ist zukunftssicher
• Es ist einfach zu bedienen
• Es ist ansprechend
• Es ist semantisch
• Es ist skalierbar
• Es ist elegant

Bourbon möchte auch Optionen bieten, nicht Antworten. Was mir besonders gefällt, ist, dass es keine Fabrik für generische, vordefinierte Stile ist. Auf diese Weise hilft es dem Designer, seine eigenen Designentscheidungen zu treffen, ohne im Weg zu stehen.

Und jetzt ein Wort zur Semantik

Dies ist ein wichtiges Thema, aber ich mache es kurz: hässlich Präsentationsunterricht und zusätzlich leere Wrapper-Divs In Frontend-Bibliotheken finden Sie häufig Geister aus der Vergangenheit (zumindest sie sollte Geister sein). Ordentlich spielt eine wichtige Rolle bei der Überwindung dieser gnarly semantischen Gewohnheiten. Es hilft Ihnen, ein sauberes, unauffälliges Markup zu erstellen und alle Rasterstile in Ihren Stylesheets durch Mixins sauber zu trennen.

Was ist in der Box?

Warum überhaupt mit einem Grid-Framework umgehen? Nun, beim Design dreht sich alles um Beziehungen und Beziehungen können schwer sein. Raster erleichtern sie, indem Sie Strukturen auf sinnvolle und organisierte Weise miteinander verbinden. Sie vereinfachen, reduzieren und stabilisieren sich im Wesentlichen und helfen, das Fett aus den Designs herauszuschneiden. Ordentlich erreicht dies mit nur vierzehn Mixins…

• Reset-Layout-Richtung
• Richtungskontext
• Verschiebung im Kontext
• Anzeigekontext
• Außenbehälter
• Span-Spalten
• Reset-Anzeige
• Mutter füllen
• Alles zurücksetzen
• Omega
• Medien
• Verschiebung
• Pad
• Reihe

… Eine einzige Funktion zum Setzen von Haltepunkten…

• neuer Haltepunkt

… Und zwölf Variablen für Einstellungen:

• Standard-Layoutrichtung
• visuelle Rasteropazität
• Border-Sizing-Größe
• Visual-Grid-Index
• Deaktivieren-Warnungen
• Farbe des visuellen Rasters
• Standardmerkmal
• Gitter-Spalten
• maximale Breite
• Sichtgitter
• Säule
• Rinne

Boom, das ist es! Ziemlich zurückhaltend, aber mit viel PS ausgestattet!

Responsive Grids

Veränderung und das Flexibilität brauchen sind ständige zukunftssichere Notwendigkeiten. Die Einbindung von Medienabfragen sollte reibungslos und leicht zu handhaben sein, sie können jedoch schnell zu einem Chaos werden, wenn sie nicht sorgfältig behandelt werden.

Bourbon Neat ermutigt a TROCKEN Ansatz für die Behandlung Ihrer Haltepunkte mit der Funktion "neuer Haltepunkt". Speichern Sie Haltepunkte in Variablen und verwenden Sie sie wieder, wo immer Sie möchten. Eine Reihe von Medienabfragen an einem Ort zu ändern, ist schwer zu schlagen.

Um konkreter zu sein, möchte ich Ihnen ein Beispiel geben. Hier ist ein zufälliges Sass-Snippet, das die Funktion "Neuer Haltepunkt" für Medienabfragen verwendet:

$ mobile: Neuer Haltepunkt (max. Breite 500px 4). Seitenleiste + Spaltenspalten (3) + Medien ($ Mobile) + Spaltenspalten (1) .content + Spaltenspalten (9) + Medien ($ Mobile) + Spaltenspalten (3) 

Im Moment beschäftigen Sie sich nicht zu sehr mit den in diesem Beispiel verwendeten Mixins. In den kommenden Tutorials werde ich tiefer in das Wesentliche eintauchen. Was in diesem Beispiel jedoch offensichtlich sein sollte, ist die Benutzerfreundlichkeit, wenn Sie Ihre Medienabfragen ändern möchten. Durch die Verwendung von Sass-Variablen und dieser Funktion haben Sie eine einheitliche, autorisierende Stelle, um Ihr responsives Layout zu ändern und anzupassen, ohne jedes Element einzeln zu berühren.

Installation

Nun, da Sie wissen, worauf Sie sich einlassen, installieren wir diese Schönheit:

Hinweis: Sie müssen Sass installiert haben, bevor Sie beginnen.)

Schritt 1: Installieren Sie Bourbon

Werfen Sie einen Blick auf mein Tutorial über Bourbon, wenn Sie diesem Schritt folgen müssen.

Schritt 2: Installieren Sie den ordentlichen Edelstein

Dies geschieht über RubyGems wie folgt:

gem ordentlich installieren 

Schritt 3: Installieren Sie Neat

Wechseln Sie über die Befehlszeile in ein Sass-Verzeichnis Ihrer Wahl und führen Sie dann Folgendes aus:

ordentlich installieren 

Dadurch werden alle erforderlichen Mixins, Einstellungen und Funktionen in Ihrem festgelegten Verzeichnis installiert.

Schritt 4: Importieren Sie ordentlich in Ihr Sass Stylesheet

@import 'Bourbon / Bourbon' @import 'Rastereinstellungen' @import 'ordentlich / ordentlich' 

Hinweis: Die Importreihenfolge ist hier wichtig. Da Neat auf Bourbon gebaut wurde, müssen Sie zuerst Bourbon importieren. Das gleiche gilt für seine Rastereinstellungen.

Installation mit Schienen

Schritt 1:

Wenn Sie Neat mit Rails verwenden möchten, müssen Sie Folgendes hinzufügen:

Juwel ordentlich 

in dein Gemfile.

Schritt 2:

Dann renne:

Bundle installieren 

in Ihrem Terminal.

Schritt 3:

In "application.sass" müssen Sie dann Folgendes hinzufügen:

@import 'Bourbon' @import 'Rastereinstellungen' @import 'ordentlich' 

und du bist gut zu gehen. Denken Sie daran, dass @einführen spielt nicht gut mit Sprockets-Direktiven und deshalb müssen Sie ihre Referenzen löschen. In "application.sass" müssen "requir", "requir_tree" und "requir_self" gehen.

Ordentliches CLI

Zu guter Letzt haben die feinen Leute von thoughtbot uns eine schöne Befehlszeilenschnittstelle zur Verfügung gestellt. Es gibt drei selbsterklärende Befehle:

ordentlich installieren ordentlich Update ordentlich entfernen 

Schluss $ 0,02

Mit intelligenten Werkzeugen wie diesem ist es eine Freude, mit Gittern zu arbeiten. Dieses Framework eignet sich hervorragend für die Planung von Entwicklerglück (lang- und kurzfristig)..

Im nächsten Tutorial werfen wir einen näheren, technischeren Blick auf Neat.