Web-Layouts einfach mit Susy erstellen

Susy bietet Ihnen die Werkzeuge, um Ihre eigenen Grid-Layouts zu erstellen, die den Bedürfnissen Ihrer Website entsprechen. Es gibt Ihnen die Freiheit und Flexibilität, jedes Design zu erstellen, das Sie sich vorstellen können. Es spielt keine Rolle, ob Ihr Design 5, 14 oder 48 Spalten hat. Ungleichmäßige Spaltenbreiten? Susy hat Sie abgedeckt.

Warum sollten Sie Susy gegenüber den Millionen anderer Frameworks im Internet wählen? Sie haben vielleicht noch nie davon gehört. Was, wenn seine Schönheit nur oberflächlich ist?

Susy ist eines der besten Dinge, die mir in Bezug auf meinen Front-End-Entwicklungs-Workflow in den letzten Monaten passiert sind. Es hat mir so sehr geholfen, dass ich beschlossen habe, ein Buch darüber zu schreiben, um seine Vorteile mit der Welt zu teilen. Es ist ein detaillierter Leitfaden zu Susy und wie Sie es verwenden können, um jedes gewünschte Website-Design einfach zu erstellen.

Immer noch nicht überzeugt? Nun, dann bitte ich Sie nur, mir die Gelegenheit zu geben, zu versuchen, Ihre Meinung mit diesem Artikel zu ändern. Wir werden sehen, warum Susy so besonders ist und wie es Ihnen helfen kann.

Wie man so schön sagt, gibt es keinen Ersatz für Erfahrung, also werde ich Sie durch die Susy-Erfahrung bei der Erstellung eines Layouts führen. Und Sie können es mit der Erfahrung vergleichen, dasselbe Layout von Hand zu erstellen (was die Berechnung von Pixeln ... selbst beinhaltet).

Wir fangen einfach an und gehen zu ausgefalleneren Layouts über, sobald Sie Susy besser kennengelernt haben.

Bevor wir beginnen, gibt es einige Dinge, die Sie über unseren Freund Susy wissen müssen. Sie MÜSSEN die Sass-Präprozessor-Sprache dafür verwenden, was bedeutet, dass Sie zumindest wissen müssen, wie man Sass in CSS konvertiert. Und nein, Sie können LESS nicht verwenden. Tut mir leid, LESS-Leute!

Ein sehr einfaches Layout erstellen

CSS-Tricks hat ein ziemlich geradliniges Layout, also verwenden wir das für unser erstes Beispiel.

Schauen Sie sich den Blog an, und Sie werden feststellen, dass CSS-Tricks aus zwei Inhaltsbereichen besteht: dem Hauptinhalt und dem Seitenleistenbereich.

Wir gehen davon aus, dass CSS-Tricks ein 12-Spalten-Layout für die gesamte Website verwendet und sein Inhaltsbereich 8 von 12 Spalten einnimmt, während die Seitenleiste 4 von 12 Spalten einnimmt. Ziemlich Standard, wenn Sie schon einmal mit Grids gearbeitet haben.

Wenn Sie Bootstrap oder Foundation zuvor verwendet haben, wäre das Markup für dieses Website-Layout

<div class="wrap">
  <div class="content col-md-8"></div>
  <div class="content col-md-4"></div>
</div>

Einfach, ja. Aber Bootstrap und Foundation bringen auch viel Ballast mit sich, mit dem wir uns oft nicht auseinandersetzen wollen. Wenn Sie die meiste andere Sache, die mit Bootstrap und Foundation geliefert wird, nicht benötigen, wäre Susy eine viel bessere Wahl für Sie.

Ein stoischer Entwickler, der alle seine Websites von Grund auf handcodiert, ohne Frameworks oder Schnickschnack, würde sein Markup wahrscheinlich so schreiben

<div class="wrap">
  <div class="content">Content</div>
  <div class="sidebar">Sidebar</div>
</div>

Um einen 8-Spalten-Inhalt und eine 4-Spalten-Seitenleiste zu erstellen, müssen Sie die Breiten des Inhalts, der Lücke und der Seitenleiste messen. Eine Regel der responsiven Webentwicklung ist, diese Breiten in Prozent auszugeben, daher müssen Sie sie entsprechend konvertieren.

