CSS Framework By Nyros Developer

Welcome CSS Framework

Topics
What is a CSS Framework .
Difference between CSS and CSS Framework
Advantages and disadvantages.
Creating your own CSS Framework.
Uses of each CSS file in a Framework.

What is a CSS Framework
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
design framework. it is a pre-prepared library that is meant to allow for
easier, more standards-complaint styling of a webpage using the
Cascading Style Sheets language. Just like programming and scripting
language libraries, CSS frameworks (usually packaged as external .css sheets
inserted into the header) package a number of ready-made options for
designing and outlaying a webpage.

Advantages
1.They can help you learn CSS.
2. Provide ready made code
3. Cross browser compatibility
4. You increase your productivity and avoid common mistakes.
5. They encourage grid based design.
6. You have a clean, well-structured and complete code.
7. Documentation

Disadvantages
1.In order to really benefit, and actually save time, you’ll need to
use one framework over and over.
2. Significant amount of time & effort required to learn the framework
3. A framework may contain unnecessary code that you will never use
4. You might inherit someone’s bugs or mistakes.

Creating your own CSS Framework.
You can create your own CSS framework. But before you
begin first try few popular CSS frameworks or go through the
documentation to see what they offers.
Most popular CSS frameworks
1.Blueprint
2.YAML
3.YUI Grids Css Foundation
4.960 Grid System.

Why Build Your Own CSS Framework?
1.More Productive
2.Better Design Compatibility
3.Fewer Headaches
4.Greater Flexibility

Types of CSS Framework
1.Complete CSS Framework
This type of framework attempts to cover most of the things a developer may
need. To find that whether it is a complete css framework or not
simply check that it has reset.css and layout.css or not. These two files are
most important two be like a completed css framework.
Examples
1.Blueprint
2.YAML(Yet Another Multicolumn Layout)
3. YUI Grids CSS Fondation
4.960 Grid System

Limited CSS Frameworks
As the name suggest this type of framework only covers limited needs
or have specific purpose. Some of the frameworks we list under this
category may be work in progress towards a Complete CSS
Framework.
1.Tripoli
2. SenCSS – Sensible Standards CSS Framework
3. The 1Kb CSS Grid
4. jQuery UI CSS Framework

Stylesheets and their uses
Reset.css
This file sets sensible defaults across all browsers. If we are starting a new project first of
all we goes to our main CSS file and add a few default styles to the body selector, such
as ‘margin: 0; padding:0; font-family: Helvetica, Arial, sans-serif;’ or something along
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.
Typography.css
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.
Grid.css
This file handles the grid layout portion of our css framework. By default it uses a width of
950px, with 24 columns each having a width of 30px and a 10px margin between
columns. but if this is not the layout you want, you can always use a Blueprint Grid CSS
Generator to generate a custom grid layout.

Stylesheets and their uses
Ie.css
We 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.css
file is useful.
Print.css
This file sets some default print styles, so that printed versions of your site looks better
Than they usually would.
Forms.css
This 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.

Thank You

CSS Framework By Nyros Developer

by Nyros Technologies

Accessibility

Upload Details

Usage Rights

Statistics

CSS Framework By Nyros Developer Presentation Transcript