SlideShare a Scribd company logo

How to develop a CSS Framework

•Download as PPTX, PDF•
•
Olivier Besson
Olivier Besson

The document discusses steps for developing a CSS framework, including defining layout rules, framework files, resets, grids and units, forms, tables, and generic classes. The framework is designed to be easily reusable, have a short source code, increase productivity, and decrease bugs. Key steps involve defining the layout, grids and units, resets, typography, forms and tables, and generic classes through separate CSS files.

1 of 25
HOW TO DEVELOP A CSS FRAMEWORK By Olivier Besson HOW TO DEVELOP A CSS FRAMEWORK By Olivier Besson - 2011
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
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
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");
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");
HOW TO DEVELOP A CSS FRAMEWORK By Olivier Besson FRAMEWORK FILES 1. Layout Try to describe your principal layout : columns, sidebars, …
HOW TO DEVELOP A CSS FRAMEWORK By Olivier Besson
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
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
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");
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.
HOW TO DEVELOP A CSS FRAMEWORK By Olivier Besson UNIT-GRID : full layout
HOW TO DEVELOP A CSS FRAMEWORK By Olivier Besson UNIT-GRID : #content
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.
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
HOW TO DEVELOP A CSS FRAMEWORK By Olivier Besson http://yuilibrary.com/yui/docs/cssgrids/cssgrids-units-example.html
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");
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");
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");
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");
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; }
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");
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
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");
HOW TO DEVELOP A CSS FRAMEWORK By Olivier Besson Thank you A full exemple is accessible here : http://www.motsdimages.com/framework/layout.html

More Related Content

How to develop a CSS Framework

  • 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