Neue CSS-Funktionen, die das Webdesign verändern

Es gab eine Zeit, in der Webdesign eintönig wurde. Designer und Entwickler haben immer wieder die gleichen Arten von Websites erstellt, so sehr, dass wir von Leuten in unserer eigenen Branche verspottet wurden, weil wir nur zwei Arten von Websites erstellt haben:

Welche der beiden möglichen Websites entwerfen Sie gerade? pic.twitter.com/ZD0uRGTqqm

— Jon Gold (@jongold) 2. Februar 2016

Ist dies die Grenze dessen, was unser „kreativer“ Geist erreichen kann? Dieser Gedanke schickte einen unkontrollierbaren Stich der Traurigkeit in mein Herz.

Ich will es nicht zugeben, aber vielleicht war das das Beste, was wir damals erreichen konnten. Vielleicht hatten wir keine geeigneten Werkzeuge, um kreative Designs zu erstellen. Die Anforderungen des Internets entwickelten sich schnell, aber wir blieben bei alten Techniken wie Floats und Tabellen hängen.

Heute hat sich die Designlandschaft komplett verändert. Wir sind mit neuen und leistungsstarken Tools ausgestattet – CSS-Raster, benutzerdefinierte CSS-Eigenschaften, CSS-Formen und CSS writing-mode , um nur einige zu nennen – mit denen wir unserer Kreativität freien Lauf lassen können.

Wie CSS Grid alles verändert hat

Raster sind für das Webdesign unerlässlich; das wusstest du schon. Aber haben Sie sich schon einmal gefragt, wie Sie das Raster entworfen haben, das Sie hauptsächlich verwenden?

Die meisten von uns haben das nicht. Wir verwenden das 12-Spalten-Raster, das in unserer Branche zum Standard geworden ist.

• Aber warum verwenden wir dasselbe Raster?
• Warum bestehen Gitter aus 12 Spalten?
• Warum sind unsere Gitter gleich groß?

Hier ist eine mögliche Antwort darauf, warum wir dasselbe Raster verwenden: Wir wollen nicht rechnen .

In der Vergangenheit mussten Sie bei Float-basierten Rastern zum Erstellen eines dreispaltigen Rasters die Breite jeder Spalte, die Größe jedes Bundstegs und die Positionierung jedes Rasterelements berechnen. Dann mussten Sie Klassen im HTML erstellen, um sie entsprechend zu gestalten. Es war ziemlich kompliziert.

Um die Dinge einfacher zu machen, haben wir Grid-Frameworks eingeführt. Am Anfang erlaubten uns Frameworks wie 960gs und 1440px, zwischen 8-, 9-, 12- und sogar 16-Spalten-Grids zu wählen. Später gewann Bootstrap den Frameworks-Krieg. Da Bootstrap nur 12 Spalten zuließ und das zu ändern mühsam war, entschieden wir uns schließlich für 12 Spalten als Standard.

Aber wir sollten Bootstrap nicht die Schuld geben. Das war damals die beste Herangehensweise. Wer wünscht sich nicht eine gute Lösung, die mit minimalem Aufwand funktioniert? Nachdem das Rasterproblem gelöst war, richteten wir unsere Aufmerksamkeit auf andere Designaspekte wie Typografie, Farbe und Zugänglichkeit.

Jetzt, mit dem Aufkommen von CSS Grid, sind Grids viel einfacher geworden . Wir müssen uns nicht mehr vor Gittermathematik fürchten. Es ist so einfach geworden, dass ich behaupten würde, dass das Erstellen eines Rasters mit CSS einfacher ist als mit einem Designtool wie Sketch!

Warum?

Angenommen, Sie möchten ein 4-Spalten-Raster erstellen, wobei jede Spalte eine Größe von 100 Pixel hat. Mit CSS Grid können Sie viermal 100px in die grid-template-columns Columns-Deklaration schreiben, und es wird ein 4-Spalten-Raster erstellt.

 .grid { display: grid; grid-template-columns: 100px 100px 100px 100px; grid-column-gap: 20px; } 

