DIRK JESSE | WEBKONGRESS ERLANGEN 2008, 04. September 2008

CSS FRAMEWORKSErwartungen, Mythen & reale Vorteile

Die Webkrauts …http://www.webkrauts.de/

Initiative für die Verbreitung von Webstandards

Aufklärungsarbeit und Veröffentlichungen in unterschiedlichen Medien

Aktuelle Layouttrends

Ausgangspunkt

Webentwickler ... Individuelle Arbeitsweise

Individuelle CSS-Kenntnisse

Individuelle Ansprüche an Code-Qualität

Browser ... Unterschiedliche Default-Stylesheets

Versionsabhängige CSS-Fähigkeiten

Individuelle CSS- und Parser-Bugs

Unterstützung für mind. 2 Generationen

Layout-Frameworks

Definition

Arbeitswerkzeug zur Layouterstellung

Universelles Layoutkonzept Vielfältige Variationsmöglichkeiten

Unabhängig von Inhalten

Trennung von Framework- und Nutzerbereich

Weitere Aufgabenbereiche Unterstützung bei Contentgestaltung

Bug-Prävention

Debugging

Ziel: Produktivitätssteigerung

Frameworks

GRID-FRAMEWORKSAnwendungsorientierte Baukästen

Arbeitsweise Vordefinierte Gridklassen

Layouterstellung mit HTML

Vorteile Sehr flache Lernkurve

Kein CSS-Knowhow nötig

Schnelle Ergebnisse

CSS-FRAMEWORKSEntwicklerorientierte Baukästen

Arbeitsweise Vordefinierter Markup

Layouterstellung mit CSS

Vorteile Größere Gestaltungsfreiheit

Trennung Struktur & Layout

Schnelle Ergebnisse

Beispiele für Frameworks

GRID-FRAMEWORKSAnwendungsorientierte Baukästen

Blueprint CSS & Clones

960 GS & Clones

YUI Grids

CSS-FRAMEWORKSEntwicklerorientierte Baukästen

YAML

A CSS FrameworkMike Stenhouse | Content with Style

Blueprint CSShttp://code.google.com/p/blueprintcss/

Überblick

Erstveröffentlichung 08/2007Inspiriert durch A List Apart Artikel

Grid-Framework

Code-Basis Reset-CSS (Eric Meyer)

Fixe Grids (Pixel-basiert)

Typographie (Vertical Rhythm)

GPL Lizenz

Blueprint CSShttp://code.google.com/p/blueprintcss/

Details

Funktionsumfang Layoutbreite fixiert auf 950 Pixel

24 Spalten Raster (30 Pixel + 10 Pixel)

Vorlagen für Typographie & Print

Generator für alternative Grids

Tutorials, Tools & Generatoren

960 Grid Systemhttp://960.gs/

Überblick

Erstveröffentlichung 03/2008

Grid-Framework

Code-Basis Reset-CSS (Eric Meyer)

Fixe Grids (Pixel-basiert)

Typographie (minimal)

GPL/MIT Lizenz

960 Grid Systemhttp://960.gs/

Details

Abgespecktes Blueprint CSS

Funktionsumfang Layoutbreite fixiert auf 960 Pixel

12- und 16-Spalten Raster

Grafische Entwurfvorlagen Photoshop

Fireworks

Visio

Yahoo! User Interface Libraryhttp://developer.yahoo.com/yui/

Überblick

Erstveröffentlichung 02/2006

Grid-Framework

Kleiner CSS-Teil: YUI Grids Dokumentation: Cheat-Sheet

Abgestimmt auf Anforderungen an Yahoo! Webseiten

Abgestufter Browser-Support

BSD Lizenz

Yahoo! User Interface Libraryhttp://developer.yahoo.com/yui/

Details

Grid-Framework

Spalten & Grid-Layouts

Funktionsumfang Layoutbreite: 750, 950, 974 px, 100%, Custom

Templates: 6 zweipaltige Varianten (Source Oder)

Weitere Gliederung: 1/2, 1/3, 1/4 Grid-Elemente

Zahlreiche Codebeispiele

YUI Grid-Builder (WYSIWYG)

YAML – (X)HTML/CSS Frameworkhttp://www.yaml.de/

Überblick

Erstveröffentlichung 10/2005

CSS-Framework

Dokumentation Online- & PDF-Dokumentation

Buch „CSS-Layouts“

Zahlreiche CMS-Anpassungen

Creative Commons Lizenz

YAML – (X)HTML/CSS Frameworkhttp://www.yaml.de/

Details

Schwerpunkt: Flexible Layouts

Browsersupport ab IE 5.0/Win

Funktionsumfang Flexibles Spaltenkonzept (Source Order)

Flexibles Gridkonzept

