Dieter Petereit 24. August 2010

ElasticCSS – Flexibles Framework für eierlegende Wollmilchsäue?

Seit etwas über einem Jahr wirbt das ElasticCSS im Reigen der CSS-Frameworks um die Gunst der Verwender. Ob es damit erfolgreich ist, kann ich nicht beurteilen. Zumindest eine überbordende Popularität kann man dem Neuling aber wohl nicht bescheinigen. Dabei bietet das ElasticCSS durchaus Vorteile gegenüber anderen Systemen. Und Entwickler, die zusätzlich jQuery einsetzen, erschlagen zwei Fliegen mit einer Klappe, denn auch ElasticCSS bringt jQuery nicht nur mit, sondern nutzt es auch. Lassen Sie uns gemeinsam einen Blick auf den Newcomer werfen…

elasticcsslogo.png

Umfang von Elastic

ElasticCSS bietet kein full blown Framework, wie etwa YAML von Dirk Jesse. Vielmehr begrenzt sich Elastic auf Spaltenlayouts, das Handling von Browserinkompatibilitäten und – eingeschränkt – das Eventhandling via jQuery, um beispielsweise Ajax-Requests homogen im Layout abzubilden. Insbesondere typografische Aspekte oder Formulardesign spielen im Elastic CSS keine Rolle, der Schwerpunkt liegt klar auf der Realisierung komplexer Spaltenlayouts.

Dabei ist Elastic aber kein dezidiertes Grid-Framework, wie 960.gs oder Blueprint, denn es basiert nicht auf einem vorgegebenem Raster. Vielmehr kann Elastic CSS wie ein Grid-Framework verwendet werden, muss oder sollte ich sogar sagen sollte es aber nicht. Elastic ist für mich, was die Auszeichnung betrifft, ein wenig so wie 960. Man beschreibt sein Layout natürlichsprachlich und kann sich so wesentlich schneller in die Verwendung des Framework einarbeiten und eindenken, als dies bei der Verwendung kryptischer Auszeichner, wie etwa <body class = „A s12“> (Beispiel für Testauszeichnung in MarkerCSS: Arial 12 px) möglich ist.

Grid oder kein Grid, das ist hier die Frage

Auf der anderen Seite ist das Arbeiten ohne vorgegebenes Raster in sich komplizierter. Immerhin sind Designraster seit der Steinzeit der Drucksetzerei das Werkzeug der Wahl, um Inhalte visuell zu strukturieren. Nicht umsonst war im Webdesign Ewigkeiten lang das Layouten unter Pervertierung des Table-Tag gang und gäbe. Dazu noch ein transparentes GIF und das pixelgenaue Layout war geritzt. Schaut man sich im Web um, so findet man auch heute noch eine riesige Vielfalt genau auf diese Art und Weise erstellter Websites. Und, die sehen nicht mal schlecht aus. Auch die Inhaber der Websites aka Kunden finden nichts schlimmes an der hinter der schönen Optik steckenden Technik aus der Websteinzeit, wenn sie es denn überhaupt wissen.

Natürlich. Man muss mit der Zeit gehen. Immer mehr mobile Endgeräte wollen bedient sein. Auch auf anderen Geräten als Computerbildschirmen müssen moderne Websites funktionieren. Da geht es dann zu Ende mit dem Tablelayout. Fixe Gridlayouts sind indes keine Alternative, denn ob ein Layoutbereich nun mit einem <td> oder einem <div> innerhalb dreier anderer Divs beginnt, ist nur ein marginaler Unterschied. Will man wirklich für die Zukunft designen, müssen Layouts flexibel gestaltet sein und je nach Endgerät sinnvoll umbrechen können. Das ist eine Notwendigkeit, die jeder Webworker sofort versteht. Leider wird das dem durchschnittlichen Kunden weit weniger eingängig sein. Ich sprach mal mit einem Otto Normalkunden über Barrierefreiheit und ähnlich hehre Dinge. Sein Standpunkt war klar: „Wenn einer meiner Kunden Probleme mitte Augen hat, dann soller sich den Kram halt vonnem Bekannten vorlesen lassen.“ Punkt. Da stehst Du da mit Deinem ganzen Accessibility-Kram und reibst Dir die Augen an der Realität wund.

Von daher ist es gut, dass das ElasticCSS keinen allzu großen ideologisch theoretischen Ansatz verfolgt, sondern effizient erlernt und schnell produktiv eingesetzt werden kann, welches Layout auch immer Sie damit umzusetzen gedenken. Wenig überrascht werden Sie sein, wenn ich Ihnen sage, dass Sie an verschachtelten Divs nicht vorbeikommen werden.