Das entsprechende CSS würde also wahrscheinlich etwa so aussehen

/* I tend to use border-box sizing for all my web layouts. */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; 
}

.wrap {
  max-width: 1120px; 
}

/* Clearfix for floated children */
.wrap:after {
  content: " ";
  clear: both; 
  display: block;
}

.content {
  float: left; 
  width: 66.071429%; /* 740px / 1120px */
  margin-right: 1.6964286%; /* 19px/1120px */
}

.sidebar {
  float: right; 
  width: 32.2321429%; /* 361px / 1120px */
}

Ein kurzer Hinweis, bevor wir weitermachen: Ich liebe es, die Eigenschaft box-sizing auf border-box für alle meine Web-Elemente zu setzen, und ich empfehle Ihnen dringend, dasselbe zu tun. Chris hat hier ausführlich über box-sizing geschrieben.

Wie auch immer, die Methode des Handcodierens von Grund auf kann mühsam werden, wenn Sie mehrere Layouts bearbeiten müssen. Stellen Sie sich vor, Sie müssten jedes Mal all diese Prozentsätze berechnen!

Genau dabei hilft Ihnen Susy. Sie erledigt die Mathematik für Sie.

Das einfache Layout mit Susy erstellen

Wenn Sie Susy zum Erstellen eines Layouts verwenden, müssen Sie es zuerst wissen lassen, welche Einstellungen Sie verwenden möchten. Es gibt eine ganze Reihe von Standardeinstellungen, die Susy verwendet, um jedes Projekt zu starten.

Ich gehe davon aus, dass dies Ihre erste Erfahrung mit Susy ist, also bleiben wir vorerst bei den meisten Standardeinstellungen. Sie müssen jedoch drei Eigenschaften ändern, und Sie ändern sie, indem Sie sie auf der $susy Map deklarieren.

Gleichzeitig wenden wir auch die border-box Eigenschaft an, wie wir es oben getan haben.

@import "susy"

/* Changing Susy default global settings */
$susy: (
  /* Tells Susy to use 12 columns */
  columns: 12,
  /* Tells Susy that the container has a max-width of 1120px */
  container: 1120px,
  /* Tells Susy to use border-box */
  global-box-sizing: border-box 
  );

/* Makes border-box properties */
@include border-box-sizing;

Es wird empfohlen, die container Mixin zu verwenden, um den Container für die Website zu erstellen, wann immer Sie Susy verwenden. In unserem Fall ist dieser Container .wrap.

.wrap {
  @include container;
}

Dieses Mal werden wir anstatt die exakten Pixel und Prozente für das Layout manuell zu berechnen, Susy bitten, dies für uns zu tun. Um dies zu tun, **müssen Sie Susy nur mitteilen, dass content 8 Spalten und sidebar 4 Spalten sind.**

Wir müssen Susy mitteilen, dass sidebar das letzte Element in der Reihe ist, damit es die notwendigen Anpassungen vornehmen kann.

/* Tells Susy there's 8 columns in the content */
.content {
  @include span(8); 
}

/* Tells Susy there's 4 columns in the sidebar, and its the last item on the row. */
.sidebar {
  @include span(4 last); 
}

Dies kompiliert zu

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; 
}

.wrap {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}
.wrap:after {
  content: " ";
  display: block;
  clear: both;
}

.content {
  width: 66.10169%;
  float: left;
  margin-right: 1.69492%;
}

.sidebar {
  width: 32.20339%;
  float: right;
  margin-right: 0;
}

**Haben Sie bemerkt, dass die CSS-Ausgabe genau das ist, was wir erstellen mussten?** Susy hat uns sicher viel Zeit gespart.

Wir sind mit dem Layout von CSS-Tricks aber noch nicht fertig. Wenn Sie zum unteren Ende der Website scrollen, finden Sie den Social-Media-Bereich, und Sie können auch sehen, dass sich in diesem Bereich 10 Social-Media-Elemente befinden.