Keine Einheitenbindung (PX, EM, Prozent)

IE-Bug-Prävention

Top-Down-Prinzip mit Fallbacklösung

YAML Builder (WYSIWYG)

A CSS FrameworkMike Stenhouse (http://www.contentwithstyle.co.uk/Articles/17/)

Überblick

Erstveröffentlichung 04/2005

CSS-Framework

Dokumentation: Blogbeitrag

Proof-of-Concept Charakter

BSD Lizenz

A CSS FrameworkMike Stenhouse (http://www.contentwithstyle.co.uk/Articles/17/)

Details

Fixe Spaltenlayouts

Funktionsumfang Universelles Markup

7 mitgelieferte Screenlayouts (1-3 Spalten)

CSS-Vorlagen für Typographie und Formulare

Top-Down-Prinzip

Nachteilig Kein CSS-Reset

Vermischung Framework-Logik & Layout

Keine Gridelemente zur Gliederung der Spalten

Weitere Projekte

GRID-FRAMEWORKS

Blueprint-Clones BlueTripCSS

Typogridphy

Emastic

960 GS-Clones Fluid 960 Grid System

GridEasy

LogiCSS

CSS-FRAMEWORKS

WYMStyle

Tripoli

Layout-/Projektvorlagen

Elements

Schema

Boilerplate

ESWAT

Allgemeiner Funktionsumfang

Layouterstellung Reset-CSS

Mehrspaltige Layouts

Gridelemente

Projektentwicklung Modulare CSS-Bausteine

Verzeichnisstruktur

Contentgestaltung Typographische Vorgaben

Standard-CSS für Druck

Standard-CSS für Formulare

HTML & CSS Bugfreier Rohbau

Valides Markup

Konzeptionelle Grenzen

Allgemeines

Vergleich zu PHP- & JavaScript-Frameworks Keine echte Software sondern statische Filesammlung

Keine 100%ige Trennung von Framework-/Entwicklercode

Modularisierung Modulares CSS für Entwicklungsprozess vorteilhaft

Gegensätzliche Anforderungen im Produktiveinsatz(HTTP-Requests)

Konzeptionelle Grenzen

GRID-FRAMEWORKS

Künstliche Vielfalt Vielfalt entsteht durch Fallvorgaben (CSS-Klassen)

Fallvorgaben führen zu CSS-Overhead

Abhängigkeiten innerhalb der Grid-Klassen

Codequalität Aufhebung der Trennung von Struktur & Layout

Individueller statt universeller Markup

Konzeptionelle Grenzen

CSS-FRAMEWORKS

Begrenzte Freiheit Erreichbare Vielfalt über Markupstruktur bestimmt

Variabilität und Unabhängigkeit von Inhaltenbedingt Markup-Overhead

Anwendung Höherer Einarbeitungsaufwand

Mehr Freiheit führt zu mehr Eigenverantwortung

Praktische Grenzen

Frameworks sind keine Garantie für ... Barrierefreiheit

Gute Usability

Gute Positionierung in Suchmaschinen

Sinnvoller Frameworkeinsatz bedingt ... Verständnis für das jeweilige Konzept

Ausreichende HTML/CSS-Kenntnisse (kein Fertiglayout)

Zusammenfassung: Vorteile

Hohe Arbeitsgeschwindigkeit Stark verkürzte Entwicklungszeit KILLER FEATURE!

Automatisierte Layouterstellung (Builder)

Rapid Prototyping

Robuste Codebasis Hohe Code-Qualität durch große Nutzerbasis

Verbesserter Workflow bei Team-Arbeit

Verbesserte Wartbarkeit von Projekten

Steigerung der Produktivität

Zusammenfassung: Konzepte

GRID-FRAMEWORKS

Sinn und Zweck von Grid-Frameworks sind schnelle Ergebnisse in der Anwendung.

CSS-FRAMEWORKS

Sinn und Zweck eines CSS-Frameworks ist eine leistungsfähige Entwicklungsumgebung

Blick in die Kristallkugel

Layouterstellung in ... 5 Jahren

Wachsende Bedeutung von CSS-Frameworks

Automatisierte Erstellung von CSS-Layouts

JS-Bibliotheken für komplexe User Interfaces

Handcodierte Layouts

Individualdesign (Kunst & Kultur)

Private Webseiten

Dirk JesseHomepage: http://www.highresolution.info

Email: office@highresolution.info

YAML (X)HTML/CSS FrameworkDownload & Dokumentation: http://www.yaml.de

YAML Builder: http://builder.yaml.de

Support Forum: http://forum.yaml.de

CSS Layouts – Praxislösungen mit YAML 3.o2. erweiterte und überarbeite Auflage, Dezember 2007

Galileo Press: http://www.galileocomputing.de/1669