Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Frameworks for the web

794 views

Published on

Published in: Design, Technology
  • If you are looking for trusted essay writing service I highly recommend ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐ The service I received was great. I got an A on my final paper which really helped my grade. Knowing that I can count on them in the future has really helped relieve the stress, anxiety and workload. I recommend everyone to give them a try. You'll be glad you did.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Frameworks for the web

  1. 1. Designing with an HTML Framework<br />Matthew Ladner click-boom.com | mattladner.com<br />
  2. 2. Who am I<br /><ul><li> Lead Web Designer at Click Boom
  3. 3. Web Designer since 2000ish
  4. 4. I love dogs, drawing, and techno
  5. 5. I suffer from functional impairment. (Developmental Dyslexia , Dysphasia, Dyscalculia )</li></li></ul><li>Why do I often use frameworks?<br />
  6. 6. Who are you?<br /><ul><li> You are an HTML and CSS ninja.
  7. 7. Designs and develops under extreme deadlines.
  8. 8. Doesn’t mind getting hands dirty.
  9. 9. You love you text editor.</li></ul>Hypothetically speaking.<br />
  10. 10. <joke class=“nerd”><br /></joke><br />
  11. 11. HTML FrameworkConcepts<br />
  12. 12. First the good.<br /><ul><li>Provides you with a simple foundation to start.
  13. 13. Should be expandable.
  14. 14. Should save you time.
  15. 15. Should capitalize on good code.</li></li></ul><li>And Now the bad . . .<br /><ul><li> Sometimes less semantic.
  16. 16. Sometimes less readable.
  17. 17. Code and design are often not separate.
  18. 18. You have to learn how to use them </li></li></ul><li>LOTS AND LOTS OF GOOD ONES<br /><ul><li>Golden Grid - http://code.google.com/p/the-golden-grid/
  19. 19. 960gs - http://960.gs/
  20. 20. HTML Framework- http://htmlframework.com/
  21. 21. Blueprint- http://www.blueprintcss.org/
  22. 22. Simple Grid- http://www.1kbgrid.com/
  23. 23. Less Framework- http://lessframework.com/
  24. 24. iWebkit (for iPhone) - http://iwebkit.net/
  25. 25. HTML Boiler Plate- http://html5boilerplate.com/</li></li></ul><li>LOTS AND LOTS OF GOOD ONES<br /><ul><li>Golden Grid - http://code.google.com/p/the-golden-grid/
  26. 26. 960gs - http://960.gs/
  27. 27. HTML Framework- http://htmlframework.com/
  28. 28. Blueprint- http://www.blueprintcss.org/
  29. 29. Simple Grid- http://www.1kbgrid.com/
  30. 30. Less Framework- http://lessframework.com/
  31. 31. iWebkit (for iPhone) - http://iwebkit.net/
  32. 32. HTML Boiler Plate- http://html5boilerplate.com/</li></li></ul><li>HTMLFramework<br />
  33. 33. HTMLFramework.com<br />The Point:<br /><ul><li> Keep it Simple
  34. 34. Semantics are important
  35. 35. CSS Should determine the layout not HTML
  36. 36. A Great Starting point for any project.</li></li></ul><li>HTMLFramework.com<br />LETS TAKE A LOOK<br />
  37. 37. BluePrintCSSFramework<br />
  38. 38. blueprintcss.org<br />The Point:<br /><ul><li>To Build and modify Layouts FAST
  39. 39. To establish a vertical and horizontal grid
  40. 40. Nice type and forms
  41. 41. Works Cross Browser</li></li></ul><li>blueprintcss.org<br />
  42. 42. blueprintcss.org<br />
  43. 43. well get back to more blueprint in a bit.<br />
  44. 44. HTML5Boiler plateFramework<br />
  45. 45. html5boilerplate.com<br />
  46. 46. html5boilerplate.com<br />The Point:<br /><ul><li>Bullet proof HTML5 setup.
  47. 47. Support for mobile.
  48. 48. Fancy SEO Treats
  49. 49. HTML5 Supported Reset</li></li></ul><li>html5boilerplate.com<br />LETS TAKE A LOOK<br />
  50. 50. LessFramework<br />
  51. 51. lessframework.com<br />The Point:<br /><ul><li>Wonderfully Light weight
  52. 52. Meant for Modern web kit devices
  53. 53. Simple grid
  54. 54. It’s automatic!</li></li></ul><li>lessframework.com<br />LETS TAKE A LOOK<br />
  55. 55. Now lets workFAST<br />
  56. 56. CLIPS in your text editor<br />
  57. 57. CLIPS in your OS<br />
  58. 58. Build your own libraries <br />Fancy Buttons<br />http://ubuwaits.github.com/css3-buttons/<br />
  59. 59. LETS MAKE SOMETHINGWITH ALL OF THIS!Slides up at: Code up at: http://drop.io/PresHTML/<br />

×