Wenn Sie ein traditionelles Grid-Framework in Ihrem Design verwenden, haben Sie ziemlich schlechte Karten. Soweit ich weiß, gibt es keine einfache Möglichkeit, die Anzahl der Spalten von 12 auf 10 schnell zu manipulieren, wenn man Frameworks wie Bootstrap oder Foundation verwendet, ohne den Rest des Layouts zu beeinträchtigen.

Susy bindet Sie nicht an solche Regeln. Sie können Ihre eigenen Regeln erstellen. Es ist schließlich Ihr Grid.

Ihr Grid, Ihre Regeln

Alles ist möglich, wenn Sie Ihre eigenen Grids erstellen. Bevor wir mit dem CSS beginnen, lassen Sie uns zuerst das Markup richtig machen. Es sollte in etwa so aussehen

<div class="wrap">
  <div class="content"></div>
  <div class="sidebar"></div>
  <div class="social">
    <ul>
      <li class="social__list-item"></li> <!-- repeat 10x --> 
    </ul>
  </div>
</div>

Nun können wir mit der CSS-Arbeit beginnen. Bei der Handcodierungs-Methode haben Sie vielleicht festgestellt, dass Sie die Breite jedes Elements und der Lücke erneut berechnen müssen.

.social {
  padding: 1.6964286% /* 19px / 1120px */
}

/* Adds clearfix to social to prevent the float collapse  */
.social:after {
  content: " ";
  clear: both; 
  display: block;
}

.social__list-item {
  float: left; 
  width: 9.1497227; /* 99px / 1082px */
  margin-right: 1.0166359; /* 11px / 1082px */
}

/* And the last item cannot have any right margins */
/* It is also good to float it right to mitigate subpixel rounding errors */

.social__list-item:last-child {
  float: right; 
  margin-right: 0;
}

Das ist ziemlich mühsam, wenn Sie mich fragen.

Es ist viel einfacher, wenn wir Susy es für uns erledigen lassen. Sie müssen Susy nur sagen, dass es insgesamt 10 Spalten gibt (statt 12) und jedes Social-Element eine Spalte einnimmt.

.social {
  /* Adds a padding of 19px to each side of the .social container */
  padding: gutter();
  /* Adding a clearfix because all children elements are floated */
  @include clearfix;

  .social__list-item {
    /* Telling Susy that there are 10 items, and each takes up 1 row */
    @include span(1 of 10);
    /* Another way to tell Susy that this is the last item in the row */
    &:last-child {
      @include last;
    }
  }
}

Und Susy erzeugt genau die gleichen CSS-Eigenschaften, die wir für das Grid benötigen!

.social {
  padding: 1.69492%;
}

.social:after {
  content: "";
  display: table;
  clear: both;
}

.social .social__list-item {
  width: 8.16327%;
  float: left;
  margin-right: 2.04082%;
}

.social .social__list-item:last-child {
  float: right;
  margin-right: 0;
}

So einfach kann die Nutzung von Susy sein. Keine mathematischen Fähigkeiten erforderlich. **Solange Sie wissen, wie man ein Grid mit reinem CSS erstellt, wissen Sie, wie man Susy verwendet.**

Eine Sache bei der Arbeit mit Prozentangaben ist die unvermeidliche Tatsache, dass Ihre Ausgabe Subpixel enthält, wie z. B. 10,4 Pixel. Dies ist seit sehr langer Zeit ein Hauptproblem bei Layouts, da verschiedene Browser diese Subpixel unterschiedlich behandeln.

Zum Beispiel runden Webkit-Browser diese Pixel nach unten ab, und 10,4 Pixel werden auf 10 Pixel abgerundet. Je größer die Anzahl der Elemente in Ihrem Layout, desto häufiger treten Rundungsfehler auf. Unser 10-Elemente-Fehler zeigt sich also deutlich in Webkit-Browsern.

Solche Fehler sind unschön und wir können sie einfach nicht dulden.

Umgang mit Subpixel-Rundungsfehlern

Eine Methode ist, sicherzustellen, dass die Prozente keine Subpixel erzeugen. Aber
das ist keine gute Idee, weil Sie entweder mit einer nicht-responsiven Website oder einer, die zu verschiedenen Gitterbreiten springt, feststecken werden.

