Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

Pure: Was, warum und wie?

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

In diesem Tutorial lernen Sie Pure kennen, eine CSS-Bibliothek aus kleinen Modulen, mit der Sie auf sehr schnelle und einfache Weise vollständig reaktionsschnelle Layouts erstellen können. Unterwegs werde ich Sie durch die Erstellung einer einfachen Seite führen, um hervorzuheben, wie Sie einige der Komponenten der Bibliothek verwenden können.


Warum muss man responsive Layouts erstellen?

In den letzten Jahren in der Webentwicklung tauchen immer wieder drei Wörter auf: Responsive Web Design (RWD). Zu diesem Zeitpunkt sollten Sie bereits wissen, was es ist, aber für den Fall, dass Sie es verpasst haben, finden Sie hier einige Ressourcen, um die Lücken zu schließen:

Aber die Frage ist: Warum reagieren? Die Antwort ist, dass wir keine Kontrolle darüber haben, welche Auflösung das nächste Gerät beim Besuch unserer Website verwenden wird. Wir können nicht mehr nur Sätze wie "Am besten mit einer Auflösung von 1024 x 768 angezeigt" anzeigen (obwohl Sie sie immer noch im Internet finden können). Einer der Hauptgründe für dieses Phänomen war die zunehmende Breite von PC-Monitoren und auch die Verbreitung mobiler Geräte, die mit dem Internet verbunden sind. Basierend auf StatCounter sind derzeit ~ 16% der Benutzer über ein mobiles Gerät verbunden. Jetzt sage ich nicht, dass es bei RWD nur darum geht, eine Website für eine bestimmte Bildschirmgröße zu optimieren. Ich meine, dass wir Benutzern, die unsere Website besuchen, unabhängig von den verwendeten Geräten eine großartige Erfahrung bieten.

Vor diesem Hintergrund ist auch klar, dass nicht alle von uns für ein Unternehmen arbeiten, in dem jede Person eine einzige Rolle spielt (Designer, Entwickler, Tester usw.). Nehmen wir also an, Sie sind Einzelentwickler, arbeiten als Freiberufler und wissen nicht viel über Webdesign. Es stehen viele Bibliotheken zur Verfügung, die Ihren Workflow beschleunigen können. Die vollständigsten sind sicherlich Boostrap und Foundation, aber manchmal können sie übertrieben sein und Sie brauchen möglicherweise etwas Kleineres. In diesen Fällen wurde von Yahoo ein neues interessantes Projekt namens Pure gestartet, das wir verwenden können.


Was ist Pure?

Unter Berufung auf die Pure-Website handelt es sich um eine Reihe kleiner, reaktionsschneller CSS-Module, die Sie in jedem Webprojekt verwenden können. Wie bereits erwähnt, ist die gesamte Bibliothek mit nur 4,2 KB minimiert und komprimiert. Um Ihre Website jedoch noch leichter zu gestalten, können Sie nur einige der verfügbaren Module hinzufügen. Grundsätzlich besteht es aus folgenden Modulen:

  • Base
  • Gitter
  • Formen
  • Tasten
  • Tabellen
  • Menüs

Eines der Dinge, die ich an Pure sehr schätze, ist, dass es auf Normalize.css basiert, einer bekannten Bibliothek, die Elemente konsistenter und nach modernen Standards wiedergibt und auch in älteren Browsern funktioniert. Da es sehr klein ist, bietet es keine vollständige Lösung für alle Ihre Probleme, verfügt jedoch über mehrere vorgefertigte gemeinsame Benutzeroberflächenelemente, die Sie auf vielen Websites im Web finden können. Ein weiteres interessantes Merkmal von Pure ist, dass es sehr erweiterbar und anpassbar ist. Die Autoren haben SMACSS verwendet, um es zu erstellen, und alle Klassen beginnen mit pure-, sodass Sie sie leicht erkennen können.

Obwohl Pure ein interessantes Projekt ist, denken Sie daran, dass es wirklich neu ist und möglicherweise nicht für große Projekte geeignet ist. Tatsächlich weist die aktuelle Version (0.2.0 zum Zeitpunkt dieses Schreibens) einige Probleme auf, die Sie in ausgereifteren Frameworks wahrscheinlich nicht finden würden, und die Dokumentation könnte ebenfalls verbessert werden. Trotzdem hat es mir gefallen und als Vorläufer haben Sie von Anfang an den Vorteil, Pure zu studieren und zu lernen, was schließlich das nächste bekannte Projekt im Web sein könnte.


Lassen Sie uns Pure in Aktion sehen

