CSS Frameworks

6,905 views
6,749 views

Published on

Never heard of CSS frameworks before? Here I try to give a short overview of the whole concept and a couple of implementations.

Published in: Technology
0 Comments
19 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,905
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
344
Comments
0
Likes
19
Embeds 0
No embeds

No notes for slide

CSS Frameworks

  1. 1. CSS Framework? What’s out there? Conclusion CSS Frameworks: An introduction Horst Gutmann 2/2/2008 1 / 21
  2. 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. 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 definitions 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. 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. – Jeff Croft1 1 http://www.alistapart.com/articles/frameworksfordesigners 4 / 21
  5. 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. 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. 7. CSS Framework? What’s out there? Conclusion Disadvantages ... that are not yours You have to learn the framework Possible semantical implications Might offer too much 7 / 21
  8. 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. 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 flexibility of a framework ... and when you have to start with nesting ... and how much extra-markup is required 9 / 21
  10. 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-official tool to create a grid for every fixed resolution No fluid layout possible (yet) 10 / 21
  11. 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 defines a column that occupies 6 grid-columns. 11 / 21
  12. 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. 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-defined columns like in Blueprint. Requires a basic page structure with id’ elements. Font-size using % (mapping table provided) 13 / 21
  14. 14. CSS Framework? Blueprint What’s out there? YUI Grids Conclusion YAML Template base structure #doc{2,3,4} | #custom-doc #hd #doc defines the initial width of the grid (#doc3 = 100%) #bd #bd is required for automatic cleaning floats #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 floats ((1/3,1/3,1/3), (1/4,3/4), ...) Figure: Structure for templates 14 / 21
  15. 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. 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. 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. 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. 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. 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 fixed-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. 21. CSS Framework? What’s out there? Conclusion Thanks for your attention Questions? 21 / 21

×