Es gibt eine weitere Methode, die ich die **Isolate Technique** nenne.

Diese Methode ist etwas fortgeschrittener und erfordert, dass Sie mehr über das Layout von Elementen mit der Isolate Technique wissen, die von Jamie Hill entwickelt wurde. Diese Technik wird seit langem in den bewährten Zen Grids verwendet. Wenn Sie mit Zen Grids vertraut sind, wissen Sie, wovon ich hier spreche.

Wenn nicht, untersuchen wir, wie diese Technik angewendet wird.

Die Isolate Technique

Die Prämisse der Isolate Technique ist, die kumulativen Effekte von Rundungsfehlern zu reduzieren, indem sie mit spezifischen Rändern genau dort positioniert werden, wo sie hingehören.

Die Anforderungen für die Verwendung dieser Technik sind:

1. Jedes Element muss eine margin-left Eigenschaft haben, um sich an der richtigen Position zu positionieren.
2. Jedes Element muss eine margin-right Eigenschaft von -100% haben, um das nächste Element an den äußersten linken Rand des Containers zu ziehen.

Diese Technik kann ziemlich verwirrend sein, wenn Sie nicht mit negativen Rändern vertraut sind. Gehen wir eine vollständige Schritt-für-Schritt-Erklärung durch, wie sie funktioniert.

Nehmen wir an, Sie müssen ein 3-Spalten-Layout erstellen

Wir gehen die Positionierung jedes Elements nacheinander durch. Element 1 ist ziemlich einfach.

1. Es hat einen margin-left von 0, also sitzt es auf der Startlinie.
2. Dann zieht es das nächste Element (Element 2) mit einem margin-right von -100% zurück zur Startlinie.

Element 2 wurde von Element 1 zur Startlinie gezogen, bevor seine eigenen CSS-Eigenschaften wirksam werden.

Element 2 positioniert sich dann mit einer margin-left Eigenschaft, die dem prozentualen Wert von 2 Spalten und 2 Lücken entspricht, und positioniert es genau in der dritten Spalte.

Element 2 hat auch eine margin-right Eigenschaft, die das nächste Element (Element 3) zur Startlinie zieht.

Element 3 wird von Element 2 zur Startlinie gezogen, bevor seine eigenen CSS-Eigenschaften wirksam werden.

Es wird dann durch seine margin-left Eigenschaft, die einen prozentualen Wert von 4 Spalten und 4 Lücken darstellt, auf der 5. Spalte positioniert.

Und es zieht das nächste Element zur Startlinie und das Muster wiederholt sich für die Gesamtzahl der Elemente.

Wenn ein Element in einer neuen Zeile beginnen muss, muss es den Float seines vorherigen Elements mit der Eigenschaft clear: left löschen.

Und um es mit der ersten Spalte (die auf der Startlinie positioniert ist) auszurichten, muss es seine margin-left-Eigenschaft zurück auf 0 ändern, um es dort zu platzieren.

So funktioniert die Isolate Technique. Jetzt, da Sie sie verstanden haben, können wir sie verwenden, um das Subpixel-Rundungsproblem zu lösen.

Lösung von Subpixel-Rundungsfehlern

Wir müssen jedes Element manuell mit der Isolate Technique positionieren, und Susy kann uns dabei helfen.

Susy verfügt über eine praktische Funktion, die Ihnen hilft, ALLE manuellen Arbeiten zu überspringen. Sie heißt gallery Mixin.

.social__list-item {
  @include gallery(1 of 10);
}

Und die CSS, die sie ausgibt, verwendet die oben erwähnte Isolate Technique.

