SlideShare ist ein Scribd-Unternehmen logo
1 von 21
Downloaden Sie, um offline zu lesen
CSS Framework?
      What’s out there?
             Conclusion




CSS Frameworks: An introduction

             Horst Gutmann


                  2/2/2008




                                  1 / 21
CSS Framework?
                   What’s out there?
                          Conclusion




1 CSS Framework?


2 What’s out there?
    Blueprint
    YUI Grids
    YAML


3 Conclusion




                                       2 / 21
CSS Framework?
                     What’s out there?
                            Conclusion



CSS Framework?



     ... or library, or in some cases a collection of common hacks
     for common problems.
     The moment you extract some general deïŹnitions from one
     project and make them accessible to other projects, have
     created yourself a framework
     They help you not to have to look up the same CSS hacks for
     positioning in IE again and again ;-)




                                                                     3 / 21
CSS Framework?
                           What’s out there?
                                  Conclusion



Purpose




         The goal here is to allow the designer or developer to
         focus on tasks that are unique to a given project, rather
         than reinventing the wheel each time around.
                                                                    – JeïŹ€ Croft1




    1
        http://www.alistapart.com/articles/frameworksfordesigners
                                                                                   4 / 21
CSS Framework?
                       What’s out there?
                              Conclusion



Separation



  In most cases it makes sense             reset
  to modularize a basic                    baseline
  stylesheet to make it possible           add-ons
  to only use some parts of it.                    typography
  This makes reusing the                           forms
  stylesheets even easier.                         grid
                                                   ...




                                                                5 / 21
CSS Framework?
                     What’s out there?
                            Conclusion



Advantages




      DRY (Don’t repeat yourself)
      Basic concept that makes it easy for other people to
      understand the style
      Implicitly use coding/naming guidelines




                                                             6 / 21
CSS Framework?
                      What’s out there?
                             Conclusion



Disadvantages




      ... that are not yours
      You have to learn the framework
      Possible semantical implications
      Might oïŹ€er too much




                                          7 / 21
CSS Framework?      Blueprint
                        What’s out there?    YUI Grids
                               Conclusion    YAML



Something has to be there...
                                       Symfony

                 Ruby on                                 Turbo-
                  Rails                                  gears


                                       Backend
               Django                                         ...




               jQuery           JavaScript   CSS




                YUI                                       ?

                                ...




                                                                    8 / 21
CSS Framework?     Blueprint
                      What’s out there?   YUI Grids
                             Conclusion   YAML



Basic example
                                                  ... with 4 columns
                                                  Most frameworks and
                                                  base-designs are targeted
                                                  at a maximum of 3
                                                  columns
    1st   2nd   3rd     4th
                                                  ... so how to get 4
                                                  columns to work, should
                                                  give some indication of
                                                  the ïŹ‚exibility of a
                                                  framework
                                                  ... and when you have to
                                                  start with nesting
                                                  ... and how much
                                                  extra-markup is required
                                                                              9 / 21
CSS Framework?     Blueprint
What’s out there?   YUI Grids
       Conclusion   YAML




  http://blueprintcss.googlecode.com
  License: MIT
  Based on the idea of splitting the width of a
  page into 24 columns (with 40px = 30px +
  10px margin each)
  By default max-width 950px (24 ∗ 40 − 10)
  Semi-oïŹƒcial tool to create a grid for every
  ïŹxed resolution
  No ïŹ‚uid layout possible (yet)




                                                  10 / 21
CSS Framework?     Blueprint
                      What’s out there?   YUI Grids
                             Conclusion   YAML



Required structure

             .container

               .column    .column         .column     .column
                .span-6    .span-6         .span-6     .span-6
                                                         .last




   .span-6 basically deïŹnes a column that occupies 6 grid-columns.

                                                                     11 / 21
CSS Framework?     Blueprint
                         What’s out there?   YUI Grids
                                Conclusion   YAML



Tools




                                                     Figure: Layout buildera
        Figure: Grid generatora
                                                 a
                                                   http:
    a
      http://kematzy.com/                     //www.blueprintlayouttool.com/
  blueprint-generator/


                                                                               12 / 21
CSS Framework?     Blueprint
What’s out there?   YUI Grids
       Conclusion   YAML




  http://developer.yahoo.com/yui
  License: BSD
  Part of the Yahoo User Interface library
  Let’s you separate a page into multiple
  columns (with a max. of 4) and subcolumns
  No pre-deïŹned columns like in Blueprint.
  Requires a basic page structure with id’
  elements.
  Font-size using % (mapping table provided)




                                               13 / 21
CSS Framework?     Blueprint
                                  What’s out there?   YUI Grids
                                         Conclusion   YAML