Wenn Sie ein 12-Spalten-Raster wünschen, müssen Sie nur 100px 12 Mal wiederholen.

 .grid { display: grid; grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px; grid-column-gap: 20px; } 

Ja, der Code ist nicht schön, aber wir kümmern uns (noch) nicht um die Optimierung der Codequalität – wir denken immer noch über das Design nach. CSS Grid macht es für jeden – sogar einen Designer ohne Programmierkenntnisse – so einfach, ein Grid im Web zu erstellen.

Wenn Sie Grid-Spalten mit unterschiedlichen Breiten erstellen möchten, müssen Sie nur die gewünschte Breite in Ihrer grid-template-columns Deklaration angeben, und schon sind Sie fertig.

 .grid { display: grid; grid-template-columns: 100px 162px 262px; grid-column-gap: 20px; } 

Grids reaktionsfähig machen

Keine Diskussion über CSS Grid ist vollständig, ohne über den responsiven Aspekt zu sprechen. Es gibt mehrere Möglichkeiten, CSS Grid responsiv zu machen. Eine Möglichkeit (wahrscheinlich die beliebteste) ist die Verwendung der fr -Einheit. Eine andere Möglichkeit besteht darin, die Anzahl der Spalten mit Medienabfragen zu ändern.

fr ist eine flexible Länge, die einen Bruch darstellt. Wenn Sie die fr -Einheit verwenden, teilen Browser den offenen Raum auf und ordnen die Bereiche basierend auf dem fr -Vielfachen Spalten zu. Das heißt, um vier Spalten gleicher Größe zu erstellen, müssten Sie viermal 1fr schreiben.

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 20px; } 

Lassen Sie uns einige Berechnungen durchführen, um zu verstehen, warum vier gleich große Spalten erstellt werden .

Nehmen wir zunächst an, dass der für das Raster insgesamt verfügbare Platz 1260px beträgt.

Bevor jeder Spalte Breite zugewiesen wird, muss CSS Grid wissen, wie viel Platz verfügbar (oder übrig) ist. Hier werden grip-gap Deklarationen von 1260px . Da jede Lücke 20px , bleiben uns 1200px für den verfügbaren Platz. (1260 - (20 * 3) = 1200) .

Als nächstes werden die Vielfachen von fr addiert. In diesem Fall haben wir vier 1fr Vielfache, also teilen Browser 1200px durch vier. Jede Spalte ist also 300px . Deshalb erhalten wir vier gleiche Spalten.

Mit der fr -Einheit erstellte Gitter sind jedoch nicht immer gleich !

Wenn Sie fr verwenden, müssen Sie sich darüber im Klaren sein, dass jede fr -Einheit einen Bruchteil des verfügbaren (oder übrig gebliebenen) Speicherplatzes darstellt.

Wenn Sie ein Element haben, das breiter ist als eine der mit der fr -Einheit erstellten Säulen, muss die Berechnung anders durchgeführt werden.

Das folgende Raster hat beispielsweise eine große Spalte und drei kleine (aber gleiche) Spalten, obwohl es mit grid-template-columns: 1fr 1fr 1fr 1fr .

Nachdem 1200px in vier geteilt und jeder der 1fr Spalten 300px zugewiesen wurden, stellen Browser fest, dass das erste Rasterelement ein Bild mit 1000px enthält. Da 1000px größer als 300px ist, entscheiden sich Browser dafür, 1000px stattdessen der ersten Spalte zuzuweisen.

Das bedeutet, dass wir den verbleibenden Speicherplatz neu berechnen müssen.

Der neue verbleibende Platz ist 1260px - 1000px - 20px * 3 = 200px ; diese 200px werden dann entsprechend der Menge der übrig gebliebenen Bruchteile durch drei geteilt. Jeder Bruchteil ist dann 66px . Hoffentlich erklärt das, warum fr -Einheiten nicht immer Spalten gleicher Breite erzeugen.

Wenn Sie möchten, dass die Einheit fr jedes Mal Spalten mit gleicher Breite erstellt, müssen Sie sie mit minmax(0, 1fr) . Für dieses spezielle Beispiel sollten Sie auch die Eigenschaft max-width des Bildes auf 100 % setzen.

