How to develop a CSS Framework

HOW TO DEVELOP A CSS FRAMEWORK By Olivier Besson

HOW TO DEVELOP

A CSS FRAMEWORKBy Olivier Besson - 2011


OUTLINE

The goal here is to present step by step how to develop easily

your own CSS framework. I deliver here my own experience

witch is to reduce time to integrate a web design in an

environment already providing is own CSS like Wordpress,

Tapestry,…

Our objectives

• Easily reusable

• Short source code

• Increase productivity

• Decrease bugs


RULES

Your CSS must be non intrusive

• Use class instead of id’s ( #id .class)

• Reserved a very few number of Id’s and exclusivly for layout

Stay with a generic template and layout

• No complete cascading style (.Table .Line .Cell .Link)

• Think about version upgrades conflicts

• Let your CSS framework be able to integrate new components

• Use a comprehensive semantic


FRAMEWORK FILES

@import url("ui_reset.css");

@import url("ui_typo.css");

@import url("ui_grid.css");

@import url("ui_unit.css");

@import url("ui_layout.css");

@import url("ui_form.css");

@import url("ui_table.css");

@import url("ui_generic.css");

@import url("ui_components.css");

@import url("ui_theme_default.css");


FRAMEWORK FILES

1. Layout

The first step is to think about your principal layout. This file will be

the only one with id’s in. Web 3.0 semantic can help you (header,

footer,…).





@import url("ui_layout.css");@import url("ui_form.css");






FRAMEWORK FILES

1. Layout

Try to describe your principal layout : columns, sidebars, …



FRAMEWORK FILES

1. Layout

Discuss with product owner if your web application will have specific

functionalities. Here I used 14 id’s, for main containers and

functionalities already identifyed.

• #container• #header

• #user

• #sections

• #navigation

• #nav-context

• #nav-menu

• #content

• #breadcrumbs

• #content-title

• #context

• #filter

• #synthesis

• #content-main


FRAMEWORK FILES

1. Layout

You can also use zoning and eye tracking research to identify how to

place your layout.

Percentage of user wich have seen the zone one time Eyetracking on our layout

Study by Ipsos Media with 3000 users on

100 differents websites


FRAMEWORK FILES

2. Grid & Unit

The second step is to define your grid unit system. This will help you

to realize your prototypes. With the grid you think in proportion and

with the unit you think in pixels.




@import url("ui_unit.css");@import url("ui_layout.css");







FRAMEWORK FILES

2. Grid & Unit

Unit are fixed by the result of your resolution users statistics.

According to those statistics we will use a 960*600 grid system.


UNIT-GRID : full layout


UNIT-GRID : #content


FRAMEWORK FILES

2. Grid & Unit

With your units you can precise min-width or fixed contents.


FRAMEWORK FILES

2. Grid & Unit

For the Grid I used the Yahoo Grid system wich provide all

proportions I need for my content.http://yuilibrary.com/yui/docs/cssgrids/

.yui3-u-1

.yui3-u-1-2

.yui3-u-1-3

.yui3-u-2-3

.yui3-u-1-4

.yui3-u-3-4

.yui3-u-1-5

.yui3-u-2-5

.yui3-u-3-5

.yui3-u-4-5

.yui3-u-1-6

.yui3-u-5-6

.yui3-u-1-8

.yui3-u-3-8

.yui3-u-5-8

.yui3-u-7-8

.yui3-u-1-12

.yui3-u-5-12

.yui3-u-7-12

.yui3-u-11-12

.yui3-u-1-24

.yui3-u-5-24

.yui3-u-7-24

.yui3-u-11-24

.yui3-u-13-24

.yui3-u-17-24

.yui3-u-19-24

.yui3-u-23-24


http://yuilibrary.com/yui/docs/cssgrids/cssgrids-units-example.html


FRAMEWORK FILES

3. Reset

The third step is to prevent your design of navigators differents. The

best solution is to reset all pre-design associated to html tags.

I used this one:

http://meyerweb.com/eric/tools/css/reset/reset.css

@import url("ui_reset.css"); @import url("ui_typo.css");









http://meyerweb.com/eric/tools/css/reset/reset.css


FRAMEWORK FILES

4. Typography

The fourth step is to describe basic colors and size of content html

tags sucha as H1, P, Legend,…


@import url("ui_typo.css");@import url("ui_grid.css");









FRAMEWORK FILES

5. Forms & Tables

The fifth step is to define html tags specific for forms and tables.

Remember, be generic, you will be more specific if a component use

a form and do not match really with your generic CSS.







@import url("ui_table.css");@import url("ui_generic.css");




FRAMEWORK FILES

6. Generic classes

In this file you create all basic design tips you will need. This file is

generally increased during the project when a css line become used

by many elements








@import url("ui_generic.css");@import url("ui_components.css");



Ui_generic.css

.content {

margin-left: 10px;

margin-right: 10px;

}

.content-height {

margin-top: 10px;

margin-bottom: 10px;

}

.content-right {

margin-left: 10px;

}

.content-left {

margin-right: 10px;

}

.content-text {

padding:6px;

}

.content-last {

margin-right: 0;

}

.content-top {

margin-bottom: 6px;

}

.centered {

margin-right: auto;

margin-left: auto;

}

.alright{

text-align:right;

}

.alleft{

text-align:left;

}

.hidden {

height: 1px;

left: -9999px;

overflow: hidden;

position: absolute;

top: 0;

width: 1px;

}


FRAMEWORK FILES

7. Components

This is the last important step, this css file describe basic component

of web interfaces, such as buttons, warnings…

You can also describe Html5 components.









@import url("ui_components.css");@import url("ui_theme_default.css");


Ui_component.css

Navigator components :

•Buttons

•Box

•Layers

Web framework component:

•Error

•Flash message

Box LayerButton


FRAMEWORK FILES

8. Default theme

The final step is to define default backgrounds and images of your

elements. It’s like to add a skin on a 3D model.

Then you concentrate in this file all colors and images.












Thank you

A full exemple is accessible here :

http://www.motsdimages.com/framework/layout.html

Technology

How to develop a CSS Framework