Template base structure

   #doc{2,3,4} | #custom-doc

                          #hd                         #doc deïŹnes the initial width of
                                                      the grid (#doc3 = 100%)
                          #bd

                                                      #bd is required for automatic
                                                      cleaning ïŹ‚oats
              #yui-main         .yui-b
                                                      2-column designs with
                                                      templates .yui-t{1,2,3,4,5,6},
                                                      #yui-main and .yui-b
                          #ft
                                                      Nesting using pre-made ïŹ‚oats
                                                      ((1/3,1/3,1/3), (1/4,3/4), ...)
  Figure: Structure for
  templates

                                                                                         14 / 21
CSS Framework?     Blueprint
                          What’s out there?   YUI Grids
                                 Conclusion   YAML



Grid example

  <d i v i d=” bd ”>
        <d i v c l a s s=” y u i −g ”>
              <d i v c l a s s=” y u i −g f i r s t ”>
                    <d i v c l a s s=” y u i −u f i r s t ”>1 s t</ d i v>
                    <d i v c l a s s=” y u i −u”>2 nd</ d i v>
              </ d i v>
              <d i v c l a s s=” y u i −g ”>
                    <d i v c l a s s=” y u i −u f i r s t ”>3 r d</ d i v>
                    <d i v c l a s s=” y u i −u”>4 t h</ d i v>
              </ d i v>
        </ d i v>
  </ d i v>




                                                                             15 / 21
CSS Framework?     Blueprint
What’s out there?   YUI Grids
       Conclusion   YAML




  http://www.yaml.de
  License: CC-A and commercial license
  Very well documented
  Floats everywhere
  Also supports IE5.
  No separation between reset- and
  base-stylesheet
  No merged stylesheet provided




                                         16 / 21
CSS Framework?     Blueprint
                            What’s out there?   YUI Grids
                                   Conclusion   YAML



Recommended base structure

   #page_margin

    #page

                  #header   #topnav


                   #nav                                  Recommended because
                  #main
                                                         mostly the IE-hacks are
                   #col1
                                                         based on this structurea
                                                         #col3 has an auto-width
                   #col2
                                                     a
                                                      http://www.yaml.de/en/documentation
                   #col3
                                                 variations.html

                  #footer




                                                                                    17 / 21
CSS Framework?     Blueprint
                        What’s out there?   YUI Grids
                               Conclusion   YAML



One last time: The example
  <d i v i d=” body ”>
    <d i v i d=” c o l 1 ”>
        <d i v i d=” c o l 1 c o n t e n t ”>1 s t</ d i v></ d i v>
    <d i v i d=” c o l 2 ”>
        <d i v i d=” c o l 2 c o n t e n t ”>2 nd</ d i v></ d i v>
    <d i v i d=” c o l 3 ”>
        <d i v c l a s s=” s u b c o l u m n s ”>
           <d i v c l a s s=” c 5 0 l ”>
              <d i v c l a s s=” s u b c l ”>3 r d</ d i v></ d i v>
           <d i v c l a s s=” c 5 0 r ”>
              <d i v c l a s s=” s u b c r ”>4 t h</ d i v></ d i v>
        </ d i v>
    </ d i v>
  </ d i v>

                                                                       18 / 21
CSS Framework?     Blueprint
                        What’s out there?   YUI Grids
                               Conclusion   YAML



Uhm...

                                             #c o l 1 {
                                                    w i d t h : 25%;
                                                    float : left ;
                                             }
  The problem here is, that this             #c o l 2 {
                                                    w i d t h : 25%;
  is not all that is required. You
                                                    float : left ;
  also need at least this:                   }
                                             #c o l 3 {
                                                    margin : 0 ;
                                                    w i d t h : 50%;
                                             }




                                                                       19 / 21
CSS Framework?
                      What’s out there?
                             Conclusion



Conclusion



      You’ll have to see for yourself, which one is the best for you
      Blueprint looks like a good approach for ïŹxed-width designs
      because it makes calculating image dimensions easy.
      YUI looks more lightweight compared to YAML
      YUI doesn’t let you grid header not footer.
      Is it still worth supporting IE5?




                                                                       20 / 21
CSS Framework?
                  What’s out there?
                         Conclusion



Thanks for your attention




   Questions?




                                      21 / 21

Weitere Àhnliche Inhalte

Ähnlich wie CSS Frameworks

Drupal Theming with CSS Frameworks (960grid)
Drupal Theming with CSS Frameworks (960grid)Drupal Theming with CSS Frameworks (960grid)
Drupal Theming with CSS Frameworks (960grid)
Ryan Cross
 
A Java Fork_Join Framework
A Java Fork_Join FrameworkA Java Fork_Join Framework
A Java Fork_Join Framework
Hiroshi Ono
 
960 grid psd
960 grid psd960 grid psd
960 grid psd
Raju Nag
 
MW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationMW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentation
Charlie Moad
 
Set model and page fault.44
Set model and page fault.44Set model and page fault.44
Set model and page fault.44
myrajendra
 

