Haupt / Wie Man

So erstellen Sie flexible Layouts mit Susy und Breakpoint

Das Erstellen von reaktionsschnellen Layouts kann aufgrund der Mathematik eine Herausforderung sein. Daher wenden sich Designer häufig an Frameworks und / oder Sass, um den Prozess zu vereinfachen. Viele Frameworks basieren auf einem 12-Spalten-Raster, aber eine reaktionsfähige Site passt nicht immer in diese Struktur. Hier zeige ich Ihnen, wie Sie mit zwei Sass-Erweiterungen ein wirklich flexibles Layout erstellen, das über das 12-Spalten-Raster hinausgeht.

Das Problem

Das Entwerfen reaktionsschneller Layouts kann schwierig sein, da die Breite von Containern, Zeilen, Spalten und Dachrinnen an verschiedenen Haltepunkten berechnet wird. Frameworks können helfen, indem sie Voreinstellungen für allgemeine Haltepunkte erstellen. Bootstrap 3 bietet beispielsweise ein 12-Spalten-Raster mit vier Haltepunkten für Medienabfragen. Sie verwenden dann Klassen, die bewirken, dass Ihr Inhalt eine bestimmte Anzahl von Stellen im Raster einnimmt, und die Dachrinnen nehmen immer 30 Pixel ein.

In einem einfachen Bootstrap 3-Layout mit nur drei Haltepunkten (zwei oben gezeigt) gibt es Klassen, die keinen semantischen Wert hinzufügen

Dies funktioniert die meiste Zeit hervorragend, aber es gibt zwei Probleme. Erstens kann das Hinzufügen dieser Klassen zu Ihrem Markup etwas ausführlich werden. Angenommen, Sie möchten ein Layout, das alle Spalten auf Mobilgeräten, sechs der 12 Spalten auf kleinen Geräten und vier auf mittleren Geräten verwendet. Das Markup könnte ungefähr so aussehen:

Services
 Exotic Pets
 We offer specialized care for reptiles, rodents, birds, and other exotic pets.

Das zweite Problem besteht darin, dass diese Klassen Ihrem HTML-Code Layoutinformationen hinzufügen und die Aktualisierung Ihres Codes erschweren, insbesondere bei einer großen Installation. Wenn Ihre Layouts komplexer werden, erhalten Sie möglicherweise Code, der folgendermaßen aussieht:

Das größere Problem ist, dass Sie wenig Flexibilität haben. Ihr Framework sollte sich um die Mathematik kümmern, da dies der schwierige Teil ist, aber es sollte nicht die Metriken Ihres Layouts bestimmen. Wer hat diese Frameworks zum Chef von Ihnen gemacht?

Susy

Susy Das einfache Versprechen ist, dass Sie sich um das Design kümmern müssen, während es sich um die Mathematik kümmert. Im Kern handelt es sich um eine Reihe von Sass-Mixins zur Berechnung der Breite in einem vollständig flexiblen Rastersystem.

Susy ist eine Reihe von Mixins für Sass, die sich um die Mathematik für jedes Layoutraster kümmern, sodass Sie sich auf die Designelemente konzentrieren können

Beginnen Sie mit dem Importieren der Bibliothek in Ihr Projekt über einen Importbefehl: @import 'susy';. Auf diese Weise erhalten Sie Zugriff auf Susys Grid-Framework, das nicht einfacher zu implementieren ist. In seiner einfachsten Form gibt es nur zwei Mixins, die Sie lernen müssen. Erstens ist das Behältermischen.

Behälter

Mithilfe von Containern können Sie steuern, wie sich die Breite eines Elements an unterschiedliche Haltepunkte anpasst. Mit Susy können wir die Container in jedem Element jederzeit neu definieren, ohne dass wir unserem HMTL-Code zusätzliche Klassen hinzufügen müssen.

Angenommen, ich lege eine andere Website an. Wenn ich einen Container in einem HTML-Element erstellen möchte, kann ich meiner Deklaration ein Include hinzufügen, wie folgt:

