Dieter Petereit 7. Januar 2013

Centurion – Neues HTML5/CSS3-Framework für Rapid Responsive Prototyping

Und schon wieder ist ein neues HTML5/CSS3-Framework für die beschleunigte Web-Entwicklung erschienen. Wer soll da noch den Überblick behalten? Centurion wirkt auf den ersten Blick wie eine Mischung aus Twitters Bootstrap und dem 960.gs. Entwickler Justin Hough will Centurion mehr als Boilerplate zur schnellen Theme-Entwicklung verstanden wissen. In der Tat ist es für ein ausgewachsenes Framework im Vergleich zu anderen Vertretern zur Zeit noch etwas schmächtig…

Centurion – Framework oder Boilerplate?

Mir persönlich gefällt Houghs Entscheidung, Centurion mit SASS zu entwickeln und auch so zu publizieren. Immerhin ist Centurion in der Form des browser-lesbaren CSS deutlich komplex. Die Verwendung von SASS erlaubt es dem Entwickler, und insbesondere dem, der das Framework nicht selbst erstellt hat, den Überblick zu behalten.

Nach eigenen Angaben entstand Centurion vornehmlich aus dem eigenen Bedarf. Als Front-End-Entwickler und Mitgründer der Webdesign-Schmiede Room 316 Studios benötigt Hough natürlich stets eine solide Basis für die Entwicklung des nächsten Kundenprojekts. Wie Hough in einem Blogpost zum Framework erläutert, brauchte er Jahre, zu erkennen, dass, ungeachtet der schlussendlichen Optik, allen Web-Projekten Gesetzmäßigkeiten und grundlegende Elemente gemeinsam sind. Diese versuchte er für sich zu erarbeiten. Als Ergebnis entstand Centurion.

Centurion ist so angelegt, dass es prinzipiell die Basis eines beliebigen Themes für ein beliebiges CMS oder auch ein reines Frontend sein kann. Mittlerweile trägt Centurion die Versionsnummer 3 und befindet sich weiterhin in reger Entwicklung. Die letzten größeren Änderungen am Projekt datieren aus der Zeit zwischen Weihnachten und Silvester. Offenbar ist Hough, der sich offensiv zu seinem Glauben bekennt, auch hinsichtlich seiner Projekte sehr leidenschaftlich.

Ungeachtet der Bezeichnung als Framework ist Centurion eher als Boilerplate angelegt, dabei aber nicht so limitiert. Ich denke, Hough würde nicht widersprechen, wenn man Centurion irgendwo in der Mitte zwischen den beiden Ansätzen einordnete.

Sollten Sie übrigens trotz hoher Versionsnummer noch nie von Centurion gehört haben, so wundern Sie sich nicht. Die ersten beiden Versionen des Frameworks verwendete Hough ausschließlich für seine eigenen Projekte. Erst mit der aktuellen Version geht er an die Öffentlichkeit und stellt das Projekt unter den Lizenzen GPL und MIT zur kostenlosen Nutzung auch in kommerziellen Projekten zur Verfügung.

Centurion – starke Anleihen bei Bootstrap und 960.gs

Mich erinnert Centurion an zwei Projekte, die ich bereits seit langem kenne. Das Grid von Centurion erinnert nicht nur von der Ausdehnung mit seinen 960 Pixeln, sondern auch hinsichtlich seiner Syntax an 960.gs, welches ich bereits vor vier/fünf Jahren erstmalig zum Einsatz brachte. Das grafiklose Styling grundlegender Bedienelemente, insbesondere der Buttons erinnert stark an Twitters Bootstrap. Auch der grundlegende Klassen-Ansatz lässt an die großen Vorbilder erinnern.

Will man in Centurion ein Grid definieren, das die 12 verfügbaren Spalten in vier gleiche Container trennt, so verwendet man die Syntax class=“grid–3”. In 960.js würde man den identischen Effekt unter Verwendung von class=“grid_3” erzielen. Anders als 960.gs, das auch mit 16 Spalten arbeiten kann, ist Centurion auf das 12 Spalten-Layout begrenzt.

Neben dem Spalten-Layout ist auch das gesamte optische Styling klassen-basiert. So erreicht man diese schicke Tabellenoptik:

Durch das Hinzufügen dieser Klasse zum Table-Element:

Damit der optische Effekt korrekt funktioniert, muss allerdings auf eine semantisch korrekte Auszeichnung der Tabelle geachtet werden, etwas, das nicht jeder Webdesigner, speziell die, die schon sehr lange dabei sind, gewohnt sein wird. So muss das aussehen:

Table Header
Content This is longer content
Table Footer

Centurion – responsiv mit Media Queries

Hough verspricht voll responsives Verhalten bis hinunter zu 320 Pixeln Bildschirmbreite. Setzte er in der ersten Version des Frameworks noch auf JavaScript, um das responsive Verhalten zu gewährleisten, also Stylesheets per JavaScript in Abhängigkeit von der Screen-Größe zu wechseln, verwendet Centurion seit Version 2 konsequent Media Queries. Das Grid verhält sich sogar im ewigen Sorgenkind Internet Explorer responsiv, die meisten übrigen Elemente allerdings nicht. In der Tat gab sogar responsives Design, respektive dessen radikalere Diktion “Mobile First”, überhaupt erst den Denkanstoß, aus dem sich letztlich Centurion entwickelte.

Schlussendlich kann ich zum jetzigen Zeitpunkt nichts negatives zu Centurion sagen, mit Ausnahme der Tatsache, dass derzeit die Dokumentation hauptsächlich aus Lücken besteht. Das sei einem Projekt, dass seit 10 Tagen öffentlich ist, allerdings verziehen. Die wenigen fertigen Teile der Anleitung lassen indes erkennen, dass Hough den Part sehr ernst nimmt. Was da ist, ist gut. Mit Hilfe der Community soll ein “robustes” (Zitat des Entwicklers) Werk daraus werden, das die Verwendung von Centurion nicht gerade zum Kinderspiel, aber doch so leicht wie möglich machen soll.

Links zum Beitrag:

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.
Dr. Webs exklusiver Newsletter
Hinweise zur Protokollierung der Anmeldung, dem Einsatz von MailChimp als Versanddienstleister und zu den Widerrufsrechten findest Du in unseren Datenschutzhinweisen.

Ein Kommentar

  1. Ich habe mir in der letzten Zeit mehrere (responisve) Frameworks zur Gemüte geführt und bin nun (nachdem ich schon vor einem halben Jahr davon gelesen habe), bei inuit.css gelandet.

    Kein Schnick Schnack, Dokumentation innerhalb der Dokumente, vielfältige Anwendungsbeispiele per jsfiddle, vieles an umgesetzter Theorie aus den letzten Jahren (oocss, bem, smacss) und das alles auf sass, welches ja wie es scheint gegenüber less (stylus und Konsorten sind immer noch zu wenig bekannt) immer mehr User gewinnt, da es besser durchdacht und aktuell gehalten wird.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.