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

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

4. 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/

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

6. Layout-Frameworks im Web
SHOWCASE

7. Blueprint CSS

8. YAML

9. YAML

10. YUI Library

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

12. Gleiche Ausgangsbedingungen für Alle!
CSS RESET

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

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

15. YUI Reset Demo

16. 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; }

17. 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/

18. 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/

19. Der verlängerte Arm des Printdesigns?
GRID FRAMEWORKS

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

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

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

23. 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"

24. 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"

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

26. YUI Grids Builder

27. YUI Grids Builder
<div id="doc2" class="yui-t5">
<div id="hd">
<!-- header -->
</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">
<!-- teaserB -->
</div>
</div>
<div class="yui-g">
<!– content box -->
</div>
<div class="yui-gb">
<div class="yui-u first">
<!-- footerA -->
</div>
<div class="yui-u">
<!-- footerB -->
</div>
<div class="yui-u">
<!-- footerC -->
</div>
</div>
</div>
</div>
<div class="yui-b">
<!-- sidebar -->
</div>
</div>
</div>

28. Moderne Baukästen zur Layoutgestaltung
CSS FRAMEWORKS

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

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

31. YAML Builder

32. <div class="page_margins">
<div id="header">
<!-- 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">
<!-- teaserA -->
</div>
</div>
<div class="c50r">
<div class="subcr">
<!-- teaserB -->
</div>
</div>
@charset "UTF-8";
</div>
/**
<div>
* "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
<!-- contentbox -->
</div>
* (en) stylesheet for screen layout
* (de) Stylesheet für das Bildschirm-Layout
<div class="subcolumns">
*
<div class="c33l">
*/
<div class="subcl">
<!-- footerA -->
@media screen, projection
</div>
{
</div>
.page_margins {
<div class="c33l">
margin: 0 auto;
<div class="subc">
width: 960px;
<!-- footerB -->
background: #fff;
</div>
</div>
}
<div class="c33r">
#col1 { float: left; width: 75%}
<div class="subcr">
#col2 { width: auto; margin: 0 0 0 75%}
<!-- footerC -->
}
</div>
</div>
</div>
</div>
</div>
<div id="col2">
<div id="col2_content" class="clearfix">
<!-- sidebar -->
</div>
</div>
</div>
</div>

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

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

35. Vertical Rhythm
Blueprint CSS Baseline CSS

36. Vertical Rhythm
Blueprint CSS Baseline CSS

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

38. Back to the root …
SERVERSEITIGE
WERKZEUGKÄSTEN

39. 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;
}

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

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

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

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

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

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

46. Wo ist der heilige Gral?
DIE QUAL DER WAHL

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

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