Accentsconagua

Pure.css bietet eine faszinierende Alternative zu Bootstrap

Code
Share
Was Sie erstellen werden

Was ist Pure.css??

Während Bootstrap einen großen Teil des Webs übernommen hat, kann dies eine gewisse Leistungsbelastung für Websites bedeuten, die für Ihr nächstes Projekt möglicherweise nicht erforderlich ist. Pure.css ist das responsive Framework von Yahoo. Es bietet eine minimalistische, gut dokumentierte und flexible Alternative. 

In diesem Tutorial werde ich Ihnen Pure vorstellen, "eine Reihe kleiner, responsiver CSS-Module, die Sie in jedem Webprojekt verwenden können." Wir werden den Funktionsumfang und die Vorteile der Verwendung von Pure durchgehen und dann einige grundlegende Beispielanwendungen durchgehen.

Wenn Sie weitere Tutorials oder Fragen und Kommentare zu Today haben, geben Sie diese bitte unten an. Sie können mich auch auf Twitter erreichen @reifman direkt.

Plattform auswählen

Pure bietet alle üblichen Funktionen, die Sie in einem Standard-Webdesign-Framework benötigen. Unabhängig davon, ob Sie ein Theme für WordPress oder eine eigene Website erstellen, könnte dies eine gute Option sein.

Für Projektmanager ist es in der Regel wichtig, dass Kundenprojekte mit Standardwerkzeugen erstellt werden, die leicht zu verstehen und zu pflegen sind, und vor allem, dass es leicht ist, Talente zu rekrutieren, die mit Ihrer Plattformerfahrung gesammelt werden. Bootstrap ist dafür perfekt. Pure scheint mir einfach genug, dass es auch ein guter Ausgangspunkt sein kann.

Die reine Funktionsübersicht

Hier ist eine Zusammenfassung der Vorzüge und Funktionen von Pure. Es bietet:

Pure.css ist jedoch äußerst beeindruckend, einfach 4,5 KB minimiert + gekürzt. So viel Speicherplatz beanspruchen die verschiedenen Komponenten von Pure in Ihrer Produktionsumgebung:

Pure ist auch gut getestet und funktioniert in IE 8+, Firefox, Chrome, Safari, iOS 6-8 und Android 4.x.

Sie können es weiterhin mit Elementen von Bootstrap verwenden und diese dort hinzufügen, wo Sie sie benötigen. Ich werde ein Beispiel dafür zeigen.

Pure basiert auf Normalize.css, das die Leistung des Frameworks für alle Browser standardisiert. Normalize bietet einen Standard-CSS-Reset, der:

  • bewahrt nützliche Standardeinstellungen
  • Normalisiert Stile für eine Vielzahl von Elementen
  • behebt Fehler und häufige Browser-Inkonsistenzen
  • Verbessert die Benutzerfreundlichkeit mit subtilen Verbesserungen
  • erläutert, was der Code mit ausführlichen Kommentaren macht

Erste Schritte mit Pure

Die Website von Pure basiert auf einem Framework, daher führt der minimalistische, gut entwickelte Code zu einer einfach zu bedienenden, benutzerfreundlichen Anleitung. Hier ist ein Beispiel für das linke Menü von Pure in Aktion:

Sie können Pure auf Ihrer Seite über das kostenlose CDN von Yahoo hinzufügen. Fügen Sie einfach folgendes hinzu Element in Ihre Seite , vor den Stylesheets Ihres Projekts:

Um die Reaktionsbreite Ihrer Website zu initialisieren, setzen Sie ein Meta-Tag für das Ansichtsfenster auf die Breite Ihres Geräts:

Layouts

Auf seiner Seite Layouts bietet Pure eine Auswahl an Downloads für verschiedene Beispielseiten für allgemeine Anwendungsanforderungen:

