Post on 28-Jan-2015
description
LAYOUT-FRAMEWORKSim 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 Designershttp://www.alistapart.com/articles/frameworksfordesigners/
Layout Frameworks
GenerischFunktionalität ist unabhängig von visueller Gestaltung
WiederverwendbarKombinierbare, nach Funktionen getrennte,
standardisierte Bausteine
RobustAufrechterhaltung der Funktion unter wechselnden
Anwendungszenarien
SHOWCASE
Layout-Frameworks im Web
Blueprint CSS
YAML
YAML
YUI Library
Fragen
Welche Framework-Typen gibt es?
Was tun Layout-Frameworks?
Wie finde ich das Richtige?
Wie sieht die Zukunft aus?
CSS RESET
Gleiche Ausgangsbedingungen für Alle!
Eric Meyer – CSS Reset Reloaded
http://meyerweb.com/eric/tools/css/reset/
YUI Reset Demo
Browser-Reset
Eric Meyer‘s Reset-CSS
Pro• Abstände werden zurückgesetzt
• Schriftgrößen unberührt
Contra• ol, ul { list-style: none; }
• <strong> ist nicht bold
• <em> ist nicht italics
Barriere per Default• :focus { outline: 0; }
YUI Reset-CSS
Pro• Abstände werden zurückgesetzt
• lässt :focus unberührt
Contra• H1...H6 erhalten font-size: 100%
• ol, ul { list-style: none; }
• Unnötiges Zurücksetzen von
Standardformatierungen für
strong, em, ins, del, sub, sup
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 Resethttp://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 emor b or h3 or whatever – and then style it as
needed.”
Eric Meyer, Reset Reasoninghttp://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/
GRID FRAMEWORKS
Der verlängerte Arm des Printdesigns?
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
40px 10px10px 16 * 60px = 960px
60px 10px10px 12 * 80px = 960px
Blueprint CSS
24 Spalten
960 Grid System
16 Spalten
960 Grid System
12 Spalten
Blueprint CSS
header class="span-24"
content class="span-18"sidebar
class="span-6 last"
teaserA
class="span-9"
teaserB
class="span-9 last"
footerA
class="span-6"
footerB
class="span-6"
footerC
class="span-6 last"
content block class="span-18 last"
950px
720px 230px
960 Grid System
header class="grid_16"
content class="grid_12"Sidebar
class="grid_4"
teaserA
class="grid_6 alpha"
teaserB
class="grid_6 omega"
footerA
class="grid_4 alpha"
footerB
class="grid_4"
footerC
class="grid_4 omega"
content block class="grid_12 alpha omega"
960px
720px 240px
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"><!-- 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>
CSS FRAMEWORKS
Moderne Baukästen zur Layoutgestaltung
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
YAML Builder<div class="page_margins"><div id="header"><!-- header -->
</div><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>
</div><div><!-- contentbox -->
</div><div class="subcolumns"><div class="c33l"><div class="subcl"><!-- footerA -->
</div></div><div class="c33l"><div class="subc"><!-- footerB -->
</div></div><div class="c33r"><div class="subcr"><!-- footerC -->
</div></div>
</div></div>
</div><div id="col2"><div id="col2_content" class="clearfix"><!-- sidebar -->
</div></div>
</div></div>
@charset "UTF-8";/*** "Yet Another Multicolumn Layout" - (X)HTML/CSS framework* (en) stylesheet for screen layout* (de) Stylesheet für das Bildschirm-Layout**/
@media screen, projection{.page_margins { margin: 0 auto;width: 960px; background: #fff;
}
#col1 { float: left; width: 75%}#col2 { width: auto; margin: 0 0 0 75%}
}
INHALT UND
TYPOGRAFIE
Lorem ipsum dolor sit amet, consectetur, sadipisci velit …
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
Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut
Subheading
Vertical Rhythm
Blueprint CSS Baseline CSS
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
SERVERSEITIGE
WERKZEUGKÄSTEN
Back to the root …
SASS
“Sass makes CSS fun again. Sass is
CSS, plus nested rules, variables,
mixins, and more, all in a concise,
readable syntax.”
// Sass h1
height: 118pxmargin-top: 1em
.taglinefont-size: 26pxtext-align: right
/* CSS */h1 {
height: 118px;margin-top: 1em;
}
.tagline { font-size: 26px;text-align: right;
}
SASS
Mixins Generiertes CSS
// Sass
=table-scaffoldingth
text-align: centerfont-weight: bold
td, thpadding: 2px
=left(!dist)float: leftmargin-left = !dist
#data+left(10px)+table-scaffolding
/* CSS */
#data {float: left;margin-left: 10px;
}
#data th {text-align: center;font-weight: bold;
}
#data td, #data th {padding: 2px;
}
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)
SPIELZEUG ODER
ECHTE HILFE?
Wo liegen die Vorteile des Framework-Einsatzes?
Layout-Frameworks
Abstrahieren Standardaufgaben
Implementieren Best-Practice-Lösungen
Mehr Zeit für Ihre Kreativität
DIE QUAL DER WAHL
Wo ist der heilige Gral?
WHERE NO MAN
HAS GONE BEFORE…
Ausblick in die Zukunft der Webentwicklung
„If I can see further than
anyone else, it is only
because I am standing on
the shoulders of giants.”
Sir Isaac Newton