LAYOUT-FRAMEWORKS
         im professionellen Webdesign




Dirk Jesse, Highresolution.info   Webtech Conference 2009, Kar...
Zur Person
Dirk Jesse
•   Bauingenieur aus Dresden

•   Freiberuflicher Softwareentwickler:
    –   CSS Framework „Yet Ano...
Frameworks
“… a set of tools, libraries,
 conventions and best practices
 that attempt to abstract routine
 tasks into gen...
Layout Frameworks
Generisch
Funktionalität ist unabhängig von visueller Gestaltung


Wiederverwendbar
Kombinierbare, nach ...
Layout-Frameworks im Web

SHOWCASE
Blueprint CSS
YAML
YAML
YUI Library
Fragen

Welche Framework-Typen gibt es?

  Was tun Layout-Frameworks?

   Wie finde ich das Richtige?

   Wie sieht die Zu...
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 werde...
Offene Diskussionen
  “The problem I've had with these resets is that
   I then find myself declaring much more than I
   ...
Offene Diskussionen
  “I don’t want to take style effects for granted.
   […]
   It makes me think just that little bit ha...
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



       ...
Blueprint CSS
                                          950px
                         720px                              ...
960 Grid System
                                                 960px
                              720px                ...
YUI Grids CSS
6 Basislayouts (2 Spalten) mit variabler Breite (750/950/974px, 100%, custom)
Schachtelbare Grid-Bausteine (...
YUI Grids Builder
YUI Grids Builder
<div id="doc2" class="yui-t5">
  <div id="hd">
    <!-- header -->
  </div>
  <div id="bd">
    <div id=...
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-cs...
YAML (Yet Another Multicolumn Layout)
Flexible Spalten- und Gridbausteine (px/em/%)
Erstveröffentlichung: Oktober 2005
YAML Builder
<div class="page_margins">
  <div id="header">
    <!-- header -->
  </div>
                            YAML Builder
  <di...
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 u...
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
Inhaltsel...
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...
SASS
          Mixins                 Generiertes CSS
// Sass                          /* CSS */

=table-scaffolding      ...
HAML
“Haml is a markup language
 that’s used to cleanly and simply
 describe the HTML …”

•   Markup should be beautiful
•...
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 I...
Layout Frameworks im professionellen Webdesign
Nächste SlideShare
Wird geladen in …5
×

Layout Frameworks im professionellen Webdesign

7.819 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
1 Kommentar
4 Gefällt mir
Statistik
Notizen
Keine Downloads
Aufrufe
Aufrufe insgesamt
7.819
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1.307
Aktionen
Geteilt
0
Downloads
95
Kommentare
1
Gefällt mir
4
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Layout Frameworks im professionellen Webdesign

  1. 1. LAYOUT-FRAMEWORKS im professionellen Webdesign Dirk Jesse, Highresolution.info Webtech Conference 2009, Karlsruhe
  2. 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
  3. 3. 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/
  4. 4. 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
  5. 5. Layout-Frameworks im Web SHOWCASE
  6. 6. Blueprint CSS
  7. 7. YAML
  8. 8. YAML
  9. 9. YUI Library
  10. 10. Fragen Welche Framework-Typen gibt es? Was tun Layout-Frameworks? Wie finde ich das Richtige? Wie sieht die Zukunft aus?
  11. 11. Gleiche Ausgangsbedingungen für Alle! CSS RESET
  12. 12. Eric Meyer – CSS Reset Reloaded http://meyerweb.com/eric/tools/css/reset/
  13. 13. Yahoo – YUI 2: Reset CSS http://developer.yahoo.com/yui/reset/
  14. 14. YUI Reset Demo
  15. 15. 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; }
  16. 16. 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/
  17. 17. 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/
  18. 18. Der verlängerte Arm des Printdesigns? GRID FRAMEWORKS
  19. 19. Blueprint CSS 24 Spalten Grid (960 px) Erstveröffentlichung: August 2007
  20. 20. 960 Grid System 12/16 Spalten Grid (960 px) Erstveröffentlichung: März 2008
  21. 21. 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
  22. 22. 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"
  23. 23. 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"
  24. 24. 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
  25. 25. YUI Grids Builder
  26. 26. 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>
  27. 27. Moderne Baukästen zur Layoutgestaltung CSS FRAMEWORKS
  28. 28. Mike Stenhouse, A CSS Framework Proof of Concept Veröffentlichung: Mai 2005 http://www.contentwithstyle.co.uk/content/a-css-framework
  29. 29. YAML (Yet Another Multicolumn Layout) Flexible Spalten- und Gridbausteine (px/em/%) Erstveröffentlichung: Oktober 2005
  30. 30. YAML Builder
  31. 31. <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>
  32. 32. Lorem ipsum dolor sit amet, consectetur, sadipisci velit … INHALT UND TYPOGRAFIE
  33. 33. 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
  34. 34. Vertical Rhythm Blueprint CSS Baseline CSS
  35. 35. Vertical Rhythm Blueprint CSS Baseline CSS
  36. 36. OOCSS (Object Orientated CSS) An YUI angelehntes Grid-Konzept Objektorientiertes Modulkonzept zur Gestaltung von Inhaltselementen Erstveröffentlichung: Frühjahr 2009
  37. 37. Back to the root … SERVERSEITIGE WERKZEUGKÄSTEN
  38. 38. 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; }
  39. 39. 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
  40. 40. 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
  41. 41. Compass CSS Ruby // Sass Meta-Framework mit Portierungen für Blueprint, 960.gs, YUI
  42. 42. Scaffold – Rapid CSS Development Framework PHP Zahlreiche CSS3-basierte Bausteine Layout-Plugin (CSS 3 Multicolumn Module)
  43. 43. Wo liegen die Vorteile des Framework-Einsatzes? SPIELZEUG ODER ECHTE HILFE?
  44. 44. Layout-Frameworks Abstrahieren Standardaufgaben Implementieren Best-Practice-Lösungen Mehr Zeit für Ihre Kreativität
  45. 45. Wo ist der heilige Gral? DIE QUAL DER WAHL
  46. 46. Ausblick in die Zukunft der Webentwicklung WHERE NO MAN HAS GONE BEFORE…
  47. 47. „If I can see further than anyone else, it is only because I am standing on the shoulders of giants.” Sir Isaac Newton

×