Erste Schritte

Machen wir erst einmal ein paar Trockenübungen. Um beispielsweise ein dreispaltiges Layout flexibel über die gesamte Breite des Screens zu implementieren, schreiben Sie <div class=“unit on-3 columns“>. Darin verwenden Sie drei Mal <div class=“column“> mit dem jeweiligen Inhalt und fertig ist Ihr Dreispaltenlayout. Das gesamte Design bewegt sich innerhalb der Breite des Screens, die einzelnen Spalten verwenden stets 33 % des zur Verfügung stehenden Platzes. Wollen Sie nun mit fixen und elastischen Spalten in Mischung arbeiten, so verwenden Sie nicht mehr bloß <div class=“column“> für die Inhaltsbereiche, sondern <div class=“elastic column“> für den nach wie vor flexiblen Bereich, sowie ein <div class=“fixed column“ style=“width:250px“> für eine auf 250 Pixel fixierte Spalte. Sie haben Recht. Es ist nicht sehr elegant, Breitenangaben direkt ins HTML schreiben zu müssen. Wo bleibt denn da die Trennung von Layout und Inhalt? Tja, aber so funktioniert Elastic eben.

Weitere Möglichkeiten des Frameworks sind das Positionieren von Elementen in Header oder Footer, ohne sie in der Codereihenfolge tatsächlich dort stehen zu haben. Solches funktioniert mit <div class=“unit position-header“> respektive position-footer. Durch die mögliche Positionierung im Quellcode an oberster Position sollen sich SEO-Vorteile ergeben. Alle übrigen Methoden, bestimmte Layoutergebnisse erreichen, werden mit Elastic nur über das direkte Eingeben von Styleinformationen in den HTML-Code erledigt. Wollen Sie etwa zwei Spalten um 20 Pixel Zwischenraum ergänzen, so geben Sie bei dem einen Container ein style=“margin-right:10px;“ und dem daneben liegenden ein style=“margin-left:10px;“ mit. Sehr innovativ ist das nicht und Pflege- und Änderungsaufwand bei einer größeren Website will ich mir gar nicht erst vorstellen…

Der Dr.Web-Schnelltest

Um zu schauen, ob man denn wenigstens schnell ist, trotz der wenig überzeugenden Grundfeatures, baue ich rudimentär die ehemalige Startseite von Dr. Web nach. Die grafischen Elemente dafür habe ich noch hier liegen.

Zuerst baue ich das Framework in den Header:

<link rel=“stylesheet“ type=“text/css“ media=“all“ href=“/css/elastic.css“ />

<link rel=“stylesheet“ type=“text/css“ media=“all“ href=“/css/drweb.css“ />

<link rel=“stylesheet“ type=“text/css“ media=“print“ href=“/css/elastic.print.css“ />

<script src=”/js/jquery.js” type=”text/javascript” language=”javascript” charset=”utf-8″></script>

<script src=”/js/elastic.js” type=”text/javascript” language=”javascript” charset=”utf-8″></script>

CSS-Dateien habe ich im Unterverzeichnis „CSS“ organisiert, Scripte im Unterverzeichnis „JS“. Aber das ist Geschmackssache. Wichtig ist nur, dass die Links zu den Dateien stimmen.

elastic-sitestruktur.png

Der Header der Website wird so angelegt:

<div class=“unit on-2 columns“>

<div id=“headerlinks“ class=“fixed column“ style=“width:250px;“>Logo</div>

<div id=“headerrechts“ class=“elastic column“>Login-Info</div>

</div>

Da wir 2 Spalten brauchen, um das Logo und den Login-Bereich nebeneinander zu positionieren, verwende ich die Klassen unit on-2 columns, was soviel wie Einheit mit 2 Spalten bedeuten soll. Die nächste Zeile, die Hauptnavigation geht über die ganze Breite und trägt daher lediglich die Klasse unit ohne weitere Spezifikation. Danach kommt der Hauptseitenbereich, der über drei Spalten verläuft, wobei die mittlere elastisch und die rechte und linke fixe Breiten haben sollen:

<div class=“unit on-3 columns“>

<div id=“sidebarlinks“ class=“fixed column“ style=“width:250px;“>Navigationselemente</div>

<div id=“maincontent“ class=“elastic column“>Haupttext und andere Innenelemente</div>

<div id=“sidebarrechts“ class=“fixed column“ style=“width:300px;“>Rechte Sidebar mit Twitter, Werbung etc.</div>

</div>