Ähnlich wie CSS Frameworks (20)

An Introduction to CSS Frameworks
An Introduction to CSS FrameworksAn Introduction to CSS Frameworks
An Introduction to CSS Frameworks
 
Drupal Theming with CSS Frameworks (960grid)
Drupal Theming with CSS Frameworks (960grid)Drupal Theming with CSS Frameworks (960grid)
Drupal Theming with CSS Frameworks (960grid)
 
How Servo Renders the Web
How Servo Renders the WebHow Servo Renders the Web
How Servo Renders the Web
 
fj
fjfj
fj
 
CSS Grid Systems
CSS Grid SystemsCSS Grid Systems
CSS Grid Systems
 
Drupal 960 grid system based theming
Drupal 960 grid system based theming Drupal 960 grid system based theming
Drupal 960 grid system based theming
 
Lec18
Lec18Lec18
Lec18
 
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)
Accelerated grid theming using NineSixty (Drupal Design Camp Boston 2009)
 
A Java Fork_Join Framework
A Java Fork_Join FrameworkA Java Fork_Join Framework
A Java Fork_Join Framework
 
Beginning CSS.
Beginning CSS.Beginning CSS.
Beginning CSS.
 
Accelerated grid theming using NineSixty (DrupalCamp Dallas)
Accelerated grid theming using NineSixty (DrupalCamp Dallas)Accelerated grid theming using NineSixty (DrupalCamp Dallas)
Accelerated grid theming using NineSixty (DrupalCamp Dallas)
 
Accelerated Grid Theming
Accelerated Grid ThemingAccelerated Grid Theming
Accelerated Grid Theming
 
Knowing it all
Knowing it allKnowing it all
Knowing it all
 
Web I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksWeb I - 07 - CSS Frameworks
Web I - 07 - CSS Frameworks
 
960 grid psd
960 grid psd960 grid psd
960 grid psd
 
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeCreating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
 
MW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationMW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentation
 
Set model and page fault.44
Set model and page fault.44Set model and page fault.44
Set model and page fault.44
 
Fowa Miami 09 Cloud Computing Workshop
Fowa Miami 09 Cloud Computing WorkshopFowa Miami 09 Cloud Computing Workshop
Fowa Miami 09 Cloud Computing Workshop
 
Fun with css frameworks
Fun with css frameworksFun with css frameworks
Fun with css frameworks
 

KĂŒrzlich hochgeladen

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

KĂŒrzlich hochgeladen (20)