.social__list-item:nth-child(10n + 1) {
  margin-left: 0;
  margin-right: -100%;
  clear: both;
  margin-left: 0;
}
.social__list-item:nth-child(10n + 2) {
  margin-left: 10.20408%;
  margin-right: -100%;
  clear: none;
}
.social__list-item:nth-child(10n + 3) {
  margin-left: 20.40816%;
  margin-right: -100%;
  clear: none;
}
.social__list-item:nth-child(10n + 4) {
  margin-left: 30.61224%;
  margin-right: -100%;
  clear: none;
}
.social__list-item:nth-child(10n + 5) {
  margin-left: 40.81633%;
  margin-right: -100%;
  clear: none;
}
.social__list-item:nth-child(10n + 6) {
  margin-left: 51.02041%;
  margin-right: -100%;
  clear: none;
}
.social__list-item:nth-child(10n + 7) {
  margin-left: 61.22449%;
  margin-right: -100%;
  clear: none;
}
.social__list-item:nth-child(10n + 8) {
  margin-left: 71.42857%;
  margin-right: -100%;
  clear: none;
}
.social__list-item:nth-child(10n + 9) {
  margin-left: 81.63265%;
  margin-right: -100%;
  clear: none;
}
.social__list-item:nth-child(10n + 10) {
  margin-left: 91.83673%;
  margin-right: -100%;
  clear: none;
}

Und der Social-Media-Bereich ist wieder normal!

Jetzt, da wir etwas Schwung aufgebaut haben, machen wir es eine Stufe höher und machen das Layout responsiv.

Das Layout responsiv machen

Responsive Websites sind immer wichtiger geworden, und ich würde Ihnen einen schlechten Dienst erweisen, wenn ich nicht darüber spreche, wie man responsive Layouts mit Susy erstellt.

Der allererste Schritt zur Erstellung responsiver Layouts besteht darin, sicherzustellen, dass Sie mit der Funktionsweise von Media Queries vertraut sind. Achten Sie besonders auf die Mobile-First Media Queries in diesem Artikel, da wir sie verwenden werden.

Der Einfachheit halber erstellen wir nur ein Layout mit zwei Breakpoints – eines für die mobile Ansicht, das von 0px bis 700px reicht; und ein weiteres für die Desktop-Ansicht, das ab 700px beginnt.

In der mobilen Ansicht nehmen sowohl die .content als auch die .sidebar Abschnitte jeweils 100% des Viewports ein. Nach 700px werden .content und .sidebar in 8 bzw. 4 Spalten aufgeteilt.

Wenn Sie es von Hand codieren, könnte es so aussehen (mit Sass)

.content {
  /* Styles for mobile view go here */

  /* Styles for desktop view go here */
  @media (min-width: 700px) {
    width: 66.10169%;
    float: left;
    margin-right: 1.69492%;
  }
}

.sidebar {
  /* Styles for mobile view go here */

  /* Styles for desktop view go here */
  @media (min-width: 700px) {
    width: 32.20339%;
    float: right;
    margin-right: 0;
  }
}

Sie müssen keine Stile für die mobile Ansicht erstellen, da <div> Blöcke standardmäßig 100% Breite einnehmen. Was Sie jedoch benötigen, ist sicherzustellen, dass das Desktop-Layout greift, sobald der Viewport 700px erreicht.

Das Codieren eines responsiven Layouts von Hand ist dasselbe wie das Codieren eines responsiven Layouts mit Susy, nur dass Susy die Dinge schneller macht. Sie verwenden exakt dieselbe Technik und Media Queries.

.content {
  /* Styles for mobile view go here */ 

  /* Styles for desktop view go here */
  @media (min-width: 700px) {
    @include span(8); 
  }
}

.sidebar {
  /* Styles for mobile view go here */ 

  /* Styles for desktop view go here */
  @media (min-width: 700px) {
    @include span(4 last); 
  }
}

Das war's also für .content und .sidebar.

Der nächste Teil ist der Social-Media-Abschnitt. So sieht er in der mobilen Ansicht aus.

Anstatt dass jedes Element 1 von 10 Spalten einnimmt, nimmt jedes Element jetzt 2 von 10 Spalten in der mobilen Ansicht ein, und das können Sie mit span(2 of 10) erreichen.

Hinweis: Sie fragen sich vielleicht, warum nicht 1 von 5 Spalten verwendet wird. Es gibt geringfügige Unterschiede zwischen span(1 of 5) und span(2 of 10), und ein Bild erklärt es am besten.

