DESIGNING WITH AN HTML FRAMEWORKMatthew Ladner click-boom.com | mattladner.com

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 )

WHY DO I OFTEN USE FRAMEWORKS?

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.

HTML FRAMEWORKCONCEPTS

FIRST THE GOOD.

✮Provides you with a simple foundation to start.

✮Should be expandable.

✮Should save you time.

✮Should capitalize on good code.

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

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/

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/

HTMLFRAMEWORK

HTMLFRAMEWORK.COM

The Point:

• Keep it Simple

• Semantics are important

• CSS Should determine the layout not HTML

• A Great Starting point for any project.

HTMLFRAMEWORK.COM

LETS TAKE A LOOK

BLUEPRINTCSSFRAMEWORK

BLUEPRINTCSS.ORG

The Point:

•To Build and modify Layouts FAST

•To establish a vertical and horizontal grid

•Nice type and forms

•Works Cross Browser

BLUEPRINTCSS.ORG

BLUEPRINTCSS.ORG

WELL GET BACK TO MORE BLUEPRINT IN A BIT.

HTML5BOILER PLATEFRAMEWORK

HTML5BOILERPLATE.COM

HTML5BOILERPLATE.COM

The Point:

•Bullet proof HTML5 setup.

•Support for mobile.

•Fancy SEO Treats

•HTML5 Supported Reset

HTML5BOILERPLATE.COM

LETS TAKE A LOOK

LESSFRAMEWORK

LESSFRAMEWORK.COM

The Point:

•Wonderfully Light weight

•Meant for Modern web kit devices

•Simple grid

•It’s automatic!

LESSFRAMEWORK.COM

LETS TAKE A LOOK

NOW LETS WORKFAST

CLIPS IN YOUR TEXT EDITOR

CLIPS IN YOUR OS

BUILD YOUR OWN LIBRARIES

Fancy Buttonshttp://ubuwaits.github.com/css3-buttons/

LETS MAKE SOMETHING

WITH ALL OF THIS!

SLIDES UP AT:

CODE UP AT: HTTP://DROP.IO/PRESHTML/