Sie sagen, dass ein Bild mehr sagt als tausend Worte. Für uns als Entwickler und Designer ist eine Demo, mit der wir herumspielen können, noch besser. Um zu sehen, was Pure für uns tun kann, erstellen wir eine grundlegende Demo-App. Unsere Demo besteht aus einer einfachen Homepage, die einige Informationen über mich enthält (manchmal macht mir meine Fantasie Angst). Das Bild unten zeigt Ihnen, wie das Endergebnis auf einem großen Bildschirm aussehen sollte:

Final Result on Desktop

Das folgende Bild zeigt Ihnen stattdessen, wie es auf einem Smartphone aussehen wird:

Final Result on Mobile

Schritt 1: Erstellen Sie das horizontale Menü

Wie gesagt, Pure hat mehrere vorgefertigte gemeinsame Elemente, die Sie auf vielen Websites im Web finden können. Ein horizontales Menü ist sicherlich eines davon und gibt uns die Möglichkeit, einige der Klassen des Menümoduls zu betrachten.

Um dies mit HTML5 zu erstellen, haben wir normalerweise ein <nav> -Element, das eine ungeordnete Liste umschließt, die die Hauptlinks unserer Website enthält. Sobald die Liste erstellt ist, müssen wir sie horizontal anzeigen. Um dies zu erreichen, müssen wir drei Klassen auf den Listen-Wrapper(<nav>) anwenden: .pure-menu, .pure-menu-open und .pure-menu-horizontal. Die erste Klasse wendet Regeln an, die allen Menüs in Pure gemeinsam sind. Die Klasse .pure-menu-open wird verwendet, um die Listenelemente anzuzeigen (anstatt sie auszublenden), während die Klasse .pure-menu-horizontal die Liste der Elemente in derselben Zeile anzeigt. Bitte beachten Sie, dass das Menü standardmäßig nicht zentriert ist.

Um die Benutzeroberfläche zu verbessern, sollten wir jetzt das Listenelement markieren, das auf die aktuelle Seite verweist. Dies erfolgt durch Anwenden der vom .pure-menu-selected Klasse auf das <li> -Element, das Sie hervorheben möchten. Auf diese Weise wechselt die Farbe des Textes von grau zu schwarz.

Der vollständige Code unseres Menüs wird unten angezeigt:


Schritt 2: Die Beschreibung des Autors

Nach dem Menü sehen Sie, dass wir eine ideale "Reihe" haben, die auf der linken Seite ein Foto und auf der rechten Seite eine kleine Beschreibung von mir enthält. Diese "Zeile" ist eigentlich ein responsives Raster aus zwei Rastereinheiten, wobei das erste das Foto umschließt und 25% seines Platzes einnimmt, während das zweite die Beschreibung umschließt und die verbleibenden 75% einnimmt, solange die Breite des Bildschirm ist größer als 767px. Im Gegenteil, wenn die Bildschirmbreite gleich oder kleiner ist, werden die Rastereinheiten gestapelt und belegen 100% der verfügbaren Breite. Bitte beachten Sie, dass die Einheiten eine Breite von 100% haben. Wenn die darin enthaltenen Elemente kleiner sind, nehmen sie nur einen Teil der Einheit ein. Um zu sehen, wie dies funktioniert, versuchen Sie, die Fenstergröße zu ändern, und stellen Sie fest, dass das Foto nicht 100% der Breite beansprucht, während gleichzeitig die Rastereinheiten gestapelt sind.

Wie bereits erwähnt, verfügt Pure über ein spezielles Modul zum Verwalten von Rastern. Um ein responsives Raster zu deklarieren, müssen Sie auf den Container eine Klasse namens .pure-g-r anwenden. Die Rastereinheiten haben jedoch einen ähnlichen Namen: .pure-u-*-*, wobei der letzte Teil der Klasse angibt, wie viel Platz die angegebene Einheit einnimmt. Wenn Sie beispielsweise auf ein Element der Klasse .pure-u-1-4 anwenden, werden 25% der verfügbaren Breite reserviert, wie ich es für das Foto getan habe. Ein anderes Beispiel könnte .pure-u-2-3 sein, wodurch die Einheit 66,6% des Gitterraums einnehmen kann.

Dieses Rastersystem ist wirklich interessant, da es Ihnen viel Zeit sparen kann, wenn Sie nicht wissen, wie Sie float-, clear- und andere Regeln zum Erstellen von Layouts verwalten. Darüber hinaus ersparen sie Ihnen den Aufwand, die reaktionsschnelle Seite des Layouts zu verwalten.

Vor diesem Hintergrund sollte der Code, der das erste Raster implementiert, folgendermaßen aussehen:


Schritt 3: Das Informationsraster

Das zweite und letzte Gitter ist in drei gleiche Teile geteilt. Ich habe sie erstellt, um Ihnen andere Komponenten der Bibliothek zu zeigen, damit Sie einen guten Überblick über sie haben. Tatsächlich hat die erste Einheit eine Tabelle, die zweite eine Form und die dritte ein vertikales Menü.

Der folgende Code zeigt Ihnen, wie Sie das Raster in drei Teile aufteilen:

Lassen Sie uns nun jede Einheit dieses reaktionsfähigen Gitters untersuchen.


Schritt 4: Eine responsive Tabelle

Ein weiteres verfügbares Modul in Pure sind Tabellen. Wie der Name schon sagt, enthält es Regeln zum Stylen eines -<table> Elements und seiner untergeordneten Elemente. Standardmäßig wird Tabellen ein vertikaler Rand zugewiesen, der auf visuell getrennte Spalten angewendet wird. Sie können jedoch auch einen horizontalen Rand hinzufügen, indem Sie die .pure-table-bordered Klasse mit dem reinen Tabellenrand anwenden oder nur die letztere mit der .pure-table-horizontal Klasse mit dem reinen Tabellenrand für das <table> Element anzeigen. Darüber hinaus können Sie gestreifte Tabellen erstellen, um den Benutzer beim Lesen der Daten zu unterstützen. Um dies zu erreichen, haben Sie zwei Möglichkeiten. Der erste funktioniert mit Browsern, die das nth-child unterstützen, und besteht darin, den Klassennamen .pure-table-striped auf das Element <table> anzuwenden. Der zweite funktioniert stattdessen in allen Browsern, einschließlich Internet Explorer 8 und niedriger, ist jedoch ausführlicher. Es besteht aus dem Hinzufügen des Klassennamens .pure-table-odd zu jedem anderen <tr> -Element. Aus Kompatibilitätsgründen werde ich mich für den zweiten Ansatz entscheiden.

Derzeit haben Tabellen ein Problem, wenn sie auf kleinen Bildschirmen angezeigt werden. Dieses Problem wird jedoch in der nächsten Version behoben. Bitte beachten Sie, dass Sie es in der Demo nicht sehen werden, da ich es behoben habe. High Five für mich.

Der Code, der die gestreifte Tabelle erstellt, wird unten angezeigt:


Schritt 5: Ein gestapeltes Kontaktformular

Formulare sind ein weiteres Modul der Pure-Bibliothek. Sie können Ihre Formulare in verschiedenen Stilen anzeigen. In dieser Demo erstellen wir ein gestapeltes Formular, in dem sich die Eingabeelemente unter den Beschriftungen befinden. Dazu müssen wir dem <form> -Element die Klassen .pure-form und .pure-form-stacked hinzufügen. Dann müssen wir sowohl das label als auch die input-Tags in einem Wrapper platzieren, wo wir die .pure-control-group-Klasse anwenden und dann alle diese Wrapper in ein <fieldset> -Element einfügen. Der Submit- und der Reset-Button haben ebenfalls einen Wrapper, aber ihr Wrapper hat die Klasse .pure-control. Bitte beachten Sie, dass wir für die Senden-Schaltfläche die Klasse .pure-button-primary verwendet haben, um sie hervorzuheben. Die zitierte Klasse gehört zum Buttons-Modul und wird verwendet, um den Stil der Button zu ändern und eine blaue Farbe anzuwenden.

So sollte Ihr Formularcode aussehen:


Schritt 6: Ein vertikales Menü mit einer Kopfzeile

Das letzte Element, das Sie mit Pure erstellen lernen, ist ein vertikales Menü mit einer Kopfzeile. Ein Menü dieses Typs ist ringsum mit einem schwarzen Rand versehen. Um es zu verwenden, wenden wir auf den Listen-Wrapper zwei der drei Klassen an, die wir bereits im ersten Schritt verwendet haben, nämlich .pure-menu und .pure-menu-open. Um den Header zu erstellen, müssen wir außerdem ein weiteres Element hinzufügen und darauf die Klasse .pure-menu-heading anwenden.

Der Code für dieses Menü ist unten aufgeführt:


Abschluss

Damit ist diese Einführung in Pure abgeschlossen. Ich hoffe, dass es Ihnen gefallen hat. Wenn Sie die Entwicklung von Pure verfolgen möchten, können Sie das Repository auf GitHub besuchen. Sie können gerne Probleme einreichen, Pull-Anfragen stellen und Beiträge leisten.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.