Hinweis : Rachel Andrew hat einen erstaunlichen Artikel darüber geschrieben, wie sich verschiedene CSS-Werte (Min-Content, Max-Content, fr usw.) auf die Inhaltsgröße auswirken. Es lohnt sich zu lesen!

Gitter ungleicher Breite

Um Gitter mit ungleichen Breiten zu erstellen, variieren Sie einfach das Vielfache von fr. Unten ist ein Raster, das dem Goldenen Schnitt folgt, wobei die zweite Spalte das 1,618-fache der ersten Spalte und die dritte Spalte das 1,618-fache der zweiten Spalte beträgt.

 .grid { display: grid; grid-template-columns: 1fr 1.618fr 2.618fr; grid-column-gap: 1em; } 

Grids an verschiedenen Breakpoints ändern

Wenn Sie das Raster an verschiedenen Haltepunkten ändern möchten, können Sie innerhalb einer Medienabfrage ein neues Raster deklarieren.

 .grid { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 1em; } @media (min-width: 30em) { .grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }

Ist es nicht einfach, Grids mit CSS Grid zu erstellen? Frühere Designer und Entwickler hätten für eine solche Möglichkeit getötet.

Höhenbasierte Raster

Bisher war es unmöglich, Raster basierend auf der Höhe einer Website zu erstellen, da wir nicht feststellen konnten, wie hoch der Darstellungsbereich war. Mit Viewport-Einheiten, CSS Calc und CSS Grid können wir jetzt sogar Raster basierend auf der Viewport-Höhe erstellen.

In der Demo unten habe ich Rasterquadrate basierend auf der Höhe des Browsers erstellt.

Jen Simmons hat ein großartiges Video, das über das Design für die vierte Kante spricht – mit CSS Grid. Ich empfehle Ihnen dringend, es anzuschauen.

Rasterelementplatzierung

Das Positionieren von Rasterelementen war in der Vergangenheit sehr mühsam, da Sie die Eigenschaft „ margin-left “ berechnen mussten.

Jetzt können Sie mit CSS Grid Rasterelemente ohne zusätzliche Berechnungen direkt mit CSS platzieren.

 .grid-item { grid-column: 2; /* Put on the second column */ } 

Mit dem Schlüsselwort span können Sie einem Grid-Element sogar mitteilen, wie viele Spalten es einnehmen soll.

 .grid-item { /* Put in the second column, span 2 columns */ grid-column: 2 / span 2; } 

Inspirationen

Mit CSS Grid können Sie Dinge so einfach gestalten, dass Sie schnell viele Variationen derselben Website erstellen können. Ein Paradebeispiel ist die persönliche Homepage von Lynn Fisher.

Wenn Sie mehr darüber erfahren möchten, was CSS Grid kann, besuchen Sie Jen Simmons Lab, wo sie untersucht, wie Sie verschiedene Arten von Layouts mit CSS Grid und anderen Tools erstellen.

Um mehr über CSS Grid zu erfahren, sehen Sie sich die folgenden Ressourcen an:

• Master CSS Grid, Video-Tutorials von Rachel Andrew und Jen Simmons
• Layout Land, Jen Simmons Eine Reihe von Videos zum Thema Layout
• CSS-Layout-Workshop, Rachel Andrew Ein CSS-Layout-Kurs
• Learn CSS Grid, Jonathan Suh Ein kostenloser Kurs zu CSS Grid.
• Grid Critters, Dave Geddes Eine unterhaltsame Art, CSS Grid zu lernen

Entwerfen mit unregelmäßigen Formen

Wir sind es gewohnt, rechteckige Layouts im Web zu erstellen, da das CSS-Box-Modell ein Rechteck ist. Neben Rechtecken haben wir auch Möglichkeiten gefunden, einfache Formen wie Dreiecke und Kreise zu erstellen.

Heute müssen wir hier nicht aufhören. Mit CSS-Shapes und clip-path können wir ohne großen Aufwand unregelmäßige Formen erstellen.

