Layout Frameworks im professionellen Webdesign

LAYOUT-FRAMEWORKS im professionellen Webdesign Dirk Jesse, Highresolution.info Webtech Conference 2009, Karlsruhe

Zur Person Dirk Jesse • Bauingenieur aus Dresden • Freiberuflicher Softwareentwickler: – CSS Framework „Yet Another Multicolumn Layout“ (YAML) – JavaScript-Applikationen – CSSDOC • Autor – T3N Magazin, Webstandards Magazin – Fachbuch „CSS-Layouts, Praxislösungen mit YAML 3.0“ • Redaktion Webkrauts

Frameworks “… a set of tools, libraries, conventions and best practices that attempt to abstract routine tasks into generic modules that can be reused.” Jeff Croft, Frameworks for Designers http://www.alistapart.com/articles/frameworksfordesigners/

Layout Frameworks Generisch Funktionalität ist unabhängig von visueller Gestaltung Wiederverwendbar Kombinierbare, nach Funktionen getrennte, standardisierte Bausteine Robust Aufrechterhaltung der Funktion unter wechselnden Anwendungszenarien

Layout-Frameworks im Web SHOWCASE

Blueprint CSS

YUI Library

Fragen Welche Framework-Typen gibt es? Was tun Layout-Frameworks? Wie finde ich das Richtige? Wie sieht die Zukunft aus?

Gleiche Ausgangsbedingungen für Alle! CSS RESET

Eric Meyer – CSS Reset Reloaded http://meyerweb.com/eric/tools/css/reset/

Yahoo – YUI 2: Reset CSS http://developer.yahoo.com/yui/reset/

YUI Reset Demo

Browser-Reset Eric Meyer‘s Reset-CSS YUI Reset-CSS Pro Pro • Abstände werden zurückgesetzt • Abstände werden zurückgesetzt • Schriftgrößen unberührt • lässt :focus unberührt Contra Contra • ol, ul { list-style: none; } • H1...H6 erhalten font-size: 100% • <strong> ist nicht bold • ol, ul { list-style: none; } • <em> ist nicht italics • Unnötiges Zurücksetzen von Standardformatierungen für strong, em, ins, del, sub, sup Barriere per Default • :focus { outline: 0; }

Offene Diskussionen “The problem I've had with these resets is that I then find myself declaring much more than I ever needed to just to get browsers back to rendering things the way I want. As it turns out, I'm perfectly happy with how a number of elements render by default. I like lists to have bullets and strong elements to have bolded text. ” Jonathan Snook, No CSS Reset http://snook.ca/archives/html_and_css/no_css_reset/

Offene Diskussionen “I don’t want to take style effects for granted. […] It makes me think just that little bit harder about the semantics of my document. With the reset in place, I don’t pick strong because the design calls for boldfacing. Instead, I pick the right element – whether it’s strong or em or b or h3 or whatever – and then style it as needed.” Eric Meyer, Reset Reasoning http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/

Der verlängerte Arm des Printdesigns? GRID FRAMEWORKS

Blueprint CSS 24 Spalten Grid (960 px) Erstveröffentlichung: August 2007

960 Grid System 12/16 Spalten Grid (960 px) Erstveröffentlichung: März 2008

Grid Raster 30px 10px 24 * 40px – 10px = 950px Blueprint CSS 24 Spalten 10px 40px 10px 16 * 60px = 960px 960 Grid System 16 Spalten 10px 60px 10px 12 * 80px = 960px 960 Grid System 12 Spalten

Blueprint CSS 950px 720px 230px header class="span-24" teaserA teaserB class="span-9" class="span-9 last" sidebar content block class="span-18 last" content class="span-18" class="span-6 last" footerA footerB footerC class="span-6" class="span-6" class="span-6 last"

960 Grid System 960px 720px 240px header class="grid_16" teaserA teaserB class="grid_6 alpha" class="grid_6 omega" Sidebar content block class="grid_12 alpha omega" content class="grid_12" class="grid_4" footerA footerB footerC class="grid_4 alpha" class="grid_4" class="grid_4 omega"

YUI Grids CSS 6 Basislayouts (2 Spalten) mit variabler Breite (750/950/974px, 100%, custom) Schachtelbare Grid-Bausteine (1/2, 1/3, 1/4) Erstveröffentlichung: Februar 2006

YUI Grids Builder