Dies sind grundlegend unterschiedliche Layouts aufgrund der Anzahl der beteiligten Lücken. Sie können immer die 1-von-5-Option verwenden, aber ich bleibe bei 10, da die Größe der Lücken dann viel näher an 12 liegt.

Wir rufen die gallery Mixin erneut auf und fügen unter jedem Element eine Lücke hinzu, um eine Trennung zwischen den Zeilen zu schaffen.

.social {
  /* ... Same styles as above */

  .social__list-item {
    @include gallery(2 of 10);
    margin-bottom: gutter(10); 
  }

  @media (min-width: 700px) {
    @include gallery(1 of 10); 
    margin-bottom: 0; 
  }
}

Hier ist ein Beispiel dafür, was wir bisher getan haben

Siehe Pen eidcj von Zell Liew (@zellwk) auf CodePen.

Mit Susy zu arbeiten ist genau wie mit reinem CSS zu arbeiten. **Der Hauptunterschied ist, dass Susy ein Mathe-Genie ist.**

Susy ist so gut in Mathe, dass es Ihnen ermöglicht, verrückte asymmetrische Grids zu erstellen, die Spalten unterschiedlicher Größe haben.

Versuchen wir, das Layout für CSS-Tricks mit einem asymmetrischen Grid zu erstellen.

Das Layout mit asymmetrischen Grids erstellen

Die Deklaration von Spalten ist beim Arbeiten mit asymmetrischen Grids etwas anders. Sie teilen Susy die Anzahl der Spalten und das Verhältnis ihrer Größen mit einer Sass-Liste mit. Da der Inhalt von CSS-Tricks doppelt so breit ist wie die Seitenleiste, können die Spalten durch eine Liste 2 1 dargestellt werden. Das bedeutet, es gibt zwei Spalten, von denen eine doppelt so breit ist wie die andere.

Sie müssen auch den Ausgabemodus in den globalen Susy-Einstellungen auf isolate setzen.

$susy : (
  columns: 2 1, 
  output: isolate,
)

Anstatt zu sagen, dass Inhalt jetzt 8 Spalten hat, sagen wir, dass Inhalt 1 Spalte hat. Susy ist klug genug, um die Größe der Spalte zu kennen, wenn Sie ihr ihren Standort nennen. In diesem Fall ist Inhalt das erste Element.

.content {
  @include span(1 first); 
}

Ebenso müssen Sie Susy mitteilen, wie viele Spalten die Seitenleiste einnimmt und wo sie sich befindet. In diesem Fall nimmt die Seitenleiste die zweite Spalte ein, die zufällig auch das letzte Element in der Reihe ist.

.sidebar {
  @include span(1 last);
}

So wird es aussehen

Es gibt noch viel mehr zu asymmetrischen Grids, und es würde einen ganz neuen Artikel erfordern, um zu zeigen, wie man sie mit Susy erstellt. Ich habe auf meinem Blog ein einfaches Design erstellt, das die Konzepte asymmetrischer Grids erklärt und das Folgende als Beispiel verwendet.

Darüber hinaus habe ich in Learning Susy umfassend über die Erstellung eines asymmetrischen Layouts geschrieben, mit einem realistischeren Beispiel, das auf Nathan Fords Design basiert. Möglicherweise möchten Sie das Buch erwerben, wenn Sie mehr darüber erfahren möchten.

Fazit

Nun, wir sind am Ende dieser Einführung in Susy angelangt, sowie bei einigen peripheren (aber wichtigen) Themen wie Subpixel-Rundungsfehlern. Ich hoffe, Sie sind zumindest ein wenig davon überzeugt, Susy auszuprobieren.

Tatsächlich gibt es viel mehr zu Susy, als ich hier abdecken konnte. Daher verweise ich Sie auf 5 Beispielkapitel meines Buches Learning Susy. Lesen Sie sie durch und Sie werden lernen, wie Sie Susy für so viel mehr verwenden können. Außerdem, wenn Sie Fragen zu Susy oder zur Front-End-Entwicklung im Allgemeinen haben, können Sie sich gerne mit mir in Verbindung setzen.