Verschiedene Layouts können mit CSS-Frameworks erstellt und designt werden, ob nun fixe, fluide oder auch flexible Layouts. Für beide Layouts kann das CSS Framework im sogenannten Compass Style eingesetzt werden. Das CSS Authoring Framework von Compass ist eine Open Source Anwendung, die auf der Ruby-Ebene aufbaut. Ruby ist eine in Japan entstandene, dynamische, objektorientierte Programmiersprache, in welcher Anteile der Perl-Syntax eingearbeitet wurden.

Compass ist dafür zuständig, dass die Regel- und Informationspakete der verschiedenen CSS-Frameworks mitgebracht werden. Die zuständigen Regeln, die wirklich benötigt werden, können mit Compass in das Framework eingefügt werden, so dass nicht mehr das gesamte Framework bzw. auch nicht mehr verschiedene Semantikklassen in das Framework eingebunden werden müssen. Konkret bedeutet das beispielsweise, wenn man das CSS-Objekt #sidebar aus Blueprint einfügt, dass ein recht breiter Block (drei Spalten) bis zum Zeilenende eingefügt wird. Die positive Folge, die letztlich mit Compass-Style möglich ist, ist der einzupflegende Code, der benutzt und eingesetzt wird, der damit sinnvoller und kürzer ist. Auch die einzufügenden Plugins werden mit Compass übersichtlicher und setzen so die verschiedenen Effekte im Webdesign einfacher um.

Auch bei der Bilddateien-Verarbeitung wirkt sich Compass Framework sehr deutlich aus. Die Dimensionen von Bildern werden automatisch ein- und ausgelesen. Pfade, die zu diesen Bildern gehören, werden ebenfalls automatisch gesetzt. Es ist nicht mehr notwendig, auf die Software Photoshop zurückzugreifen, da mit Compass Framework Sprites dynamisch aufgebaut werden können. Soll des weiteren eine Bilddatei mittels Base64 in die CSS-Datei eingefügt werden, ist dies mit Compass Framework erheblich einfacher. Im Detail bedeutet das: Wer mit einem Bildpfad arbeiten möchte, muss dies Compass per entsprechendem Befehl mitteilen. Der bisherige Befehl url() wird nun zum Beispiel mit dem Befehl image_url() ersetzt. Der Pfad für das jeweilige Bild wird dafür in der Datei config.rb eingefügt und abgespeichert.

Auf diese Art und Weise werden schliesslich die Befehle im Compass Framework verändert und entsprechend umgesetzt.

Moderne Webseiten mit CSS (Teil 2)

Die Anwendung Compass nutzt bei den verschiedenen Möglichkeiten Sass. Diese Anwendung ist eine CSS3-Erweiterung. Diese Erweiterung ist verantwortlich für verschachtelte Regeln, für Variablen, Mixins, für den Vererbungs-Wahlschalter und für verschiedene weitere Funktionen. Dabei zeichnet Sass dafür verantwortlich, dass CSS erzeugt und formatiert wird; gleichzeitig können Stylesheets einfacher organisiert und gepflegt werden. Insofern verhilft Sass dazu, dass die Design-Handhabung von CSS einfacher und auch nutzerfreundlicher wird. Programmierer arbeiten dank Sass zunehmend gerne mit CSS, da Sass auch sehr gut formatiert ist und zum Beispiel das Kommandozeilen-Tool und das Web-Framework-Plugin übersetzt und nutzt. Sass verfügt über zwei verschiedene Syntax, also zwei verschiedene Schreibweisen. Einerseits verfügt und nutzt Sass die klassische CSS3-Syntax, andererseits setzt Sass eine neue Haupt-Syntax ein, die sogenannte Sassy CSS (SCSS) kurz auch „Sass 3“ genannt. Dies hat zur Folge, dass jede valide CSS3 Seite gleichzeitig auch als SCSS Seite gültig ist. Durch die Ähnlichkeit zu CSS ist der Umstieg auf SCSS einfacher.

Die ältere Syntax, besser bekannt als „Sass“, wird insbesondere von jenen Programmierern vorgezogen, die grossen Wert auf Prägnanz und Ähnlichkeit mit dem bisherigen CSS legen. In der Nutzung der Sprache sieht die Änderung so aus, dass statt Semikola und Klammern nun Zeileneinzüge und Blöcke verwendet werden. Redundante Elemente werden demnach entfernt, damit wird CSS vereinfacht. Durch die einfache Scriptsprache wird CSS erweitert. Die verschiedenen Features, die zu Sass gehören sind Variablen, Funktionen und Nestings, Mixings sowie Vererbungen. Sass bietet gleichzeitig eine maximale Einsparung ein.

Mit einem Sass Framework ist die Konfiguration von Projekten deutlich einfacher; es werden Bibliotheken von häufig benutzten Techniken angeboten. Es gibt etliche klare Vorteile dafür, um Sass zu nutzen. Der Entwicklungsprozess wird beschleunigt, Best Practices werden belohnt, Sass ist einfach und angenehm in der Nutzung. Natürlich gibt es auch gewisse Nachteile, wie zum Beispiel weitere Abhängigkeiten und Compile-Schritte bei Frameworks, die nicht unterstützt werden. Sass kann des weiteren das Debugging erschweren. Im Fazit bedeutet das: Niemand schreibt heute noch freiwillig in C. Das bedeutet, schon heute und noch mehr in der Zukunft sind Metasprachen und Frameworks das Nonplusultra in der Programmierung.

Mit dem semantischen Grid-System im CSS Framework ist eine neue Generation gemeint, welche im Kontext mit Javascript steht. Dadurch gehören komplexe CSS-Klassen und eine unübersichtliche Semantik der Vergangenheit an. Angaben zur Breite und Anzahl der Spalten stehen hierbei im Vordergrund. Diese Daten werden in einen Javascript-Compiler eingegeben. Die CSS-Datei wird schliesslich von diesem generiert. Der gesamte Komplex des semantischen Grid-Systems steht in unmittelbarem Zusammenhang mit dem LESS-Framework, dem adaptiven CSS Grid System, womit adaptive Websites generiert und programmiert werden. Es besteht aus vier Layouts und drei Sets typographischer Sets, welche alle aus einem Single Grid bestehen. Dabei existieren auch diverse andere Grid Systeme, wie zum Beispiel das 960px Grid System. Hierbei geht es um eine Verwendung von 960 Pixel im Grid System im Vergleich zum 940 Pixel Grid System, welches mittlerweile nicht mehr allzu intensiv genutzt wird, da es als zu schmal gilt.

Welches CSS-Framework bevorzugt ihr?

Moderne Webseiten mit CSS (Teil 2)

Sandro Bertschinger

Er fand Computer relative lange nicht so spannend. Ein Amiga 500 als "Game-Machine" war der Höhepunkt. Als das Internet aufkam und man entsprechend "coole" Webseiten machen konnte, kam das Thema Computer schon eher in den Mittelpunkt. Per Zufall kreuzte dann 2001 eine Internetfirma seinen Weg.

0