Diese Woche möchte ich über ein kleines CSS Framework berichten, das mir vor einiger Zeit im Twitter Stream aufgefallen ist 🙂 Das „Pure“ genannte Projekt steht bei Version 0.2.0 und bringt nur etwa 4.2 KB (minimiert und gzipped) auf die Waage!

Die Komponenten von Pure CSS

Das Pure CSS besteht aus mehreren Komponenten die, ähnlich wie bei Bootstrap, sauber ineinander greifen:

• Base (1.2 KB)
  Das „Base“ Paket bietet die Grundlage des Pure Pakets. Dazu gehören ein Reset-CSS, Typografie, Überschriften, Listen, usw…
• Grids (0.7 KB)
  Diese Komponente beinhaltet ein responsive Grid. Das geht bis zu 24 Spalten, allerdings müsst ihr ein wenig rechnen wenn ihr alles benutzen wollt (Denn anstatt ‚zig Klassen für z.B. 1/2, 2/4, 4/8, …, 12/24 zu bringen, gibt es pro breite nur einen).
• Forms (1.8 KB)
  Eine Komponente zum darstellen von Formular-Elementen. Unter anderem mit stylings für Legenden, Labels, Inputs usw. – darüber hinaus gibt es noch Optionen wie z.B. gestapelt oder gruppiert.
• Buttons (0.9 KB)
  Buttons in verschiedenen Zuständen (Primär, Inaktiv, …) so wie verschiedene Größen und Farben.
• Tables (0.6 KB)
  Diverse Klassen zum darstellen von HTML Tabellen (Zebra-Streifen, verschiedene Ränder, …)
• Menus (1.1 KB)
  Eine Komponente für diverse Menüs. Achtung: Drop-Down Menüs benötigen Javascript!

Oh, übrigens, es ist richtig das die KB der Einzelkomponenten zusammengerechnet mehr als 4.2 KB betragen – Wird allerdings das komplette Paket in einer Datei gespeichert, minimiert und gzipped stimmt der Wert von 4.2 KB wieder 😉

Vorgefertigtes und Code-Qualität

Es gibt einige vorgefertigte Layouts vom Pure Team, wie z.B. ein Blog, eine Galerie oder auch ein E-Mail Client. Zusätzlich zu diesen Layouts bringt das Team hinter Pure einen „Skin Builder“, mit dessen Hilfe man viele Dinge des Pure Frameworks anpassen kann – auch hier gibt es wieder eine gewisse Ähnlichkeit zu Bootstrap, wenn auch nicht ganz so umfangreich.

Das gesamte Pure Projekt ist mit Hilfe des SMACSS Styleguides aufgebaut – Das bedeutet es ist sauber strukturiert und sollte (für Leute die mit dem Styleguide vertraut sind) einfach zu erweitern sein.

Fazit

Das Pure CSS gefällt mir schon sehr gut, nicht nur weil es besonders schlank ist, sondern auch weil es sich auf die wirklich wesentlichen Dinge beschränkt und die einzelnen Komponenten „optional“ gemacht hat. Es versucht keine „Komplettlösung“ zu sein und motiviert dazu diese Basis um eigene Styles zu erweitern! Außerdem wurde das CSS mit „dem Gedanken an Mobile Geräte“ gebaut („Made with mobile in mind.“):
Das Team achtet also nicht nur so zum Spaß auf die Dateigröße. Außerdem ist Pure von Grund auf responsive, ob ihr nun das Grid nutzt oder nicht – das macht sich unter anderem bei der Schriftgröße, den Abständen, Formular-Elementen und Buttons bemerkbar.

Dennoch ist es ein (noch) sehr junges Projekt, weswegen man es ggf. mit Vorsicht genießen sollte… Ich würde es vielleicht nicht direkt für mein nächstes Projekt einsetzen, doch ich habe die Entwicklung auf github im Auge!

Ich hoffe ich konnte euch diese Woche was interessantes neues zeigen und würde mich freuen, wenn ihr auch nächste Woche wieder reinschaut! Bis dahin wünsche ich euch allen eine sonnige Woche und natürlich „Happy Coding“!