Accentsconagua

Pure Was, warum und wie?

Code
Share

Dieses Tutorial führt Sie in Pure ein, eine CSS-Bibliothek, die aus kleinen Modulen besteht und Ihnen dabei helfen kann, schnell und einfach vollständig ansprechende Layouts zu erstellen. Auf dem Weg werde ich Sie durch die Erstellung einer einfachen Seite führen, um zu zeigen, wie Sie einige Komponenten der Bibliothek verwenden können.

Warum sollten Sie responsive Layouts erstellen??

In den letzten Jahren in der Webentwicklung, drei Wörter, die immer wieder herumspringen, sind: Responsive Web Design (RWD). An diesem Punkt 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 füllen:

  • Artikel zu WebDesign Tuts+
  • Kurse zu Tuts + Premium
  • Responsives Webdesign von Ethan Marcotte

Aber die Frage ist: Warum gehen Sie reaktionsschnell vor? Die Antwort ist, dass wir keine Kontrolle darüber haben, welche Auflösung das nächste Gerät verwenden wird, wenn sie unsere Website besuchen. Wir können nicht mehr nur Sätze wie "Am besten mit einer Auflösung von 1024 x 768" anzeigen (obwohl Sie sie immer noch im Internet finden können). Einer der Hauptgründe für dieses Phänomen war die Zunahme der Breite der PC-Monitore sowie die Verbreitung mobiler Geräte, die mit dem Internet verbunden sind. Auf der Grundlage von StatCounter sind derzeit etwa 16% der Benutzer über ein mobiles Gerät verbunden. Jetzt sage ich das nicht RWD Dabei geht es lediglich darum, eine Website für eine bestimmte Bildschirmgröße zu optimieren. Ich meine damit, dass wir unseren Nutzern, die unsere Website besuchen, eine großartige Erfahrung bieten, unabhängig von den verwendeten Geräten.

Damit ist auch klar, dass nicht jeder von uns für ein Unternehmen arbeitet, in dem jede Person eine einzige Rolle hat (Designer, Entwickler, Tester usw.). Nehmen wir an, Sie sind ein Solo-Entwickler, arbeiten als Freelancer und wissen nicht viel über Webdesign. Es gibt viele Bibliotheken, die Ihren Arbeitsablauf beschleunigen können. Die vollständigsten sind sicherlich Boostrap und Foundation, aber manchmal können sie übertrieben sein und Sie benötigen vielleicht etwas kleineres. In diesen Fällen wurde ein neues interessantes Projekt von Yahoo ins Leben gerufen, das wir verwenden können, genannt Pure.

Was ist rein??

Die Pure-Website zitierend, ist es eine Reihe kleiner, responsiver 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, aber um Ihre Website noch leichter zu machen, können Sie nur einige der verfügbaren Module hinzufügen. Grundsätzlich besteht es aus den folgenden Modulen:

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

Was ich an Pure wirklich schätze, ist, dass es auf Pure basiert Normalize.css, eine bekannte Bibliothek, die Elemente konsistenter und den modernen Standards entsprechend darstellt und auch in älteren Browsern funktioniert. Da es wirklich klein ist, bietet es keine vollständige Lösung für alle Ihre Probleme, es verfügt jedoch über mehrere vorgefertigte allgemeine Elemente der Benutzeroberfläche, die Sie auf vielen Websites im Web finden können. Ein weiteres interessantes Feature von Pure ist die hohe Erweiterbarkeit und Anpassbarkeit. Die Autoren verwendeten SMACSS und alle Klassen beginnen mit rein-, So können Sie sie leicht erkennen.

Obwohl Pure ein interessantes Projekt ist, sollten Sie bedenken, dass es wirklich neu ist und möglicherweise nicht für große Projekte geeignet ist. Tatsächlich hat die aktuelle Version (0.2.0 zum Zeitpunkt der Erstellung dieses Dokuments) einige Probleme, die Sie wahrscheinlich in reiferen Frameworks nicht finden würden, und die Dokumentation könnte auch verbessert werden. Trotzdem, ich mochte es und als Vorläufer haben Sie den Vorteil, dass Sie von Anfang an Pure studieren und lernen, was als nächstes bekanntes Projekt im Web werden könnte.

Lassen Sie uns Pure in Action sehen

Sie sagen, ein Bild sagt mehr als tausend Worte. Für uns als Entwickler und Designer ist eine Demo, mit der wir herumspielen können, sogar noch besser. Um zu sehen, was Pure für uns tun kann, erstellen wir eine grundlegende Demo-App. Unsere Demo wird aus einer einfachen Homepage bestehen, 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 soll:


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


Schritt 1: Erstellen Sie das horizontale Menü

Wie gesagt, Pure hat mehrere vorgefertigte 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 Klassen des Menümoduls zu betrachten.

Um dies mit HTML5 zu erstellen, haben wir normalerweise eine

×