Beispielsweise experimentierte Aysha Anggraini mit einem Comic-inspirierten Layout mit CSS Grid und clip path .

Hui Jing erklärt, wie man CSS-Formen so verwendet, dass Text entlang der Beyonce-Kurve fließt.

Wenn Sie tiefer graben möchten, hat Sara Soueidan einen Artikel, der Ihnen hilft, nicht rechteckige Layouts zu erstellen.

CSS-Formen und clip-path geben Ihnen unendlich viele Möglichkeiten, benutzerdefinierte Formen zu erstellen, die einzigartig für Ihre Designs sind. Leider sind CSS-Formen und clip-path syntaktisch nicht so intuitiv wie CSS Grid. Glücklicherweise haben wir Tools wie Clippy und den Shape Path Editor von Firefox, mit denen wir die gewünschten Formen erstellen können.

Umschalten des Textflusses mit dem writing-mode von CSS

Wir sind daran gewöhnt, dass Wörter im Web von links nach rechts fließen, weil das Web hauptsächlich für englischsprachige Leute gemacht ist (zumindest hat es so angefangen).

Aber einige Sprachen fließen nicht in diese Richtung. Beispielsweise können chinesische Wörter von oben nach unten und von rechts nach links gelesen werden.

Der writing-mode von CSS lässt den Text in die Richtung fließen, die für jede Sprache typisch ist. Hui Jing experimentierte auf einer Website namens Penang Hokkien mit einem chinesischen Layout, das von oben nach unten und von rechts nach links fließt. Sie können mehr über ihr Experiment in ihrem Artikel „The One About Home“ lesen.

Neben Artikeln hält Hui Jing einen großartigen Vortrag über Typografie und writing-mode , „When East Meets West: Web Typography and How It Can Inspire Modern Layouts“. Ich ermutige Sie sehr, es anzusehen.

Selbst wenn Sie nicht für Sprachen wie Chinesisch entwerfen, heißt das nicht, dass Sie den CSS- writing-mode nicht auf Englisch anwenden können. Als ich 2016 Devfest.asia erstellte, ließ ich einen kleinen kreativen Muskel spielen und entschied mich dafür, Text mit writing-mode zu drehen.

Das Labor von Jen Simmons enthält auch viele Experimente mit writing-mode . Ich empfehle auch dringend, es sich anzusehen.

Anstrengung und Einfallsreichtum gehen einen langen Weg

Auch wenn die neuen CSS-Tools hilfreich sind, brauchen Sie keines davon, um einzigartige Websites zu erstellen. Ein wenig Einfallsreichtum und etwas Mühe reichen aus.

Beim Super Silly Hackathon beispielsweise dreht Cheeaun die gesamte Website um -15 Grad und lässt Sie beim Lesen der Website albern aussehen.

Darin Senneff hat einen animierten Login-Avatar mit etwas Trigonometrie und GSAP erstellt. Schauen Sie sich an, wie süß der Affe ist und wie er seine Augen bedeckt, wenn Sie sich auf das Passwortfeld konzentrieren. Ähnlich wie beim interaktiven Anmeldeformular gibt es auch einen wirklich netten und interaktiven Rechner, der hilft, die Höhe der entgangenen Einnahmen bei der Nutzung externer Dienste wie JustEat abzuschätzen!

Als ich die Verkaufsseite für meinen Kurs „JavaScript lernen“ erstellt habe, habe ich Elemente hinzugefügt, die dem JavaScript-Lernenden das Gefühl geben, zu Hause zu sein.

Einpacken

Bei einem einzigartigen Webdesign geht es nicht nur um das Layout. Es geht darum, wie sich das Design in den Inhalt integriert. Mit ein wenig Mühe und Einfallsreichtum können wir alle einzigartige Designs erstellen, die unser Publikum ansprechen. Die Werkzeuge, die uns heute zur Verfügung stehen, erleichtern unsere Arbeit.

Die Frage ist, ob es Ihnen wichtig genug ist, um ein einzigartiges Design zu erstellen? Ich hoffe du tust.