1. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson
HOW TO DEVELOP
A CSS FRAMEWORK
By Olivier Besson - 2011

2. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson
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

3. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson
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

4. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson
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");

5. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson
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_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");

6. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson
FRAMEWORK FILES
1. Layout
Try to describe your principal layout : columns, sidebars, …

7. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson

8. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson
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

9. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson
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

10. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson
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_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");

11. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson
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.

12. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson
UNIT-GRID : full layout

13. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson
UNIT-GRID : #content

14. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson
FRAMEWORK FILES
2. Grid & Unit
With your units you can precise min-width or fixed contents.

15. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson
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-6 .yui3-u-1-24
.yui3-u-1-2 .yui3-u-5-6 .yui3-u-5-24
.yui3-u-1-3 .yui3-u-1-8 .yui3-u-7-24
.yui3-u-2-3 .yui3-u-3-8 .yui3-u-11-24
.yui3-u-1-4 .yui3-u-5-8 .yui3-u-13-24
.yui3-u-3-4 .yui3-u-7-8 .yui3-u-17-24
.yui3-u-1-5 .yui3-u-1-12 .yui3-u-19-24
.yui3-u-2-5 .yui3-u-5-12 .yui3-u-23-24
.yui3-u-3-5 .yui3-u-7-12
.yui3-u-4-5 .yui3-u-11-12

16. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson
http://yuilibrary.com/yui/docs/cssgrids/cssgrids-units-example.html

17. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson
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");
@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");

18. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson
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_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");

19. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson
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_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");

20. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson
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_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");

21. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson
Ui_generic.css
.centered { .content {
margin-right: auto; margin-left: 10px;
margin-left: auto; margin-right: 10px;
} }
.alright{ .content-height {
text-align:right; margin-top: 10px;
} margin-bottom: 10px;
.alleft{ }
text-align:left; .content-right {
} margin-left: 10px;
.hidden { }
height: 1px; .content-left {
left: -9999px; margin-right: 10px;
overflow: hidden; }
position: absolute; .content-text {
top: 0; padding:6px;
width: 1px; }
} .content-last {
margin-right: 0;
}
.content-top {
margin-bottom: 6px;
}

22. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson
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_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");

23. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson
Ui_component.css
Navigator components :
•Buttons
Button Box Layer
•Box
•Layers
Web framework component:
•Error
•Flash message

24. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson
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.
@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");

25. HOW TO DEVELOP A CSS FRAMEWORK
By Olivier Besson
Thank you
A full exemple is accessible here :
http://www.motsdimages.com/framework/layout.html