Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
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 erfolg­reich ist, kann ich nicht beur­tei­len. Zumindest eine über­bor­den­de Popularität kann man dem Neuling aber wohl nicht beschei­ni­gen. Dabei bie­tet das ElasticCSS durch­aus Vorteile gegen­über ande­ren Systemen. Und Entwickler, die zusätz­lich jQuery ein­set­zen, erschla­gen zwei Fliegen mit einer Klappe, denn auch ElasticCSS bringt jQuery nicht nur mit, son­dern nutzt es auch. Lassen Sie uns gemein­sam einen Blick auf den Newcomer wer­fen…

elasticcsslogo.png

Umfang von Elastic

ElasticCSS bie­tet kein full blown Framework, wie etwa YAML von Dirk Jesse. Vielmehr begrenzt sich Elastic auf Spaltenlayouts, das Handling von Browserinkompatibilitäten und – ein­ge­schränkt – das Eventhandling via jQuery, um bei­spiels­wei­se Ajax-Requests homo­gen im Layout abzu­bil­den. Insbesondere typo­gra­fi­sche Aspekte oder Formulardesign spie­len im Elastic CSS kei­ne Rolle, der Schwerpunkt liegt klar auf der Realisierung kom­ple­xer Spaltenlayouts.

Dabei ist Elastic aber kein dezi­dier­tes Grid-Framework, wie 960.gs oder Blueprint, denn es basiert nicht auf einem vor­ge­ge­be­nem Raster. Vielmehr kann Elastic CSS wie ein Grid-Framework ver­wen­det wer­den, muss oder soll­te ich sogar sagen soll­te es aber nicht. Elastic ist für mich, was die Auszeichnung betrifft, ein wenig so wie 960. Man beschreibt sein Layout natür­lich­sprach­lich und kann sich so wesent­lich schnel­ler in die Verwendung des Framework ein­ar­bei­ten und ein­den­ken, als dies bei der Verwendung kryp­ti­scher Auszeichner, wie etwa <body class = “A s12”> (Beispiel für Testauszeichnung in MarkerCSS: Arial 12 px) mög­lich ist.

Grid oder kein Grid, das ist hier die Frage

Auf der ande­ren Seite ist das Arbeiten ohne vor­ge­ge­be­nes Raster in sich kom­pli­zier­ter. Immerhin sind Designraster seit der Steinzeit der Drucksetzerei das Werkzeug der Wahl, um Inhalte visu­ell zu struk­tu­rie­ren. Nicht umsonst war im Webdesign Ewigkeiten lang das Layouten unter Pervertierung des Table-Tag gang und gäbe. Dazu noch ein trans­pa­ren­tes GIF und das pixel­ge­naue Layout war geritzt. Schaut man sich im Web um, so fin­det man auch heu­te noch eine rie­si­ge Vielfalt genau auf die­se Art und Weise erstell­ter Websites. Und, die sehen nicht mal schlecht aus. Auch die Inhaber der Websites aka Kunden fin­den nichts schlim­mes an der hin­ter der schö­nen Optik ste­cken­den Technik aus der Websteinzeit, wenn sie es denn über­haupt wis­sen.

Natürlich. Man muss mit der Zeit gehen. Immer mehr mobi­le Endgeräte wol­len bedient sein. Auch auf ande­ren Geräten als Computerbildschirmen müs­sen moder­ne Websites funk­tio­nie­ren. Da geht es dann zu Ende mit dem Tablelayout. Fixe Gridlayouts sind indes kei­ne Alternative, denn ob ein Layoutbereich nun mit einem <td> oder einem <div> inner­halb drei­er ande­rer Divs beginnt, ist nur ein mar­gi­na­ler Unterschied. Will man wirk­lich für die Zukunft desi­gnen, müs­sen Layouts fle­xi­bel gestal­tet sein und je nach Endgerät sinn­voll umbre­chen kön­nen. Das ist eine Notwendigkeit, die jeder Webworker sofort ver­steht. Leider wird das dem durch­schnitt­li­chen Kunden weit weni­ger ein­gän­gig sein. Ich sprach mal mit einem Otto Normalkunden über Barrierefreiheit und ähn­lich heh­re Dinge. Sein Standpunkt war klar: “Wenn einer mei­ner Kunden Probleme mit­te Augen hat, dann soller sich den Kram halt von­nem Bekannten vor­le­sen las­sen.” Punkt. Da stehst Du da mit Deinem gan­zen Accessibility-Kram und reibst Dir die Augen an der Realität wund.