YUI Grids Builder <div id="doc2" class="yui-t5"> <div id="hd">  </div> <div id="bd"> <div id="yui-main"> <div class="yui-b"> <div class="yui-g"> <div class="yui-u first"> <!– teaserA --> </div> <div class="yui-u">  </div> </div> <div class="yui-g"> <!– content box --> </div> <div class="yui-gb"> <div class="yui-u first">  </div> <div class="yui-u">  </div> <div class="yui-u">  </div> </div> </div> </div> <div class="yui-b">  </div> </div> </div>

Moderne Baukästen zur Layoutgestaltung CSS FRAMEWORKS

Mike Stenhouse, A CSS Framework Proof of Concept Veröffentlichung: Mai 2005 http://www.contentwithstyle.co.uk/content/a-css-framework

YAML (Yet Another Multicolumn Layout) Flexible Spalten- und Gridbausteine (px/em/%) Erstveröffentlichung: Oktober 2005

YAML Builder

<div class="page_margins"> <div id="header">  </div> YAML Builder <div id="main"> <div id="col1"> <div id="col1_content" class="clearfix"> <div class="subcolumns"> <div class="c50l"> <div class="subcl">  </div> </div> <div class="c50r"> <div class="subcr">  </div> </div> @charset "UTF-8"; </div> /** <div> * "Yet Another Multicolumn Layout" - (X)HTML/CSS framework  </div> * (en) stylesheet for screen layout * (de) Stylesheet für das Bildschirm-Layout <div class="subcolumns"> * <div class="c33l"> */ <div class="subcl">  @media screen, projection </div> { </div> .page_margins { <div class="c33l"> margin: 0 auto; <div class="subc"> width: 960px;  background: #fff; </div> </div> } <div class="c33r"> #col1 { float: left; width: 75%} <div class="subcr"> #col2 { width: auto; margin: 0 0 0 75%}  } </div> </div> </div> </div> </div> <div id="col2"> <div id="col2_content" class="clearfix">  </div> </div> </div> </div>

Lorem ipsum dolor sit amet, consectetur, sadipisci velit … INHALT UND TYPOGRAFIE

Vertical Rhythm Heading Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam Subheading Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut

Vertical Rhythm Blueprint CSS Baseline CSS

OOCSS (Object Orientated CSS) An YUI angelehntes Grid-Konzept Objektorientiertes Modulkonzept zur Gestaltung von Inhaltselementen Erstveröffentlichung: Frühjahr 2009

Back to the root … SERVERSEITIGE WERKZEUGKÄSTEN

SASS “Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax.” // Sass /* CSS */ h1 h1 { height: 118px height: 118px; margin-top: 1em margin-top: 1em; } .tagline font-size: 26px .tagline { text-align: right font-size: 26px; text-align: right; }

SASS Mixins Generiertes CSS // Sass /* CSS */ =table-scaffolding #data { th float: left; text-align: center margin-left: 10px; font-weight: bold } td, th padding: 2px #data th { text-align: center; =left(!dist) font-weight: bold; float: left } margin-left = !dist #data td, #data th { #data padding: 2px; +left(10px) } +table-scaffolding

HAML “Haml is a markup language that’s used to cleanly and simply describe the HTML …” • Markup should be beautiful • Markup should be DRY • Markup should be well-intended • HTML structure should be clear

Compass CSS Ruby // Sass Meta-Framework mit Portierungen für Blueprint, 960.gs, YUI

Scaffold – Rapid CSS Development Framework PHP Zahlreiche CSS3-basierte Bausteine Layout-Plugin (CSS 3 Multicolumn Module)

Wo liegen die Vorteile des Framework-Einsatzes? SPIELZEUG ODER ECHTE HILFE?

Layout-Frameworks Abstrahieren Standardaufgaben Implementieren Best-Practice-Lösungen Mehr Zeit für Ihre Kreativität

Wo ist der heilige Gral? DIE QUAL DER WAHL

Ausblick in die Zukunft der Webentwicklung WHERE NO MAN HAS GONE BEFORE…

„If I can see further than anyone else, it is only because I am standing on the shoulders of giants.” Sir Isaac Newton

http://www.highresolution.info	748
http://kratce.vzhurudolu.cz	294
http://www.slideshare.net	19
http://23d.cz	9
http://static.slidesharecdn.com	3
http://translate.googleusercontent.com	2
http://flavors.me	2
http://webcache.googleusercontent.com	1

Layout Frameworks im professionellen Webdesign

by djesse on Mar 29, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 1,078

Statistics

Layout Frameworks im professionellen Webdesign — Presentation Transcript