#welcome { article { @include container(70%); } //article }

Dadurch funktioniert das Element mit einer Abschnittsklasse wie ein Bootstrap-Container, ohne dass eine HTML-Klasse in unser HTML eingefügt werden muss. Dies bedeutet, dass unser HTML viel semantischer sein kann.

 Welcome to the Landon Hotel
 The original Landon perseveres after 50 years in the heart of West London. The West End neighborhood has something for everyone – from theater to dining to historic sights. And the not-to-miss Rooftop Cafe is a great place for travelers and locals to engage over drinks, food, and good conversation.

Dies macht mein HTML nicht nur viel lesbarer, sondern erleichtert auch die Aktualisierung. Wenn wir Klassen wie Inhalt und Szene verwenden, ist es einfach, die Bedeutung dieser Elemente für das Layout neu zu definieren, anstatt darüber nachdenken zu müssen, wie viele Klassen wir hinzufügen müssen, damit sich unser Inhalt so verhält, wie wir es möchten .

Im Begrüßungsbereich dieser Website werden die flexiblen Container von Susy verwendet, die auf einen Prozentsatz der Breite des Ansichtsfensters eingestellt sind

Spannweiten

In Susy erstellen Sie Zeilen und Spalten mithilfe von Bereichen. Um ein Element zu erstellen, das eine von drei Spalten einnimmt, können Sie so etwas schreiben.

#usefulinfo { section { @include span(1 of 3); } }

Das Schöne daran ist, dass wir uns nie an eine bestimmte Anzahl von Spalten anpassen und dann die Elemente entsprechend anpassen müssen. Jedes Element in meinem Layout kann nur den Platz beanspruchen, den ich zu diesem Zeitpunkt benötige.

Mit einer einfachen @ include-Span-Anweisung können wir jeden Container so einrichten, dass er in ein benutzerdefiniertes dreispaltiges Raster passt

Dies ändert wirklich die Art und Weise, wie Sie über Spalten denken. Wenn ich Bootstrap verwenden würde, würde ich den obigen Code als .col-sm-4 schreiben, da ein Drittel der 12 Spalten vier sind. Bei Susy muss ich nicht darüber nachdenken, wie viele Einheiten ich überspannen möchte. Ich kann einfach angeben, wie viel Speicherplatz ich benötige. Wenn Sie nicht mehr über die Konvertierung in eine bestimmte Anzahl von Spalten nachdenken, können Sie sich stattdessen darauf konzentrieren, wie das Layout aussehen soll.

Standardeinstellungen einrichten

Natürlich ist es in jedem Layoutsystem gut, Standardeinstellungen zu haben, sodass wir nicht in jedem Fall die Größe unserer Dachrinnen angeben müssen. Dazu ändern wir eine Variable namens $ susy oben in unserem Sass:

$susy: ( columns: 12, container: 60em, gutters: 1/4, gutter-position: inside );

Susy hat eine Menge Standardeinstellungen, mit denen Sie Ihr Standardraster einrichten können. Bei dieser Grundeinstellung wird jedoch ein Standard-Bootstrap-ähnlicher Standard erstellt. Vergessen Sie nicht, dass alles in Susy anpassbar ist, sodass Sie nie mit einem dieser Elemente verheiratet sind und es Tag für Tag ändern können.

Das Standardraster hat jetzt 12 Spalten, wenn wir den Befehl @include im Container-Mixin verwenden, und dieser Container wird bei einer Breite von 60 em mit Rinnen gesperrt, die ein Viertel der Größe der Spalten betragen. Wenn wir unsere früheren Abschnitte in dieses Raster einpassen wollten, könnten wir die Erklärung folgendermaßen schreiben:

#usefulinfo { section { @include span(4); } }

