WelcomeWelcome

CSS FrameworkCSS Framework

TopicsTopics

What is a CSS Framework .What is a CSS Framework . Difference between CSS and CSS Difference between CSS and CSS

FrameworkFramework Advantages and disadvantages.Advantages and disadvantages. Creating your own CSS Framework.Creating your own CSS Framework. Uses of each CSS file in a Framework.Uses of each CSS file in a Framework.

What is a CSS Framework .What is a CSS Framework . Difference between CSS and CSS Difference between CSS and CSS

FrameworkFramework Advantages and disadvantages.Advantages and disadvantages. Creating your own CSS Framework.Creating your own CSS Framework. Uses of each CSS file in a Framework.Uses of each CSS file in a Framework.

What is a CSS Framework What is a CSS Framework

A CSS framework is a pre-built structure of CSS styles and properties that you A CSS framework is a pre-built structure of CSS styles and properties that you

can use to generate specific looks on your Web pages, it is also known as web can use to generate specific looks on your Web pages, it is also known as web

design framework. design framework. it is a pre-prepared library that is meant to allow for it is a pre-prepared library that is meant to allow for

easier, more standards-complaint styling of a webpage using the easier, more standards-complaint styling of a webpage using the

Cascading Style Sheets language. Cascading Style Sheets language. Just like programming and scripting Just like programming and scripting

language libraries, CSS frameworks (usually packaged as external .css sheets language libraries, CSS frameworks (usually packaged as external .css sheets

inserted into the header) package a number of ready-made options for inserted into the header) package a number of ready-made options for

designing and outlaying a webpage.designing and outlaying a webpage.

AdvantagesAdvantages

1.They can help you learn CSS.1.They can help you learn CSS.

2. 2. Provide ready made codeProvide ready made code

3. 3. Cross browser compatibilityCross browser compatibility

4. 4. You increase your productivity and avoid common mistakes.You increase your productivity and avoid common mistakes.

5. They encourage grid based design.5. They encourage grid based design.

6. 6. You have a clean, well-structured and complete code.You have a clean, well-structured and complete code.

7. Documentation7. Documentation

DisadvantagesDisadvantages

1.In order to really benefit, and actually save time, you’ll need to1.In order to really benefit, and actually save time, you’ll need touse one framework over and over.use one framework over and over.

2. Significant amount of time & effort required to learn the framework 2. Significant amount of time & effort required to learn the framework

3. A framework may contain unnecessary code that you will never use 3. A framework may contain unnecessary code that you will never use

4. 4. You might inherit someone’s bugs or mistakes.You might inherit someone’s bugs or mistakes.

Creating your own CSS Creating your own CSS Framework.Framework.

You can create your own CSS framework. But before youYou can create your own CSS framework. But before you

begin first try few popular CSS frameworks or go through thebegin first try few popular CSS frameworks or go through the

documentation to see what they offers.documentation to see what they offers.

Most popular CSS frameworksMost popular CSS frameworks

1.Blueprint1.Blueprint

2.YAML2.YAML

3.YUI Grids Css Foundation3.YUI Grids Css Foundation

4.960 Grid System. 4.960 Grid System.

Why Build Your Own CSS Why Build Your Own CSS Framework?Framework?

1.More Productive1.More Productive

2.Better Design Compatibility2.Better Design Compatibility

3.Fewer Headaches 3.Fewer Headaches

4.Greater Flexibility 4.Greater Flexibility

Types of CSS FrameworkTypes of CSS Framework

1.Complete CSS Framework1.Complete CSS Framework

This type of framework attempts to cover most of the things a developer mayThis type of framework attempts to cover most of the things a developer mayneed. To find that whether it is a complete css framework or notneed. To find that whether it is a complete css framework or notsimply check that it has reset.css and layout.css or not. These two files aresimply check that it has reset.css and layout.css or not. These two files aremost important two be like a completed css framework.most important two be like a completed css framework.

ExamplesExamples

1.Blueprint1.Blueprint

2.YAML(Yet Another Multicolumn Layout)2.YAML(Yet Another Multicolumn Layout)

3. 3. YUI Grids CSS Fondation YUI Grids CSS Fondation

4.960 Grid System 4.960 Grid System

Limited CSS FrameworksLimited CSS Frameworks

As the name suggest this type of framework only covers limited needsAs the name suggest this type of framework only covers limited needs

or have specific purpose. Some of the frameworks we list under thisor have specific purpose. Some of the frameworks we list under this

category may be work in progress towards a Complete CSScategory may be work in progress towards a Complete CSS

Framework.Framework.

1.Tripoli1.Tripoli

2. SenCSS – Sensible Standards CSS Framework2. SenCSS – Sensible Standards CSS Framework

3. The 1Kb CSS Grid3. The 1Kb CSS Grid

4. jQuery UI CSS Framework4. jQuery UI CSS Framework

Stylesheets and their usesStylesheets and their usesReset.cssReset.cssThis file sets sensible defaults across all browsers. If we are starting a new project first ofThis file sets sensible defaults across all browsers. If we are starting a new project first ofall we goes to our main CSS file and add a few default styles to the body selector, suchall we goes to our main CSS file and add a few default styles to the body selector, suchas ‘margin: 0; padding:0; font-family: Helvetica, Arial, sans-serif;’ or something alongas ‘margin: 0; padding:0; font-family: Helvetica, Arial, sans-serif;’ or something alongthose lines. This is what reset.css does, and more. It resets default styles for spacing,those lines. This is what reset.css does, and more. It resets default styles for spacing,tables, fonts, etc. so you can work from a clean slate.tables, fonts, etc. so you can work from a clean slate.

Typography.cssTypography.cssThis file sets up some nice default typography. The typography.css also sets up some This file sets up some nice default typography. The typography.css also sets up some really nice styles around font sizes, line-heights, default styling of tables, etc. really nice styles around font sizes, line-heights, default styling of tables, etc.

Grid.css Grid.css This file handles the grid layout portion of our css framework. By default it uses a width ofThis file handles the grid layout portion of our css framework. By default it uses a width of950px, with 24 columns each having a width of 30px and a 10px margin between950px, with 24 columns each having a width of 30px and a 10px margin betweencolumns. but if this is not the layout you want, you can always use a columns. but if this is not the layout you want, you can always use a Blueprint Grid CSSGenerator to generate a custom grid layout. to generate a custom grid layout.

Stylesheets and their usesStylesheets and their usesIe.cssIe.cssWe all are commonly facing problems with browser compatability,mainly with ie6 andWe all are commonly facing problems with browser compatability,mainly with ie6 and

Other related advanced versions of ie.to avoid all these compatability issues this ie.cssOther related advanced versions of ie.to avoid all these compatability issues this ie.css

file is useful.file is useful.

Print.cssPrint.cssThis file sets some default print styles, so that printed versions of your site looks betterThis file sets some default print styles, so that printed versions of your site looks better

Than they usually would.Than they usually would.

Forms.cssForms.cssThis file provides nice looking default forms as well as classes for error notifications orThis file provides nice looking default forms as well as classes for error notifications or

even flash notifications.In this file there is default styles for all input types in your website.even flash notifications.In this file there is default styles for all input types in your website.

Thank YouThank You