Wenn Sie wie viele Entwickler sind, verfügen Sie bereits über gridbasierte CSS-Frameworks. Nun, Sie haben Glück, weil wir uns heute mit einem neuen Konzept eines CSS-Frameworks beschäftigen werden.
EZ-CSS versucht, viele der Dinge anzugehen, die Sie an Grid-basierten Frameworks hassen, und dabei die Funktionalität beibehalten, die bei der Erstellung von browserübergreifenden mehrspaltigen Layouts hilfreich ist.
Was ist EZ-CSS?
EZ-CSS ist ein von Thierry Koblentz entwickeltes CSS-Framework. Das Konzept ähnelt dem Konzept anderer Frameworks wie 960.gs oder Blueprint CSS, ist jedoch auch völlig anders.
Der Hauptunterschied zwischen EZ-CSS und anderen Frameworks, die Sie gesehen haben, besteht darin, dass Sie hier nicht an ein festgelegtes Raster gebunden sind, sondern einen großen Freiheitsgrad über die Spaltenbreite haben. Tatsächlich können Sie beliebig viele Spalten mit beliebiger Breite und Rinnengröße erstellen.
EZ-CSS verwendet auch ein einzigartiges Modullayout, das ein superschnelles Prototyping ermöglicht. Wir werden später darauf näher eingehen, aber im Wesentlichen sind Sie darauf angewiesen, vorgefertigte Teile eines Layouts zu kopieren und einzufügen, die Sie kombinieren und verschachteln können, unabhängig davon, ob Sie ein komplexes Ganzes erstellen möchten.
Die endgültigen Vorteile dieses Frameworks sind Größe und Einfachheit. Die erforderliche CSS-Datei ist nur etwa 1 KB groß und das gesamte System ist viel einfacher zu erlernen als andere Frameworks, die Sie gesehen haben. Das Fehlen von Einschränkungen und zusätzlichen Hacks wie das Einfügen von divs zum Löschen Ihrer Floats führt zu einem einfacheren Workflow mit (theoretisch) weniger Markup.
EZ.CSS
Als erstes müssen Sie die kostenlose Datei ez.css herunterladen. Gehen Sie dazu in den EZ-CSS-Downloadbereich und greifen Sie auf ez-min.css zu. Es gibt viele andere optionale Dateien, aber dies ist wirklich die einzige, die Sie benötigen, um loszulegen.
Werfen Sie dies in ein Verzeichnis mit einer einfachen HTML-Datei und verknüpfen Sie es mit dem folgenden Snippet:
Natürlich müssen Sie den Pfad an Ihre eigene Ordnerhierarchie anpassen.
Module verstehen
Wie bereits erwähnt, dreht sich die Kernfunktionalität von EZ-CSS um eine Reihe vorgefertigter Module, die Sie einfach kopieren und in Ihren Code einfügen, um das Layout zu definieren.
Auf der Layoutseite der Website stehen sieben Module zur Auswahl: Plain Box, 2A, 2B, 3A, 3B, 4A und 4B. Wie Sie in der Abbildung unten sehen können, enthält jedes Modul entweder 1, 2, 3 oder 4 Spalten.
Mit diesen einfachen Bausteinen können Sie eine Menge unglaublich komplexer Layouts erstellen. Sie erreichen dies durch Verschachtelung. Nehmen wir also an, Sie verwenden Modul 2A, um ein zweispaltiges Layout zu erstellen, und möchten die linke Spalte in drei Abschnitte unterteilen. Sie fügen einfach den Code für Modul 3A in den Code für Modul 2A ein und schon kann es losgehen!
Auf der Layoutseite befinden sich auch mehrere vorgefertigte Layouts, die die Module bereits kombinieren und somit einen Großteil der Arbeit für Sie erledigen!
Ein Beispiel
Um ein Gefühl für die Funktionsweise zu bekommen, erstellen wir ein schnelles und schmutziges Modell mit dem EZ-CSS-Framework. Wir werden im Grunde eines der vorgefertigten Layouts erstellen, aber von Grund auf neu erstellen, um ein Gefühl für den Prozess des Erstellens eines eigenen Layouts zu erhalten.
Wenn Sie die obigen Schritte ausgeführt haben, sollten Sie über ein Verzeichnis mit einer HTML-Datei und der Datei ez-min.css verfügen. Fügen Sie dazu eine style.css-Datei hinzu und verknüpfen Sie sie in Ihrem HTML-Code. Als nächstes den Text für die? Plain Box? Modul und fügen Sie es in den Körper Ihres CSS.
Wichtig: Da dies unser Hauptcontainer sein wird, habe ich den? Ez-wr? Klasse zum? ez-mw? Klasse. Dieser Schritt zentriert das gesamte Layout aus, links richtet den Text im Container aus und verhindert, dass Ihr neues Layout alle vorherigen (linken) Floats löscht.
Header hinzufügen
Der erste Abschnitt, den wir hinzufügen möchten, ist eine Kopfzeile. Da dies sich über die gesamte Seite erstrecken wird, benötigen wir eine weitere "Plain Box". Modul (verlassen Sie diesmal die Klasse EZ-Wr). Um dies einzufügen, schachteln wir es in den? Ez-mw? div, ersetzt die? ez-Box? div das war früher da. Das klingt komplexer als es wirklich ist und führt zu den wenigen Codezeilen unten.
Beachten Sie, dass ich auch einige benutzerdefinierte ID / Class-Tags eingefügt habe, damit wir diese Elemente nach unseren eigenen Vorstellungen gestalten können. Ich wollte die vorhandenen EZ-CSS-Klassen nicht formatieren, da ich sie auf einer Website möglicherweise anders benutze.
Styling der Kopfzeile
Um einen Eindruck davon zu bekommen, wie sich das alles entwickelt, springen wir voran und fügen der Kopf- und Kopfzeile einige Stile hinzu.
Hier sind einige wichtige Dinge zu beachten. Erstens sind die Standard-EZ-CSS-Layouts fließend. Das ist für einige Zwecke fantastisch, aber ich wollte kein fließendes Layout, also habe ich einfach eine Breite auf den Container angewendet, um ihn abzugraben. Alles andere ist nur ein paar schnelle und unordentliche Styles, die ich mir nur angeeignet habe, um dem Header eine Art Aussehen zu verleihen. Ich werde diese Stile für die Fußzeile wiederholen, sodass ich sie zu einer Klasse anstatt einer ID gemacht habe.
Das Ergebnis ist alles andere als bemerkenswert, aber es ist ein Anfang!
Erstellen eines 2-Spalten-Layouts
Um etwas Inhalt hinzuzufügen, packen wir das Modul 2A und werfen es hinter dem Header in den Wrapper. Wir werden einige Dummy-Bilder in die linke Spalte und Text in die rechte Spalte einfügen.
An divs (neun um genau zu sein) gibt es immer noch keinen Mangel, aber es ist besser als es war. Anscheinend sind die EZ-Box-Container meist für optionales Styling vorhanden. Wir haben einen anderen Weg für unser Styling gewählt, sodass wir sie nicht wirklich einbeziehen mussten. Dies fügt dem Kopieren und Einfügen etwas mehr Arbeit hinzu, aber in Wirklichkeit nicht viel. Seien Sie vorsichtig bei den Divs, die Sie schneiden, und beobachten Sie genau, wie sich diese auf Ihr Layout auswirken.
Fazit
Vor ein paar Tagen hatte ich noch nie etwas von EZ-CSS gehört, also finde ich es immer noch heraus und versuche zu entscheiden, ob ich es mag. Ich finde es gut, dass es eine neue Sicht auf ein CSS-Framework ist, das nicht die gitterbasierte Struktur ist, die wir auf fünfzig verschiedenen Wegen gesehen haben, die letztlich auf konzeptioneller Ebene gleich sind.
Wenn ich weiter mit EZ-CSS spiele, um zu sehen, was möglich ist und was nicht, höre ich gerne Ihre Gedanken. Sie haben immer wieder bewiesen, dass Sie bei der Analyse der Nützlichkeit dieser Tools in der realen Welt aufschlussreicher sind als ich. Deshalb werfen wir Ihnen dieses Werkzeug zurück. Hier sind ein paar Fragen für Gesprächsanfänger:
1. Löst EZ-CSS Ihre Probleme mit 960 und anderen Grid-Frameworks?
2. Gibt es Vor-und Nachteile, die ich verpasst habe?
3. Was sind einige Einschränkungen für dieses System?
4. Kann EZ-CSS in der realen Welt oder nur zum Prototyping eingesetzt werden?
Setzen Sie zu diesen und allen anderen verwandten Themen, die Ihnen in den Sinn kommen, zwei Cent!