Sie können alle durchsuchen und herunterladen, mit denen Sie experimentieren oder Ihrer Anwendung hinzufügen möchten. Diese schließen ein:

  • Blog
  • Email
  • Fotogallerie
  • Zielseite
  • Preisgalerie
  • Responsives Seitenmenü
  • Responsive Horizontal-to-Vertical-Menü
  • Responsives Horizontal-zu-Bildlauf-Menü

Die reine Basis

Die Basisseite bietet einen kurzen Hintergrund zur Basis unterhalb des Pure-Frameworks, hauptsächlich Normalize.css:

Normalize.css ist eine kleine CSS-Datei, die eine bessere browserübergreifende Konsistenz bei der Standardgestaltung von HTML-Elementen bietet. Es ist eine moderne, HTML5-fähige Alternative zum herkömmlichen CSS-Reset.

Sie können Normalize auch separat mit Yahoo-CDN zur unabhängigen Verwendung laden:

Es gibt noch weitere kleine Grundlagenfunktionen, wie beispielsweise Klassen, die Pure anweisen, Bilder per Viewport ansprechend zu laden:

Schauen wir uns nun einige der Beispiel-Layouts an, die Pure bietet.

Gitter

Raster sind ein Schlüsselaspekt von Website-Layouts, den Pure relativ einfach macht. Hier ein kurzes Beispiel für ein Pure-Grid mit vier Spalten auf einem Desktop-Display:

Und so wird es auf einem Tablettgröße-Ansichtsfenster um die Hälfte reduziert:

Und zum Schluss noch eine einzige Spalte auf einem Smartphone:

Pure Grids bestehen aus zwei Klassen: Grids und Units. Untergeordnete Elemente von Grid-Divs müssen Unit-Divs sein. Ihr Inhalt geht in die Unit-Divs. Anteilsklassen werden nach ihren Breiten benannt. Zum Beispiel hat pure-u-1-4 eine Breite von 25%..

Hier ist der Code für das responsive Quarter oben:

 
 
 
 
Lorem Ipsum
 
 Lorem ipsum dolor sitzen amet, consectetur adipisicing elit, sed do eiusmod temporary incididunt ut labore und dolore magna aliqua. Ut en ad ad minim veniam. 
 
 
 
 
 
Dolor Sit Amet
 
 Quis nostrud Übung ullamco laboris nisi ut aliquip ex ea commodo follat. Duis aute irure dolor in reprehenderit in voluptate velit esse. 
 
 
 
 
 
Proident Laborum
 
 In culpa qui officia deserunt mollit anim id est laborum. incididunt ut labore und dolore magna aliqua. Ut enim ad minim veniam, quis nostrud Übung ullamco. 
 
 
 
 
 
Präsentieren Sie consectetur
 
 Ganze Vitae Lectus Accumsan, Egestas dui Eget, Uramcorperurne. In feugiat tortor bei turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.

Wie du oben sehen kannst,  

repräsentiert die äußere Gitterklasse. Dann, 
 weist den Browser an, eine einzelne Spalte für minimale Ansichtsfenster, halbe Spalten für mittlere und Viertelspalten für große Breite anzuzeigen.

Hier erfahren Sie mehr über Pure Grids.

Formen

Pure bietet Unterstützung für die Ausrichtung von Eingabefeldern in Formularen und für die Gestaltung spezieller Felder, z.

  • Inline-Formulare
  • Gestapelte Formulare
  • Zweispaltige Formulare
  • Mehrspaltenformulare (oben gezeigt)
  • Gruppierte Eingänge
  • Erforderliche Eingaben
  • Deaktivierte Eingänge
  • Nur Eingänge lesen
  • Gerundete Eingaben
  • Kontrollkästchen und Funkgeräte

Sie können all das hier beschrieben sehen. Sehen wir uns ein zweispaltiges Formular an, auf das Pure als ausgerichtetes Formular verweist:

Mit der rein formschlüssig Klasse mit reine Kontrollgruppe (n), Pure stellt sicher, dass jeder Feldsatz wie oben gezeigt richtig positioniert ist.

