css frameworks (09/2008)
TRANSCRIPT
![Page 1: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/1.jpg)
DIRK JESSE | WEBKONGRESS ERLANGEN 2008, 04. September 2008
CSS FRAMEWORKSErwartungen, Mythen & reale Vorteile
![Page 2: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/2.jpg)
Die Webkrauts …http://www.webkrauts.de/
Initiative für die Verbreitung von Webstandards
Aufklärungsarbeit und Veröffentlichungen in unterschiedlichen Medien
![Page 3: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/3.jpg)
Aktuelle Layouttrends
![Page 4: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/4.jpg)
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
![Page 5: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/5.jpg)
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
![Page 6: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/6.jpg)
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
![Page 7: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/7.jpg)
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
![Page 8: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/8.jpg)
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
![Page 9: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/9.jpg)
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
![Page 10: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/10.jpg)
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
![Page 11: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/11.jpg)
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
![Page 12: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/12.jpg)
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
![Page 13: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/13.jpg)
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)
![Page 14: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/14.jpg)
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
![Page 15: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/15.jpg)
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)
![Page 16: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/16.jpg)
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
![Page 17: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/17.jpg)
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
![Page 18: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/18.jpg)
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
![Page 19: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/19.jpg)
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
![Page 20: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/20.jpg)
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)
![Page 21: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/21.jpg)
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
![Page 22: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/22.jpg)
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
![Page 23: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/23.jpg)
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)
![Page 24: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/24.jpg)
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
![Page 25: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/25.jpg)
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
![Page 26: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/26.jpg)
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
![Page 27: CSS Frameworks (09/2008)](https://reader033.vdocuments.net/reader033/viewer/2022052523/555e24ffd8b42a6a4c8b4e51/html5/thumbnails/27.jpg)
Dirk JesseHomepage: http://www.highresolution.info
Email: [email protected]
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