[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 

CSS Frameworks

  • 1. CSS Framework? What’s out there? Conclusion CSS Frameworks: An introduction Horst Gutmann 2/2/2008 1 / 21
  • 2. CSS Framework? What’s out there? Conclusion 1 CSS Framework? 2 What’s out there? Blueprint YUI Grids YAML 3 Conclusion 2 / 21
  • 3. CSS Framework? What’s out there? Conclusion CSS Framework? ... or library, or in some cases a collection of common hacks for common problems. The moment you extract some general deïŹnitions from one project and make them accessible to other projects, have created yourself a framework They help you not to have to look up the same CSS hacks for positioning in IE again and again ;-) 3 / 21
  • 4. CSS Framework? What’s out there? Conclusion Purpose The goal here is to allow the designer or developer to focus on tasks that are unique to a given project, rather than reinventing the wheel each time around. – JeïŹ€ Croft1 1 http://www.alistapart.com/articles/frameworksfordesigners 4 / 21
  • 5. CSS Framework? What’s out there? Conclusion Separation In most cases it makes sense reset to modularize a basic baseline stylesheet to make it possible add-ons to only use some parts of it. typography This makes reusing the forms stylesheets even easier. grid ... 5 / 21
  • 6. CSS Framework? What’s out there? Conclusion Advantages DRY (Don’t repeat yourself) Basic concept that makes it easy for other people to understand the style Implicitly use coding/naming guidelines 6 / 21
  • 7. CSS Framework? What’s out there? Conclusion Disadvantages ... that are not yours You have to learn the framework Possible semantical implications Might oïŹ€er too much 7 / 21
  • 8. CSS Framework? Blueprint What’s out there? YUI Grids Conclusion YAML Something has to be there... Symfony Ruby on Turbo- Rails gears Backend Django ... jQuery JavaScript CSS YUI ? ... 8 / 21
  • 9. CSS Framework? Blueprint What’s out there? YUI Grids Conclusion YAML Basic example ... with 4 columns Most frameworks and base-designs are targeted at a maximum of 3 columns 1st 2nd 3rd 4th ... so how to get 4 columns to work, should give some indication of the ïŹ‚exibility of a framework ... and when you have to start with nesting ... and how much extra-markup is required 9 / 21
  • 10. CSS Framework? Blueprint What’s out there? YUI Grids Conclusion YAML http://blueprintcss.googlecode.com License: MIT Based on the idea of splitting the width of a page into 24 columns (with 40px = 30px + 10px margin each) By default max-width 950px (24 ∗ 40 − 10) Semi-oïŹƒcial tool to create a grid for every ïŹxed resolution No ïŹ‚uid layout possible (yet) 10 / 21
  • 11. CSS Framework? Blueprint What’s out there? YUI Grids Conclusion YAML Required structure .container .column .column .column .column .span-6 .span-6 .span-6 .span-6 .last .span-6 basically deïŹnes a column that occupies 6 grid-columns. 11 / 21
  • 12. CSS Framework? Blueprint What’s out there? YUI Grids Conclusion YAML Tools Figure: Layout buildera Figure: Grid generatora a http: a http://kematzy.com/ //www.blueprintlayouttool.com/ blueprint-generator/ 12 / 21
  • 13. CSS Framework? Blueprint What’s out there? YUI Grids Conclusion YAML http://developer.yahoo.com/yui License: BSD Part of the Yahoo User Interface library Let’s you separate a page into multiple columns (with a max. of 4) and subcolumns No pre-deïŹned columns like in Blueprint. Requires a basic page structure with id’ elements. Font-size using % (mapping table provided) 13 / 21
  • 14. CSS Framework? Blueprint What’s out there? YUI Grids Conclusion YAML Template base structure #doc{2,3,4} | #custom-doc #hd #doc deïŹnes the initial width of the grid (#doc3 = 100%) #bd #bd is required for automatic cleaning ïŹ‚oats #yui-main .yui-b 2-column designs with templates .yui-t{1,2,3,4,5,6}, #yui-main and .yui-b #ft Nesting using pre-made ïŹ‚oats ((1/3,1/3,1/3), (1/4,3/4), ...) Figure: Structure for templates 14 / 21
  • 15. CSS Framework? Blueprint What’s out there? YUI Grids Conclusion YAML Grid example <d i v i d=” bd ”> <d i v c l a s s=” y u i −g ”> <d i v c l a s s=” y u i −g f i r s t ”> <d i v c l a s s=” y u i −u f i r s t ”>1 s t</ d i v> <d i v c l a s s=” y u i −u”>2 nd</ d i v> </ d i v> <d i v c l a s s=” y u i −g ”> <d i v c l a s s=” y u i −u f i r s t ”>3 r d</ d i v> <d i v c l a s s=” y u i −u”>4 t h</ d i v> </ d i v> </ d i v> </ d i v> 15 / 21
  • 16. CSS Framework? Blueprint What’s out there? YUI Grids Conclusion YAML http://www.yaml.de License: CC-A and commercial license Very well documented Floats everywhere Also supports IE5. No separation between reset- and base-stylesheet No merged stylesheet provided 16 / 21
  • 17. CSS Framework? Blueprint What’s out there? YUI Grids Conclusion YAML Recommended base structure #page_margin #page #header #topnav #nav Recommended because #main mostly the IE-hacks are #col1 based on this structurea #col3 has an auto-width #col2 a http://www.yaml.de/en/documentation #col3 variations.html #footer 17 / 21
  • 18. CSS Framework? Blueprint What’s out there? YUI Grids Conclusion YAML One last time: The example <d i v i d=” body ”> <d i v i d=” c o l 1 ”> <d i v i d=” c o l 1 c o n t e n t ”>1 s t</ d i v></ d i v> <d i v i d=” c o l 2 ”> <d i v i d=” c o l 2 c o n t e n t ”>2 nd</ d i v></ d i v> <d i v i d=” c o l 3 ”> <d i v c l a s s=” s u b c o l u m n s ”> <d i v c l a s s=” c 5 0 l ”> <d i v c l a s s=” s u b c l ”>3 r d</ d i v></ d i v> <d i v c l a s s=” c 5 0 r ”> <d i v c l a s s=” s u b c r ”>4 t h</ d i v></ d i v> </ d i v> </ d i v> </ d i v> 18 / 21
  • 19. CSS Framework? Blueprint What’s out there? YUI Grids Conclusion YAML Uhm... #c o l 1 { w i d t h : 25%; float : left ; } The problem here is, that this #c o l 2 { w i d t h : 25%; is not all that is required. You float : left ; also need at least this: } #c o l 3 { margin : 0 ; w i d t h : 50%; } 19 / 21
  • 20. CSS Framework? What’s out there? Conclusion Conclusion You’ll have to see for yourself, which one is the best for you Blueprint looks like a good approach for ïŹxed-width designs because it makes calculating image dimensions easy. YUI looks more lightweight compared to YAML YUI doesn’t let you grid header not footer. Is it still worth supporting IE5? 20 / 21
  • 21. CSS Framework? What’s out there? Conclusion Thanks for your attention Questions? 21 / 21