form>

Dies ist eine ziemlich einfache Methode, um eine sehr benutzerfreundliche, übersichtliche Form zu erstellen.

Tabellen

Pure macht das Erstellen und Formatieren von Tabellen ebenfalls ganz einfach. Hier ist ein Beispiel für einen horizontal gestreiften Tisch:

Sie können die Tabelle oben durch einfaches Hinzufügen codiert sehen pure-table-ungerade Klassenzeilen alternierend durch Ihren Code, um das Striping zu ändern:

  
 # Machen Modell Jahr 
   
 1 Honda Übereinstimmung 2009 
 
 2 Toyota Camry 2012 
 
 3 Hyundai Elantra 2010 
 
 4 Ford Fokus 2008 
 
 5 Nissan Sentra 2011 
 
 6 BMW M3 2009 
 
 7 Honda Civic 2010 
 
 8 Kia Seele 2010

Es gibt eine Reihe weiterer Tabellenbeispiele.

Menüs

Menüs in Pure sind auch leicht zu bedienen, darunter:

  • Vertikales Menü
  • Horizontales Menü
  • Ausgewählte und deaktivierte Elemente
  • Dropdowns
  • Vertikales Menü mit Untermenüs
  • Scrollbares horizontales Menü
  • Scrollbares vertikales Menü
  • Responsive Vertical-Menü
  • Responsives Horizontal-Scrollbares Menü
  • Responsive Horizontal-to-Vertical-Menü

Alle hier abgebildeten Menüs anzeigen. So programmieren Sie ein Dropdown-Menü:

Im Grunde ist es nur eine reines menü horizontal's reine menüliste und pure-menu-item pure-menu-has-children pure-menu-allow-hover und dann eine Liste der untergeordneten Menüpunkte:

 
     
  • Zuhause
    •  
  •  Kontakt 
       
    • Email
      •  
    • Twitter
      •  
    • Tumblr-Blog
      •  
     
    •

Pure bietet ein Beispiel-JavaScript zum Implementieren zusätzlicher Eingabehilfefunktionen in Ihren Menüs.

Weitergehen

Die Website von Pure bietet einige ausgezeichnete Anleitungen zum Aufbau des Frameworks:

  • Verwenden von Tools mit Pure wie Bower und Grunt
  • Anpassen von Pure und Verwenden der Codebase-Slices für sich
  • Reine Features und Klassen erweitern

Sie können die Kombination von Pure mit Bootstrap und JavaScript erkunden. Wenn Sie mit der geringen Stellfläche und dem minimalistischen Stil von Pure beginnen möchten, können Sie dennoch verschiedene Bootstrap-Funktionen nutzen und nur das laden, was Sie benötigen. 

Hier ist ein Beispiel für einen modifizierten Bootstrap-Dialog über Pure, den Sie auf der Erweiterungsseite von Pure sehen können:

Abschließend

Bootstrap wird zur IBM von Web-Frameworks. Es ist ansprechend, es ist ein Standard, und man kann nicht gefeuert werden, wenn man es wählt (Bei einem kürzlich abgeschlossenen Vertrag mussten wir tatsächlich einen Theme-Entwickler auslösen, da Bootstrap nicht ordnungsgemäß implementiert wurde.). Wenn Sie jedoch etwas kleineres, schnelleres und einfacheres möchten, sollten Sie sich Pure.css ansehen.

Wenn Sie es versuchen, teilen Sie mir bitte Ihre Erfahrung in den Kommentaren mit. Sie können mich auch direkt auf Twitter @reifman erreichen. Sie können auch meine Envato Tuts + Instructor-Seite durchsuchen, um meine anderen Tutorials zu lesen.

ähnliche Links

  • Der reine Blog
  • Pure auf GitHub
  • Pure: Was, warum und wie? (Envato Tuts +) 
  • Vergleiche mit Bootstrap
Code
×