Von daher ist es gut, dass das ElasticCSS kei­nen all­zu gro­ßen ideo­lo­gisch theo­re­ti­schen Ansatz ver­folgt, son­dern effi­zi­ent erlernt und schnell pro­duk­tiv ein­ge­setzt wer­den kann, wel­ches Layout auch immer Sie damit umzu­set­zen geden­ken. Wenig über­rascht wer­den Sie sein, wenn ich Ihnen sage, dass Sie an ver­schach­tel­ten Divs nicht vor­bei­kom­men wer­den.

Erste Schritte

Machen wir erst ein­mal ein paar Trockenübungen. Um bei­spiels­wei­se ein drei­spal­ti­ges Layout fle­xi­bel über die gesam­te Breite des Screens zu imple­men­tie­ren, schrei­ben Sie <div class=“unit on-3 columns”>. Darin ver­wen­den Sie drei Mal <div class=“column”> mit dem jewei­li­gen Inhalt und fer­tig ist Ihr Dreispaltenlayout. Das gesam­te Design bewegt sich inner­halb der Breite des Screens, die ein­zel­nen Spalten ver­wen­den stets 33 % des zur Verfügung ste­hen­den Platzes. Wollen Sie nun mit fixen und elas­ti­schen Spalten in Mischung arbei­ten, so ver­wen­den Sie nicht mehr bloß <div class=“column”> für die Inhaltsbereiche, son­dern <div class=“elastic column”> für den nach wie vor fle­xi­blen Bereich, sowie ein <div class=“fixed column” style=“width:250px”> für eine auf 250 Pixel fixier­te Spalte. Sie haben Recht. Es ist nicht sehr ele­gant, Breitenangaben direkt ins HTML schrei­ben zu müs­sen. Wo bleibt denn da die Trennung von Layout und Inhalt? Tja, aber so funk­tio­niert Elastic eben.

Weitere Möglichkeiten des Frameworks sind das Positionieren von Elementen in Header oder Footer, ohne sie in der Codereihenfolge tat­säch­lich dort ste­hen zu haben. Solches funk­tio­niert mit <div class=“unit posi­ti­on-hea­der”> respek­ti­ve posi­ti­on-foo­ter. Durch die mög­li­che Positionierung im Quellcode an obers­ter Position sol­len sich SEO-Vorteile erge­ben. Alle übri­gen Methoden, bestimm­te Layoutergebnisse errei­chen, wer­den mit Elastic nur über das direk­te Eingeben von Styleinformationen in den HTML-Code erle­digt. Wollen Sie etwa zwei Spalten um 20 Pixel Zwischenraum ergän­zen, so geben Sie bei dem einen Container ein style=“margin-right:10px;” und dem dane­ben lie­gen­den ein style=“margin-left:10px;” mit. Sehr inno­va­tiv ist das nicht und Pflege- und Änderungsaufwand bei einer grö­ße­ren Website will ich mir gar nicht erst vor­stel­len…

Der Dr.Web-Schnelltest

Um zu schau­en, ob man denn wenigs­tens schnell ist, trotz der wenig über­zeu­gen­den Grundfeatures, baue ich rudi­men­tär die ehe­ma­li­ge Startseite von Dr. Web nach. Die gra­fi­schen Elemente dafür habe ich noch hier lie­gen.

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” orga­ni­siert, Scripte im Unterverzeichnis “JS”. Aber das ist Geschmackssache. Wichtig ist nur, dass die Links zu den Dateien stim­men.

elastic-sitestruktur.png

Der Header der Website wird so ange­legt:

<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 brau­chen, um das Logo und den Login-Bereich neben­ein­an­der zu posi­tio­nie­ren, ver­wen­de ich die Klassen unit on-2 columns, was soviel wie Einheit mit 2 Spalten bedeu­ten soll. Die nächs­te Zeile, die Hauptnavigation geht über die gan­ze Breite und trägt daher ledig­lich die Klasse unit ohne wei­te­re Spezifikation. Danach kommt der Hauptseitenbereich, der über drei Spalten ver­läuft, wobei die mitt­le­re elas­tisch und die rech­te und lin­ke fixe Breiten haben sol­len:

<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 ande­re Innenelemente</div>

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

</div>

Dem umschlie­ßen­den Container tei­len wir mit, dass er über drei Spalten “unit on-3 columns” gehen soll. Die ers­te Spalte erhält mit style=“width:250px;”, die drit­te Spalte mit style=“width:300px;” eine fes­te Breite, die mitt­le­re wird mit class=“elastic column” fle­xi­bel gehal­ten. Danach sieht das Ganze so aus:

drweb-elastic-w500.png

Nicht sehr ele­gant, aber immer­hin in weni­gen Minuten gebaut. Mit dem 960-Gridsystem habe ich sogar etwas län­ger gebraucht, dafür war das Ergebnis aber auch bes­ser.