Dies bedeutet, dass jeder Abschnitt vier der 12 Spalten einnimmt. Ich halte es jedoch für sinnvoller zu sagen, dass ein Element eine von drei Spalten einnimmt. Wenn Sie Spalten an einer bestimmten Position versetzen müssen, können Sie diese Notation verwenden:

@include span(8 at 4 of 12);

Auf diese Weise kann ein Element acht Spalten einnehmen, beginnend an der vierten Position in einem 12-Spalten-Raster. Wenn Sie also ein Layout erstellen, können Sie sich darauf konzentrieren, was Ihre Inhalte tun müssen, anstatt wie das Design in Ihr vorhandenes Raster passt.

Polstersäulen

Eine andere Möglichkeit, die Platzierung Ihrer Elemente zu steuern, besteht darin, Ihre Spalten aufzufüllen. Dadurch werden auf beiden Seiten Ihrer Spalten mehrere Spaltenbereiche hinzugefügt. Sie können beispielsweise eine Spalte sieben Einheiten nach rechts verschieben und eine Einheit von links auffüllen, wie folgt:

@include pad(7,1);

Dies bedeutet, dass Sie nicht nur über positive Leerzeichen (wie viele Spalten ein Element einnehmen sollte) nachdenken, sondern auch umgekehrt vorgehen und Designs basierend auf dem Abstand auf jeder Seite Ihres Inhalts erstellen können.

Mit dem Pad-Include können Sie Ihre Inhalte basierend auf dem negativen Leerzeichen anordnen

Medienabfragen verwalten

Damit die Dinge wirklich reaktionsschnell sind, müssen Sie in der Lage sein, das Einrichten und Entwerfen von Spalten mit reaktionsschnellen Haltepunkten zu kombinieren. Zu diesem Zweck können wir einen anderen Satz von Mixins aus einer Bibliothek namens verwenden Haltepunkt .

Breakpoint erleichtert die Bearbeitung von Medienabfragen in Ihren Layouts. Dazu wird die Sprache vereinfacht, die zum Erstellen von Haltepunkten für Medienabfragen verwendet werden muss. Traditionell erstellen Sie diese mit einer Regel wie der folgenden:

@media (min-width: 34em) and (max-width: 62em) { .container { ... } }

Dadurch wird ein Bereich von Breiten erstellt, in dem sich die Deklarationen auf Ihr Layout auswirken. Breakpoint kapselt die Aufrufe in ein Common-Sense-Mixin, das viel einfacher zu schreiben ist:

.container { @include breakpoint(34em 62em) { ... } }

Der Aufruf ist auch anders, da wir dies innerhalb einer vorhandenen Klasse leicht zuweisen können. Das Tolle an Breakpoint ist, dass es Annahmen trifft, die auf allgemeinen Layoutanforderungen basieren.

Haltepunktregeln sind ebenfalls leicht zu erlernen. Es gibt nur drei Dinge, die Sie wissen müssen:

Wenn Sie nur eine einzige Nummer in den Haltepunktaufruf aufnehmen, geht Breakpoint von einem Medienabfrageaufruf mit minimaler Breite aus
Wenn Sie zwei Zahlen einschließen, geht der Haltepunkt davon aus, dass Sie einen Bereich zwischen den beiden Zahlen angeben möchten (wie im vorherigen Beispiel).
Wenn Sie zwei Werte einschließen und einer eine Zeichenfolge ist, wird davon ausgegangen, dass Sie dem Mixin ein Feature-Wert-Paar senden. Wenn Sie möchten, können Sie also weiterhin Orientierung oder eine andere spezielle Medienabfrageregel senden

Breakpoint wurde seit Version 2.2.1 in Susy gefaltet. Die Susy-Version funktioniert genau wie die Breakpoint-Mixins, aber anstatt Breakpoint aufzurufen, verwenden Sie Susy-Breakpoint. Der gleiche Anruf würde folgendermaßen erfolgen:

.container { @include susy-breakpoint(34em 62em) { max-width: 50%; margin-left: auto; margin-right: auto; } }

