Making Your Own CSS Framework

9,121 views

Published on

Presentation from MinneWebCon 2011

Published in: Technology, Design
  • Be the first to comment

Making Your Own CSS Framework

  1. 1. Making your own CSS Framework
  2. 2. Why Make One?  
  3. 3. It’s easier for.. <ul><li>Designers </li></ul><ul><li>Coders </li></ul><ul><li>Quick deployment </li></ul><ul><li>Future upgradability </li></ul><ul><li>Accessibility </li></ul><ul><li>Your users </li></ul><ul><li>Managing far more sites </li></ul>
  4. 4. Who am I? I don’t do much coding anymore… I don’t need to.
  5. 5. Under Pressure <ul><li>In one of the largest colleges at the U of M </li></ul><ul><li>Managing around 200 web sites </li></ul><ul><li>Size of web team going from 5, down to 2 </li></ul><ul><ul><li>Uncertain of future capacity </li></ul></ul>
  6. 6. What were our priorities? <ul><li>Flexible </li></ul><ul><ul><li>Horizontal and vertical navs </li></ul></ul><ul><ul><li>Individuality: Different colors and pictures </li></ul></ul><ul><li>Accessible </li></ul><ul><ul><li>Use H tags correctly, and consistently </li></ul></ul><ul><ul><li>Jump to content and nav is consistent </li></ul></ul><ul><li>Interchangeable </li></ul><ul><ul><li>Can pull one piece out of a site, and drop it into another… easily </li></ul></ul>
  7. 7. Weighing our needs <ul><li>Where is the balance between flexibility, and time constraint? </li></ul><ul><li>Is there anything you are sure will be on every page? </li></ul><ul><li>What do you suspect will be on every page? </li></ul>
  8. 8. What’s the same on every page? <ul><li>Logos </li></ul><ul><li>Banners </li></ul><ul><li>Page width </li></ul><ul><li>Search </li></ul><ul><li>Footer </li></ul><ul><li>Nav (kind of) </li></ul><ul><li>content </li></ul>
  9. 9. Getting Started  
  10. 21. Wow, what an ugly site!
  11. 27. Building in the frame <ul><li>Building those main boxes you use all the time </li></ul><ul><ul><li>Header </li></ul></ul><ul><ul><li>Footer </li></ul></ul><ul><ul><li>nav </li></ul></ul>
  12. 28. 1 st Step -CSS Reset- h1, p, div, ul, li { margin: 0; padding: 0; border: 0; }
  13. 29. The Container <ul><li>div#container { </li></ul><ul><ul><li>width: 960px; </li></ul></ul><ul><ul><li>margin: 0 auto; </li></ul></ul><ul><ul><li>text-align: left; </li></ul></ul><ul><li>} </li></ul>
  14. 30. Department Header <ul><li>div#header { </li></ul><ul><li>width: 960px; </li></ul><ul><li>} </li></ul>
  15. 31. U of M Header <ul><li>div#UMNheader { </li></ul><ul><li>width: 960px; </li></ul><ul><li>} </li></ul>
  16. 32. Navigation and Content <ul><li>div#nav { </li></ul><ul><li>width: 210px; </li></ul><ul><li>float: left; </li></ul><ul><li>} </li></ul><ul><li>div#content { </li></ul><ul><li>width: 750px; </li></ul><ul><li>float: left; </li></ul><ul><li>} </li></ul>
  17. 33. Footer <ul><li>div#footer { </li></ul><ul><li>width: 960px; </li></ul><ul><li>} </li></ul>
  18. 34. Margins
  19. 35. Building the flexible parts <ul><li>Columns </li></ul><ul><ul><li>div.half { width: 360px; float: left; } </li></ul></ul><ul><ul><li>div.third { width: 240px; float: left; } </li></ul></ul><ul><li>Content Styling </li></ul><ul><ul><li>div#content p { margin:10px 25px; padding:0; } </li></ul></ul><ul><ul><li>div#content ul { margin:10px 25px 10px 25px; padding:0; list-style-type:disc; } </li></ul></ul>
  20. 37. Wow… that’s really ugly.
  21. 40. The base of your framework: <ul><li>CSS Reset </li></ul><ul><li>Structural elements (the box model) </li></ul><ul><ul><li>To future proof, make them match HTML5 </li></ul></ul><ul><li>Major accessibility pieces </li></ul><ul><li>Tex styles </li></ul><ul><li>Image Styles </li></ul><ul><li>Columns for layout (furthering the box model) </li></ul><ul><li>A basic print style sheet </li></ul>
  22. 41. Keep out of the framework <ul><li>Colors </li></ul><ul><li>Images </li></ul><ul><li>Header images </li></ul><ul><li>Background images </li></ul><ul><li>Stylization of the nav </li></ul>
  23. 43. Make some widgets (don’t sweat the small stuff)
  24. 47. Design freedom
  25. 51. How to do it wrong … or “My first version”
  26. 52. Version 1 Too Constricting, No Individuality
  27. 53. Version 1 Too Constricting, No Individuality
  28. 54. Version 1 Too Constricting, No Individuality
  29. 55. To reiterate, it’s easier for.. <ul><li>Designers </li></ul><ul><li>Coders </li></ul><ul><li>Quick deployment </li></ul><ul><li>Future upgradability </li></ul><ul><li>Accessibility </li></ul><ul><li>Your users </li></ul><ul><li>Managing far more sites </li></ul>
  30. 56. Once you’ve got the basics… add some flare…
  31. 57. Interchangeable flare <ul><li>Emphasis Boxes </li></ul><ul><li>Pop up video boxes </li></ul><ul><li>Slide shows </li></ul>Like office space “Flare”
  32. 58. Questions? @dansag [email_address]
  33. 59. <ul><li>Contact me… </li></ul><ul><li>Twitter: @dansag </li></ul><ul><li>Email: dansag@umn.edu </li></ul><ul><li>Resources… </li></ul><ul><li>The CSS Framework </li></ul><ul><ul><li>http://intranet.cehd.umn.edu/demos/dan/MWC2011/core2011.css </li></ul></ul><ul><li>Example page </li></ul><ul><ul><li>http://intranet.cehd.umn.edu/demos/dan/MWC2011/default.html </li></ul></ul><ul><li>CSS Reset </li></ul><ul><ul><li>http://meyerweb.com/eric/tools/css/reset/ </li></ul></ul>

×