Dem umschließenden Container teilen wir mit, dass er über drei Spalten „unit on-3 columns“ gehen soll. Die erste Spalte erhält mit style=“width:250px;“, die dritte Spalte mit style=“width:300px;“ eine feste Breite, die mittlere wird mit class=“elastic column“ flexibel gehalten. Danach sieht das Ganze so aus:

drweb-elastic-w500.png

Nicht sehr elegant, aber immerhin in wenigen Minuten gebaut. Mit dem 960-Gridsystem habe ich sogar etwas länger gebraucht, dafür war das Ergebnis aber auch besser.

Im Ergebnis muss ich konstatieren, dass ich mich nicht an die direkte Eingabe von Stylesheet-Informationen in das HTML werde gewöhnen können. So pflegt man nicht nur den Inhalt und das Hauptstylesheet, sondern auch noch die Styleinfos im Quelltext. Das kann nicht im Sinne des Erfinders sein. Elastic wird es daher nicht in meinen Workflow schaffen. Vielleicht gibt es aber den einen oder anderen Leser, der/die gerade die genannten Konventionen wunderbar passend findet und sich für das Framework begeistern kann. Richtig falsch macht man nämlich auch nichts, wenn man Elastic verwendet. Also: Ich nicht, aber Sie vielleicht?

(mm),

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. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

12 Kommentare

  1. Der Link oben sollte so aussehen:
    <a href=“…“ class=“red bold underlined“> – da ist irgendwas kaputt gegangen.

  2. Die CSS-Frameworks verwässern meist den Sinn von CSS (in externen Dateien).
    Dieser liegt darin, das Markup von der Darstellung zu trennen.

    Ob ich nun einen Link mit den Klassen
    <a href=“…“ rel=“nofollow“> oder das über HTML direkt setze – hier existiert kein Unterschied mehr. Man koppelt damit das Markup wieder fix an das CSS, dadurch sind für Layout-Änderungen immer Änderungen am Markup notwendig.

    Und damit ist der Sinn von CSS weg.

  3. Hört sich auf jeden Fall interessant an, ich glaube ich werde es auch mal testen.

    Danke für den Artikel.

  4. Gibt es eigentlich schon ein CSS Frameworks welches anstatt vieler CSS IDs nur HTML 5 Tags wie etc. benötigt? Und wenn sie noch in der Entwicklung sind, wie lange dauert es denn bis sie erscheinen?
    LG Paloran

    • ich meinte gelesen zu haben das die neue yaml version (if_yaml 1.4.0) auf html5 und css3 aufsetzt… Kann aber nicht 100%ig sagen ob da alle html5 tags abgegriffen werden..

      Bezüglich ob ein css framework überflüssig sein soll, dem kann ich nur wiedersprechen! Alleine schon wegen dem Punkt Browserkompatibilität. Hier habe ich gleich eine einheitliche darstellung für verschiedenste browser, welche so erst mal händisch in hinterlegt werden müssten. Klare Zeitersparniss!

      gruß

  5. CSS-Frameworks halte ich für überflüssig. Für ein Spaltensystem brauch ich kein Framework, da reichen einige Zeilen CSS-Code. Ich verstehe den Sinn dahinter einfach nicht.

    • CSS Frameworks sind nicht überflüssig und der Sinn ist wie bei allen Frameworks die Ersparnis von Arbeitszeit. Hier gilt je größer das Projekt desto höher die Ersparnis. Bei einfachen kleinen Projekten würde ich auch kein großes Framework auffahren.

      Ist genauso wie bei JavaScript. Wenn ich nicht mehr machen will, als z.B. eine ID zu selektieren, dann binde ich dafür nicht das jQuery Frameworke ( $(‚#id‘) ) ein sondern verwende getElementById.

  6. Ich halte es auch für einen Nachteil, das Spaltenzahl und Elastizität direkt in dem class-Attribut angegeben werden, also direkt in HTML. Besser fände ich, wenn man dies separat in Stylesheet angeben könnte. Also für mich ist dieses Framework auch nicht von Interesse, vielleicht meldet sich ja noch ein Befürworter.

  7. Was spricht denn dagegen, anstelle der style-Angaben im HTML einfach entsprechende zusätzliche Klassen (oder IDs) zu vergeben und damit Angaben wie „width:250px;“ wieder ins CSS auszulagern?

    • Das habe ich nicht ausprobiert, befürchte aber, dass es Frameworkfunktionen stören könnte. Immerhin rühmt sich Elastic damit, den „mathematischen Teil“ eigenständig zu übernehmen.

Schreibe einen Kommentar

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

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.