Haltepunkt und Susy

Wenn Sie Breakpoint mit Susy kombinieren, erhalten Sie ein flexibles Raster, das sich problemlos an verschiedene Deklarationen für Medienabfragen anpassen lässt. Werfen wir einen Blick auf den HTML-Code für den Informationsabschnitt auf einer Site.

Durch die Kombination von Susy und Breakpoint können wir Medienabfragen erstellen, die unterschiedliche Rasterlayouts enthalten. In meinem Layout habe ich drei verschiedene Abschnitte, aber ich möchte, dass sie je nach Breite des Ansichtsfensters unterschiedliche Regeln haben.

An zwei verschiedenen Haltepunkten verhält sich unser Layout unterschiedlich, aber dies ist in Sass mit Susy und Haltepunkt ziemlich einfach auszudrücken

An diesen beiden unterschiedlichen Haltepunkten verhält sich unser Layout dramatisch unterschiedlich. Im größeren Haltepunkt rechts nimmt jeder Abschnitt drei Spalten ein. Im kleineren Haltepunkt nimmt die erste Spalte 100 Prozent des Ansichtsfensters ein, während die anderen beiden die Hälfte des Ansichtsfensters einnehmen. Das macht diese Mixins so mächtig. Der Code zum Ausdrücken dieser beiden Layouts ist kurz:

section { @include susy-breakpoint(650px) { @include span(1 of 3); } //breakpoint @include susy-breakpoint(450px 650px) { &.checklist { @include span(1 of 2) } //checklist } //breakpoint } //section

Zuerst richten wir Standardeinstellungen für jedes Element in einem Abschnitts-Tag ein. Wenn diese Elemente ein Ansichtsfenster erreichen, das größer als 650 Pixel ist, belegen sie ein Raster mit drei Einheiten, wobei jede eine einzelne Einheit einnimmt.

Wenn das Layout zwischen 450px und 650px liegt, passen die Elemente mit einer Klasse von .checklist (die Abschnitte Service und Barrierefreiheit) in ein völlig neues Raster mit nur zwei Spalten, und jedes Element nimmt eine dieser Einheiten ein.

Die Ankunftsinformationen nehmen zwischen diesen beiden Haltepunkten 100 Prozent des Gitters ein. Beachten Sie, dass wir nicht angegeben haben, was unter 450 Pixel passiert. Dies wird durch die Standardeinstellungen sichergestellt - jeder Abschnitt nimmt 100 Prozent des Ansichtsfensters ein.

Layouts mit Mixins beherrschen

Was diese beiden Mixin-Frameworks Ihnen bieten, geht über den Code hinaus, den Sie zum Erstellen der Layouts verwenden. Die Möglichkeit, Ihre Layouts auszudrücken, ohne sich um dieses oder jenes Raster kümmern zu müssen, verändert die Funktionsweise Ihres Gehirns beim Entwerfen von Projekten.

Versteh mich nicht falsch, ich liebe Frameworks. Mit Bootstrap können Sie Layouts mit beispielloser Geschwindigkeit erstellen. Es bietet ein kampferprobtes Raster, das über das Layout hinausgeht und alle Arten von CSS- und JavaScript-Komponenten bereitstellt, um häufig verwendete Elemente wie Tabellen, Modalitäten und Formulare schnell zu verarbeiten.

Das von mir skizzierte Designsystem ändert die Sprache, mit der Sie ein Layout beschreiben. Es ist ein natürliches, abwärtskompatibles und leicht zu erlernendes System, das Ihre Einstellung zum Entwerfen von Websites verändert.

Wörter :: Ray Villalobos

Ray Villalobos ist Mitarbeiter bei Lynda.com und spezialisiert auf Full-Stack-Design und -Entwicklung, Frontend-Design, JS, AngularJS, Sass und Bootstrap. Dieser Artikel wurde ursprünglich in Ausgabe 274 von veröffentlicht Netzmagazin .

Mochte dies? Lese das!