advertisement

CSS Frameworks

27 %
73 %
advertisement
Information about CSS Frameworks

Published on February 3, 2008

Author: zerok

Source: slideshare.net

Description

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

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

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

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 offer 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 flexibility 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-official tool to create a grid for every fixed resolution No fluid 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 defines 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-defined 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 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

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

CSS Framework? What’s out there? Conclusion Thanks for your attention Questions? 21 / 21

#doc presentations

Add a comment

Related pages

10 CSS-Frameworks im Vergleich | t3n

CSS-Frameworks sind beliebt bei Entwicklern, denn sie können viel Zeit sparen. Wir stellen die besten vor.
Read more

CSS-Framework – Wikipedia

CSS-Frameworks können unterschiedliche Funktionen anbieten: Die Hauptfunktion ist meist ein Grid-System, besonders auch für Responsive Webdesign.
Read more

YAML CSS Framework — for truly flexible, accessible and ...

Yet Another Multicolumn Layout (YAML) is a modular CSS framework for truly flexible, accessible and responsive websites.
Read more

A Flexible, Responsive CSS Framework - Powered by Sass - Gumby

Create rapid and logical page layout and app prototypes with Gumby Framework, a flexible, responsive CSS framework, powered by Sass
Read more

Die 10 besten responsive Frameworks - the-webdesign.net

Responsive Frameworks beschleunigen die Entwicklung einer responsive Webseite ungemein. Hier sind die besten 10 Web Frameworks für euch!
Read more

CSS frameworks - Wikipedia

List of CSS frameworks. Bootstrap; awsm.css; Baseguide; BoxySheets; Bulma; Cascade Framework; Cascade Framework Light; Chopstick; Concise; Flexify; floatz ...
Read more

CSS - CSS Frameworks - de.learnlayout.com

CSS Frameworks. Weil Layouten mit CSS so trickreich ist, gibt es zahlreiche CSS Frameworks, die dir die Arbeit erleichtern. Hier sind ein paar, falls du ...
Read more

CSS frameworks

A collection of the best front end frameworks. Develop web apps faster with pre-made grid systems, layouts and UI elements.
Read more

Documentation & Demos – YAML CSS Framework

YAML 4 CSS Framework. A modular CSS framework for truly flexible, accessible and responsive websites
Read more

Framework – Wikipedia

Frameworks werden also im Allgemeinen mit dem Ziel einer Wiederverwendung „architektonischer Muster ... YAML (Framework) CSS-Framework; Yii; Zend ...
Read more