Frameworks for the web
description
Transcript of Frameworks for the web
![Page 1: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/1.jpg)
DESIGNING WITH AN HTML FRAMEWORKMatthew Ladner click-boom.com | mattladner.com
![Page 2: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/2.jpg)
WHO AM I
✮ Lead Web Designer at Click Boom
✮Web Designer since 2000ish
✮ I love dogs, drawing, and techno
✮ I suffer from functional impairment. (Developmental Dyslexia , Dysphasia, Dyscalculia )
![Page 3: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/3.jpg)
WHY DO I OFTEN USE FRAMEWORKS?
![Page 4: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/4.jpg)
WHO ARE YOU?
✮ You are an HTML and CSS ninja.
✮ Designs and develops under extreme deadlines.
✮ Doesn’t mind getting hands dirty.
✮ You love you text editor.
Hypothetically speaking.
![Page 5: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/5.jpg)
HTML FRAMEWORKCONCEPTS
![Page 6: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/6.jpg)
FIRST THE GOOD.
✮Provides you with a simple foundation to start.
✮Should be expandable.
✮Should save you time.
✮Should capitalize on good code.
![Page 7: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/7.jpg)
AND NOW THE BAD . . .
✮ Sometimes less semantic.
✮Sometimes less readable.
✮ Code and design are often not separate.
✮You have to learn how to use them
![Page 8: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/8.jpg)
LOTS AND LOTS OF GOOD ONES✮ Golden Grid - http://code.google.com/p/the-golden-grid/
✮ 960gs - http://960.gs/
✮ HTML Framework - http://htmlframework.com/
✮Blueprint - http://www.blueprintcss.org/
✮Simple Grid - http://www.1kbgrid.com/
✮Less Framework - http://lessframework.com/
✮iWebkit (for iPhone) - http://iwebkit.net/
✮HTML Boiler Plate - http://html5boilerplate.com/
![Page 9: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/9.jpg)
LOTS AND LOTS OF GOOD ONES✮ Golden Grid - http://code.google.com/p/the-golden-grid/
✮ 960gs - http://960.gs/
✮ HTML Framework - http://htmlframework.com/
✮Blueprint - http://www.blueprintcss.org/
✮Simple Grid - http://www.1kbgrid.com/
✮Less Framework - http://lessframework.com/
✮iWebkit (for iPhone) - http://iwebkit.net/
✮HTML Boiler Plate - http://html5boilerplate.com/
![Page 10: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/10.jpg)
HTMLFRAMEWORK
![Page 11: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/11.jpg)
HTMLFRAMEWORK.COM
The Point:
• Keep it Simple
• Semantics are important
• CSS Should determine the layout not HTML
• A Great Starting point for any project.
![Page 12: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/12.jpg)
HTMLFRAMEWORK.COM
LETS TAKE A LOOK
![Page 13: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/13.jpg)
BLUEPRINTCSSFRAMEWORK
![Page 14: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/14.jpg)
BLUEPRINTCSS.ORG
The Point:
•To Build and modify Layouts FAST
•To establish a vertical and horizontal grid
•Nice type and forms
•Works Cross Browser
![Page 15: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/15.jpg)
BLUEPRINTCSS.ORG
![Page 16: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/16.jpg)
BLUEPRINTCSS.ORG
![Page 17: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/17.jpg)
WELL GET BACK TO MORE BLUEPRINT IN A BIT.
![Page 18: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/18.jpg)
HTML5BOILER PLATEFRAMEWORK
![Page 19: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/19.jpg)
HTML5BOILERPLATE.COM
![Page 20: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/20.jpg)
HTML5BOILERPLATE.COM
The Point:
•Bullet proof HTML5 setup.
•Support for mobile.
•Fancy SEO Treats
•HTML5 Supported Reset
![Page 21: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/21.jpg)
HTML5BOILERPLATE.COM
LETS TAKE A LOOK
![Page 22: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/22.jpg)
LESSFRAMEWORK
![Page 23: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/23.jpg)
LESSFRAMEWORK.COM
The Point:
•Wonderfully Light weight
•Meant for Modern web kit devices
•Simple grid
•It’s automatic!
![Page 24: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/24.jpg)
LESSFRAMEWORK.COM
LETS TAKE A LOOK
![Page 25: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/25.jpg)
NOW LETS WORKFAST
![Page 26: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/26.jpg)
CLIPS IN YOUR TEXT EDITOR
![Page 27: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/27.jpg)
CLIPS IN YOUR OS
![Page 28: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/28.jpg)
BUILD YOUR OWN LIBRARIES
Fancy Buttonshttp://ubuwaits.github.com/css3-buttons/
![Page 29: Frameworks for the web](https://reader034.fdocuments.us/reader034/viewer/2022051819/54c8289e4a7959691a8b4599/html5/thumbnails/29.jpg)
LETS MAKE SOMETHING
WITH ALL OF THIS!
SLIDES UP AT:
CODE UP AT: HTTP://DROP.IO/PRESHTML/