Your SlideShare is downloading. ×
0
Css framework
Css framework
Css framework
Css framework
Css framework
Css framework
Css framework
Css framework
Css framework
Css framework
Css framework
Css framework
Css framework
Css framework
Css framework
Css framework
Css framework
Css framework
Css framework
Css framework
Css framework
Css framework
Css framework
Css framework
Css framework
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Css framework

304

Published on

Published in: Design, Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
304
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HOW TO DEVELOP A CSS FRAMEWORK By Olivier BessonHOW TO DEVELOPA CSS FRAMEWORKBy Olivier Besson - 2011
  • 2. HOW TO DEVELOP A CSS FRAMEWORK By Olivier BessonOUTLINEThe goal here is to present step by step how to develop easilyyour own CSS framework. I deliver here my own experiencewitch is to reduce time to integrate a web design in anenvironment 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 BessonRULESYour CSS must be non intrusive • Use class instead of id’s ( #id  .class) • Reserved a very few number of Id’s and exclusivly for layoutStay 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 BessonFRAMEWORK 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 BessonFRAMEWORK FILES1. LayoutThe first step is to think about your principal layout. This file will bethe 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 BessonFRAMEWORK FILES1. LayoutTry 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 BessonFRAMEWORK FILES1. LayoutDiscuss with product owner if your web application will have specificfunctionalities. Here I used 14 id’s, for main containers andfunctionalities 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 BessonFRAMEWORK FILES1. LayoutYou can also use zoning and eye tracking research to identify how toplace 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 BessonFRAMEWORK FILES2. Grid & UnitThe second step is to define your grid unit system. This will help youto realize your prototypes. With the grid you think in proportion andwith 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 BessonFRAMEWORK FILES2. Grid & UnitUnit 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 BessonUNIT-GRID : full layout
  • 13. HOW TO DEVELOP A CSS FRAMEWORK By Olivier BessonUNIT-GRID : #content
  • 14. HOW TO DEVELOP A CSS FRAMEWORK By Olivier BessonFRAMEWORK FILES2. Grid & UnitWith your units you can precise min-width or fixed contents.
  • 15. HOW TO DEVELOP A CSS FRAMEWORK By Olivier BessonFRAMEWORK FILES2. Grid & UnitFor the Grid I used the Yahoo Grid system wich provide allproportions 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 Bessonhttp://yuilibrary.com/yui/docs/cssgrids/cssgrids-units-example.html
  • 17. HOW TO DEVELOP A CSS FRAMEWORK By Olivier BessonFRAMEWORK FILES3. ResetThe third step is to prevent your design of navigators differents. Thebest 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 BessonFRAMEWORK FILES4. TypographyThe fourth step is to describe basic colors and size of content htmltags 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 BessonFRAMEWORK FILES5. Forms & TablesThe fifth step is to define html tags specific for forms and tables.Remember, be generic, you will be more specific if a component usea 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 BessonFRAMEWORK FILES6. Generic classesIn this file you create all basic design tips you will need. This file isgenerally increased during the project when a css line become usedby 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 BessonUi_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 BessonFRAMEWORK FILES7. ComponentsThis is the last important step, this css file describe basic componentof 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 BessonUi_component.cssNavigator components :•Buttons Button Box Layer•Box•LayersWeb framework component:•Error•Flash message
  • 24. HOW TO DEVELOP A CSS FRAMEWORK By Olivier BessonFRAMEWORK FILES8. Default themeThe final step is to define default backgrounds and images of yourelements. 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

×