Im Ergebnis muss ich kon­sta­tie­ren, dass ich mich nicht an die direk­te Eingabe von Stylesheet-Informationen in das HTML wer­de gewöh­nen kön­nen. So pflegt man nicht nur den Inhalt und das Hauptstylesheet, son­dern auch noch die Styleinfos im Quelltext. Das kann nicht im Sinne des Erfinders sein. Elastic wird es daher nicht in mei­nen Workflow schaf­fen. Vielleicht gibt es aber den einen oder ande­ren Leser, der/die gera­de die genann­ten Konventionen wun­der­bar pas­send fin­det und sich für das Framework begeis­tern kann. Richtig falsch macht man näm­lich auch nichts, wenn man Elastic ver­wen­det. Also: Ich nicht, aber Sie viel­leicht?

(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.

10 Kommentare

  1. Der Link oben soll­te so aus­se­hen:
    <a href=”…” class=“red bold under­li­ned”> – da ist irgend­was kaputt gegan­gen.

  2. Die CSS-Frameworks ver­wäs­sern meist den Sinn von CSS (in exter­nen Dateien).
    Dieser liegt dar­in, das Markup von der Darstellung zu tren­nen.

    Ob ich nun einen Link mit den Klassen
    <a href=”…” rel=“nofollow”> oder das über HTML direkt set­ze – hier exis­tiert kein Unterschied mehr. Man kop­pelt damit das Markup wie­der fix an das CSS, dadurch sind für Layout-Änderungen immer Änderungen am Markup not­wen­dig.

    Und damit ist der Sinn von CSS weg.

  3. Hört sich auf jeden Fall inter­es­sant an, ich glau­be ich wer­de es auch mal tes­ten.

    Danke für den Artikel.

  4. Gibt es eigent­lich schon ein CSS Frameworks wel­ches anstatt vie­ler CSS IDs nur HTML 5 Tags wie etc. benö­tigt? Und wenn sie noch in der Entwicklung sind, wie lan­ge dau­ert es denn bis sie erschei­nen?
    LG Paloran

    • ich mein­te gele­sen zu haben das die neue yaml ver­si­on (if_yaml 1.4.0) auf html5 und css3 auf­setzt… Kann aber nicht 100%ig sagen ob da alle html5 tags abge­grif­fen wer­den..

      Bezüglich ob ein css frame­work über­flüs­sig sein soll, dem kann ich nur wie­der­spre­chen! Alleine schon wegen dem Punkt Browserkompatibilität. Hier habe ich gleich eine ein­heit­li­che dar­stel­lung für ver­schie­dens­te brow­ser, wel­che so erst mal hän­disch in hin­ter­legt wer­den müss­ten. Klare Zeitersparniss!

      gruß

  5. CSS-Frameworks hal­te ich für über­flüs­sig. Für ein Spaltensystem brauch ich kein Framework, da rei­chen eini­ge Zeilen CSS-Code. Ich ver­ste­he den Sinn dahin­ter ein­fach nicht.

    • CSS Frameworks sind nicht über­flüs­sig und der Sinn ist wie bei allen Frameworks die Ersparnis von Arbeitszeit. Hier gilt je grö­ßer das Projekt des­to höher die Ersparnis. Bei ein­fa­chen klei­nen Projekten wür­de ich auch kein gro­ßes Framework auf­fah­ren.

      Ist genau­so wie bei JavaScript. Wenn ich nicht mehr machen will, als z.B. eine ID zu selek­tie­ren, dann bin­de ich dafür nicht das jQuery Frameworke ( $(‘#id’) ) ein son­dern ver­wen­de getElementById.

  6. Ich hal­te es auch für einen Nachteil, das Spaltenzahl und Elastizität direkt in dem class-Attribut ange­ge­ben wer­den, also direkt in HTML. Besser fän­de ich, wenn man dies sepa­rat in Stylesheet ange­ben könn­te. Also für mich ist die­ses Framework auch nicht von Interesse, viel­leicht mel­det sich ja noch ein Befürworter.

  7. Was spricht denn dage­gen, anstel­le der style-Angaben im HTML ein­fach ent­spre­chen­de zusätz­li­che Klassen (oder IDs) zu ver­ge­ben und damit Angaben wie “width:250px;” wie­der ins CSS aus­zu­la­gern?

    • Das habe ich nicht aus­pro­biert, befürch­te aber, dass es Frameworkfunktionen stö­ren könn­te. Immerhin rühmt sich Elastic damit, den “mathe­ma­ti­schen Teil” eigen­stän­dig zu über­neh­men.

Schreibe einen Kommentar

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