refresh-okc-110419035057-phpapp02

8/4/2019 refresh-okc-110419035057-phpapp02

1/102

Refresh OKC April 19th 2011

http://refreshokc.org http://960.gs
http://refreshokc.org/http://960.gs/http://960.gs/http://960.gs/http://refreshokc.org/http://refreshokc.org/


2/102

Nathan Smith = UX developer @ HP Cloud Services

http://sonspring.com http://hp.com
http://sonspring.com/http://hp.com/http://hp.com/http://hp.com/http://sonspring.com/http://sonspring.com/


3/102

Relax. Please dont try to take notes feverishly.

Email http://sonspring.com/contact

Twitter http://twitter.com/nathansmith

Slides http://slideshare.net/nathansmith/refresh-okc
http://slideshare.net/nathansmith/refresh-okchttp://slideshare.net/nathansmith/refresh-okchttp://twitter.com/nathansmithhttp://twitter.com/nathansmithhttp://sonspring.com/contacthttp://sonspring.com/contact


4/102

An important discipline when using any

framework is striving to understand theunderlying language. In other words,

use it as a tool Not a black box.

Before we get started, lets agree: Code is not magic


5/102

http://imdb.com/title/tt1046173
http://imdb.com/title/tt1046173/http://imdb.com/title/tt1046173/http://imdb.com/title/tt1046173/


6/102

Our craft is becoming acommodity and the people in

charge dont care about the

quality of the markup, CSSor how short our JavaScript

is. What matters is how fast

you can get it to market, howmany people it reaches and

how cheaply it can be built.

Christian Heilmann developer evangelist at Mozilla

http://thinkvitamin.com/code/web-development-is-moving-on-are-you
http://thinkvitamin.com/code/web-development-is-moving-on-are-youhttp://thinkvitamin.com/code/web-development-is-moving-on-are-youhttp://thinkvitamin.com/code/web-development-is-moving-on-are-you


7/102

Point being, chooseyour battles wisely. In

the time you could

argue the relevance of

naming conventions

like these I just builta 16-column layout.

Matthew Anderson designer at OneHub.com

http://onehub.com/past/2009/5/13/why-we-chose-960gs-css-framework
http://onehub.com/past/2009/5/13/why-we-chose-960gs-css-frameworkhttp://onehub.com/past/2009/5/13/why-we-chose-960gs-css-frameworkhttp://onehub.com/past/2009/5/13/why-we-chose-960gs-css-framework


8/102

Truth be told, I dont really care if youuse the 960 Grid System or not.

I tell people who get all emotional over

semantics (ID & classes have none)

that it takes less energy to not use

something than to argue about it.

It also takes considerably more energy to do

research. Being ignorant is blissful and easy!

Allow me to clear up a (potential) misconception...


9/102

Semantics can reside in microformats class names,

because parsers are built to look for them specifically

http://microformats.org
http://microformats.org/http://microformats.org/http://microformats.org/


10/102

The W3Cs Semantic Web doesnt involve CSS

http://www.w3.org/DesignIssues/Semantic.html
http://www.w3.org/DesignIssues/Semantic.htmlhttp://www.w3.org/DesignIssues/Semantic.htmlhttp://www.w3.org/DesignIssues/Semantic.html


11/102

CSS gets no at the Semantic Web party

http://www.w3.org/standards/semanticweb
http://www.w3.org/DesignIssues/Semantic.htmlhttp://www.w3.org/DesignIssues/Semantic.htmlhttp://www.w3.org/DesignIssues/Semantic.html


12/102

So lets get this straight...

... Exceptin the case of microformats.


13/102

Jeff Crofts Frameworks for Designers article

http://www.alistapart.com/articles/frameworksfordesigners
http://www.alistapart.com/articles/frameworksfordesignershttp://www.alistapart.com/articles/frameworksfordesignershttp://www.alistapart.com/articles/frameworksfordesigners


14/102

Jeff Croft was never one to mince words...

http://jeffcroft.com/blog/2007/nov/17/whats-not-love-about-css-frameworks
http://jeffcroft.com/blog/2007/nov/17/whats-not-love-about-css-frameworkshttp://jeffcroft.com/blog/2007/nov/17/whats-not-love-about-css-frameworkshttp://jeffcroft.com/blog/2007/nov/17/whats-not-love-about-css-frameworks


15/102

Dont be a Luddite (Note: I was with Sass/SCSS)

http://en.wikipedia.org/wiki/Luddite

The Luddites were a social

movement of British textile

artisans in the nineteenth

century who protested

often by destroyingmechanized looms against

the changes produced by

the Industrial Revolution,

which they felt were leaving

them without work and

changing their way of life.
http://en.wikipedia.org/wiki/Ludditehttp://en.wikipedia.org/wiki/Ludditehttp://en.wikipedia.org/wiki/Luddite


16/102

Added semantics via role="..." & HTML5 tags

...

...

...

...

http://adactio.com/journal/4267 http://dev.w3.org/html5/html4-differences/#new-elements
http://adactio.com/journal/4267/http://dev.w3.org/html5/html4-differences/#new-elementshttp://dev.w3.org/html5/html4-differences/#new-elementshttp://dev.w3.org/html5/html4-differences/#new-elementshttp://adactio.com/journal/4267/http://adactio.com/journal/4267/


17/102

Added semantics via role="..." & HTML5 tags

...

...

...

...

http://adactio.com/journal/4267 http://dev.w3.org/html5/html4-differences/#new-elements
http://adactio.com/journal/4267/http://dev.w3.org/html5/html4-differences/#new-elementshttp://dev.w3.org/html5/html4-differences/#new-elementshttp://dev.w3.org/html5/html4-differences/#new-elementshttp://adactio.com/journal/4267/http://adactio.com/journal/4267/


18/102

Um, okay, but

why grids?My design skillz are so awesome,

Ive never needed to use grids.

#anyways #whatevs #whocares #sobored


19/102

For design thats really, really, ridiculously good looking

http://en.wikipedia.org/wiki/Zoolander

Also, to do other

things good too.
http://en.wikipedia.org/wiki/Zoolanderhttp://en.wikipedia.org/wiki/Zoolanderhttp://en.wikipedia.org/wiki/Zoolander


20/102

The reason I create and use CSS

frameworks is because I hate doing

mundane tasks repeatedly (yawn).

Id rather be working in JavaScript.

FYI: I dont especiallylove CSS.


21/102

Co-author

Tech editor Tech editor

jQueryEnlightenment.com

oreilly.com/catalog/9780596159788

JavaScriptEnlightenment.com

JavaScript books Ive worked on...

All involving Cody Lindley, who has been a JavaScript mentor to me: http://codylindley.com
http://codylindley.com/http://codylindley.com/http://codylindley.com/http://jqueryenlightenment.com/http://jqueryenlightenment.com/http://oreilly.com/catalog/9780596159788http://oreilly.com/catalog/9780596159788http://jqueryenlightenment.com/http://jqueryenlightenment.com/


22/102

There are many dragons

sharing the same public

facade in web development:

ColdFusion, Java, .NET,

Perl, PHP, Ruby, Python...

To render in a browser, it all

has to pass through HTML.

So, I think that front-end

is a good place to be! :)

Front-end is the opposite of a mythological hydra

http://en.wikipedia.org/wiki/Lernaean_Hydra
http://www.flickr.com/photos/meckert75/3732780382/http://www.flickr.com/photos/meckert75/3732780382/http://www.flickr.com/photos/meckert75/3732780382/


23/102

But I digress.Ill forever be known as the 960 guy.But I guess thats not so bad... Right?



24/102

The premise of the system is ideally suited to rapid

prototyping, but it would work equally well when

integrated into a production environment. There

are printable sketch sheets, design templates, and

CSS files that have identical measurements.

Whats this whole 960.gs thing all about?


25/102


26/102

The 960 Grid System is an effort to streamline

web development by providing commonly used

dimensions, based on a width of 960 pixels.

There are two variants: 12 and 16 columns,

which can be used separately or in tandem.

If you like, theres also a 24-column version.

Dogfooding = When you use your own product

NOM, NOM, NOM I use 960 regularly! :)


27/102

The 12-column grid is divided into portions thatare 60 pixels wide. The 16-column grid consists

of 40 pixel increments. Each column has 10

pixels of margin on the left and right, which

create 20 pixel wide gutters between columns.

The 24-column grid is also included. It consists

of columns 30 pixels wide, with 10 pixel gutters,and a 5 pixel buffer on each side of the container.

12, 16, and 24 columns available by default


28/102

Show me

teh codez!



29/102

Typical use case for a 12-column grid

I am 1/3 wide.

I am 1/3 wide.

Me too!

I am 1/2 wide.

I am 1/2 wide.


30/102

Typical use case for a 12-column grid

I am 1/3 wide.

I am 1/3 wide.

Me too!

I am 1/2 wide.

I am 1/2 wide.

N d id & C l


31/102

Nested grids & Column rearrangement

First nested grid.

Middle. No special class.

Last nested grid.

Last in markup, first visually.

N d id l h fi l ( )


32/102

Nested grids: alpha = first, omega = last (per row)

First nested grid.


Last nested grid.


C l t (SEO b )


33/102

Column rearrangement (SEOmaybe)

First nested grid.


Last nested grid.



34/102

http://960.gs/demo.html
http://960.gs/demo.htmlhttp://960.gs/demo.htmlhttp://960.gs/demo.html


35/102

http://960.gs/demo.html

H fi d idth id b t i ?
http://960.gs/demo.htmlhttp://960.gs/demo.htmlhttp://960.gs/demo.html


36/102

Have fixed-width grids become too pervasive?

http://twitter.com/jcroft/status/49880667374354433

H fi d idth id b t i ?
http://twitter.com/jcroft/status/49880667374354433http://twitter.com/jcroft/status/49880667374354433http://twitter.com/jcroft/status/49880667374354433


37/102

Have fixed-width grids become too pervasive?

http://twitter.com/nathansmith/status/49882179379015680

Man more possibilities ia grid generators
http://twitter.com/nathansmith/status/49882179379015680http://twitter.com/nathansmith/status/49882179379015680http://twitter.com/nathansmith/status/49882179379015680


38/102

http://grids.heroku.com

Many more possibilities via grid generators

Templates available for your weapon of choice
http://grids.heroku.com/http://grids.heroku.com/http://grids.heroku.com/


39/102

Templates available for your weapon of choice...

Acorn Fireworks Flash

InDesign GIMP Inkscape

Illustrator OmniGraffle Photoshop

QuarkXPress VisioExpression

Design

Adobe Fireworks 960 gs extension (Photoshop too)
http://www.microsoft.com/expression/http://www.microsoft.com/expression/http://www.microsoft.com/expression/http://www.microsoft.com/expression/http://office.microsoft.com/en-us/visio/http://office.microsoft.com/en-us/visio/http://www.quark.com/http://www.quark.com/http://www.adobe.com/products/photoshop.htmlhttp://www.adobe.com/products/photoshop.htmlhttp://www.omnigroup.com/products/omnigraffle/http://www.omnigroup.com/products/omnigraffle/http://www.adobe.com/products/illustrator.htmlhttp://www.adobe.com/products/illustrator.htmlhttp://inkscape.org/http://inkscape.org/http://www.gimp.org/http://www.gimp.org/http://www.adobe.com/products/indesign.htmlhttp://www.adobe.com/products/indesign.htmlhttp://www.adobe.com/products/flash.htmlhttp://www.adobe.com/products/flash.htmlhttp://www.adobe.com/products/fireworks.htmlhttp://www.adobe.com/products/fireworks.htmlhttp://flyingmeat.com/acorn/http://flyingmeat.com/acorn/


40/102

Adobe Fireworks 960.gs extension (Photoshop too)

Grids can accelerate progress while maintaining order


41/102

Grids can accelerate progress while maintaining order

http://www.flickr.com/photos/meckert75/3732780382

Michael Phelps following a painted line at the bottom
http://www.flickr.com/photos/meckert75/3732780382http://www.flickr.com/photos/meckert75/3732780382http://www.flickr.com/photos/meckert75/3732780382


42/102

Michael Phelps following a painted line at the bottom

of a pool doesnt make him a less talented swimmer.

http://livinggallery.oneindia.in/main.php?g2_itemId=32903
http://livinggallery.oneindia.in/main.php?g2_itemId=32903http://livinggallery.oneindia.in/main.php?g2_itemId=32903http://livinggallery.oneindia.in/main.php?g2_itemId=32903


43/102


44/102


45/102


46/102


47/102


48/102

Our best practices are killing us Nicole Sullivan


49/102


http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us

Three best practice myths...

1. Dont add any extra elements2. Dont add classes

3. Use descendent selectors exclusively

http://www.slideshare.net/stubbornella/our-best-practices-are-killing-ushttp://www.slideshare.net/stubbornella/our-best-practices-are-killing-ushttp://www.slideshare.net/stubbornella/our-best-practices-are-killing-us


50/102


http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us

Three best practice myths...

1. Dont add any extra elements2. Dont add classes

3. Use descendent selectors exclusively

Take all rules in development with a grain of salt
http://www.slideshare.net/stubbornella/our-best-practices-are-killing-ushttp://www.slideshare.net/stubbornella/our-best-practices-are-killing-ushttp://www.slideshare.net/stubbornella/our-best-practices-are-killing-us


51/102

Take all rules in development with a grain of salt

Sensibly revised...

1. Add extra elements sparingly2. Add classes thoughtfully

3. Avoid descendent selector kludge...

How would you style these links?


52/102

How would you style these links?

Home

About

Use only the selectors that are necessary.


53/102

Use onlythe selectors that are necessary.

.menu a {/* Terse = Get er done! */

}

ul.menu li a {

/* Too heavy = Overkill. */

}

Still true: Smart CSS aint always sexy CSS


54/102

http://www.digital-web.com/articles/smart_CSS_aint_always_sexy_CSS

Still true: Smart CSS ain t always sexy CSS

Inspiration: Khoi Vinn
http://www.digital-web.com/articles/smart_CSS_aint_always_sexy_CSShttp://www.digital-web.com/articles/smart_CSS_aint_always_sexy_CSShttp://www.digital-web.com/articles/smart_CSS_aint_always_sexy_CSS


55/102

Inspiration: Khoi Vinn

http://www.subtraction.com/2004/12/31/grid-computi

Inspiration: Cameron Moll
http://www.subtraction.com/2004/12/31/grid-computihttp://www.subtraction.com/2004/12/31/grid-computihttp://www.subtraction.com/2004/12/31/grid-computi


56/102

http://www.cameronmoll.com/archives/2006/12/gridding_the_960


http://www.cameronmoll.com/archives/2006/12/gridding_the_960http://www.cameronmoll.com/archives/2006/12/gridding_the_960http://www.cameronmoll.com/archives/2006/12/gridding_the_960


57/102

http://www.cameronmoll.com/archives/2006/12/gridding_the_960


Inspiration: Olav Bjrky
http://www.cameronmoll.com/archives/2006/12/gridding_the_960http://www.cameronmoll.com/archives/2006/12/gridding_the_960http://www.cameronmoll.com/archives/2006/12/gridding_the_960


58/102

p j y

http://bjorkoy.com/2007/08/launch-blueprint-a-css-framework

Inspiration: Brandon Schauer
http://bjorkoy.com/2007/08/launch-blueprint-a-css-frameworkhttp://bjorkoy.com/2007/08/launch-blueprint-a-css-frameworkhttp://bjorkoy.com/2007/08/launch-blueprint-a-css-framework


59/102

http://www.adaptivepath.com/ideas/e000863

p
http://www.adaptivepath.com/ideas/e000863http://www.adaptivepath.com/ideas/e000863http://www.adaptivepath.com/ideas/e000863


60/102

http://www.adaptivepath.com/ideas/e000863

Inspiration: Mark Boulton
http://www.adaptivepath.com/ideas/e000863http://www.adaptivepath.com/ideas/e000863http://www.adaptivepath.com/ideas/e000863


61/102

http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1

p

Frameworks are kind of like sheet music. They are
http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1


62/102

y

organized, and can keep teams on the same page.

http://www.flickr.com/photos/avlxyz/3280803912
http://www.flickr.com/photos/avlxyz/3280803912http://www.flickr.com/photos/avlxyz/3280803912http://www.flickr.com/photos/avlxyz/3280803912


63/102

Like jazz, responsive design is contextual.

No two approaches are exactlythe same.

Responsive Web Design - using @media queries


64/102

p g g q

http://www.alistapart.com/articles/responsive-web-design

Hicksdesign.co.uk = Beautiful responsive web design
http://www.alistapart.com/articles/responsive-web-design/http://www.alistapart.com/articles/responsive-web-design/http://www.alistapart.com/articles/responsive-web-design/


65/102

http://hicksdesign.co.uk

Media queries for mobile arent a magic bullet
http://hicksdesign.co.uk/http://hicksdesign.co.uk/http://hicksdesign.co.uk/


66/102

http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold

LifeChurch.tv - Separate site for mobile & desktop
http://www.cloudfour.com/css-media-query-for-mobile-is-fools-goldhttp://www.cloudfour.com/css-media-query-for-mobile-is-fools-goldhttp://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold


67/102

http://m.lifechurch.tv http://www.lifechurch.tv

Percentage-based grid, screenshot in Firefox 4.0
http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/http://www.lifechurch.tv/http://www.lifechurch.tv/http://www.lifechurch.tv/http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/


68/102

310px

150px

http://host.sonspring.com/yui3_grid

Percentage-based grid, screenshot in Chrome 10.0
http://host.sonspring.com/yui3_gridhttp://host.sonspring.com/yui3_grid


69/102

309px

149px

http://host.sonspring.com/yui3_grid

960s 24 column grid = Exact multiples of 10
http://host.sonspring.com/yui3_gridhttp://host.sonspring.com/yui3_grid


70/102

http://960.gs/demo_24_col.html

Whither: Grid framework or Responsive design?
http://960.gs/demo_24_col.htmlhttp://960.gs/demo_24_col.htmlhttp://960.gs/demo_24_col.html


71/102

Doing a fixed-width design using a grid framework is

relatively easy. Whereas, doing a responsive designthat looks solid at every resolution is multivariate and

there is not (yet) an automated, foolproof solution.

Pet peeve: Use tomorrows technology, today!


72/102

The mere fact were even able to use ittodaymakes it todays technology.

As designers and developers, its easy toget so caught up in wanting to use the

latest and greatest (to a fault) that we

forget to try and tackle present-day

problems with proven technologies.

Where media queries fall short, JavaScript shines


73/102

http://twitter.com/igorskee/status/52152273178079232

Smart JS hackers = Context-aware image sizing
http://twitter.com/igorskee/status/52152273178079232http://twitter.com/igorskee/status/52152273178079232http://twitter.com/igorskee/status/52152273178079232


74/102

http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing

Symphony + Jazz = Crazy ~ Like playing jazz flute
http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizinghttp://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizinghttp://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing


75/102

http://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy

Adapt.js - Serve 960s (or any) CSS dynamically
http://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundyhttp://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundyhttp://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy


76/102

http://adapt.960.gs

Note: Not an endorsement, just a Twitter link...
http://adapt.960.gs/http://adapt.960.gs/http://adapt.960.gs/


77/102

http://twitter.com/zeldman/status/59432011693166592

For what its worth, alotof people linked to it...
http://twitter.com/zeldman/status/59432011693166592http://twitter.com/zeldman/status/59432011693166592http://twitter.com/zeldman/status/59432011693166592


78/102

How to use Adapt.js = A human-readable config


79/102

// Edit to suit your needs.

var ADAPT_CONFIG = {

// Where is your CSS?

path: 'assets/css/',

// false = Only run once, when page first loads.

// true = Change on window resize and page tilt.

dynamic: true,

// Optional callback... myCallback(i, width)

callback: myCallback,

// First range entry is the minimum.

// Last range entry is the maximum.

// Separate ranges by "to" keyword.

range: [

'0px to 760px = mobile.css',

'760px to 980px = 720.css',

'980px to 1280px = 960.css','1280px to 1600px = 1200.css',

'1600px to 1920px = 1560.css',

'1920px = fluid.css'

]

};

How to use Adapt.js = A human-readable config


80/102

// Edit to suit your needs.

var ADAPT_CONFIG = {

// Where is your CSS?

path:'assets/css/',

// false = Only run once, when page first loads.

// true = Change on window resize and page tilt.

dynamic:true,

// Optional callback... myCallback(i, width)

callback:myCallback,

// First range entry is the minimum.

// Last range entry is the maximum.

// Separate ranges by "to" keyword.

range: [

'0px to 760px = mobile.css',

'760px to 980px = 720.css',

'980px to 1280px = 960.css', '1280px to 1600px = 1200.css',

'1600px to 1920px = 1560.css',

'1920px = fluid.css'

]

};

What about adding JavaScript page-weight?


81/102

845 bytesMinified, Adapt.js is less than 1 KB.

(Allow me to put into perspective)

60 40 pixel JPG @ 70% quality = 908 bytes


82/102

My son, figuring out that the wind can spin pinwheels

908 bytes

http://www.flickr.com/photos/nathansmith/5625332824

Or, as my dad used to tell me as a kid...
http://www.flickr.com/photos/nathansmith/5625332824http://www.flickr.com/photos/nathansmith/5625332824http://www.flickr.com/photos/nathansmith/5625332824http://www.flickr.com/photos/nathansmith/5625332824


83/102

Dont worry about problems

smaller than a gnats backside.

Note: If the extra HTTP request for JS is a

concern, the file size is small enough to just

include inline in the documents .

Not to go all Ron Burgundy on you, but...


84/102

Kind of a [small] deal

I didnt set out to write a

terse snippet of JavaScript.

Thats just how easy theproblem was to solve.

Seriously though, consider

what will be best for yourproject. Nothing is a magic

bullet. Code is just code.

http://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy

To reiterate: I dont care if you use 960.gs or Adapt.js
http://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundyhttp://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundyhttp://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy


85/102

In fact, heres a slew of alternativesyou might like better. You should

explore every option, and choose

one that makes sense to you.

Or, if nothing seems like a good fit,

Id encourage you to create one!

Sencha Touch


86/102

http://sencha.com/touch

Dojo Mobile
http://sencha.com/touchhttp://sencha.com/touchhttp://sencha.com/touch


87/102

http://dojotoolkit.org/features/mobile

jQuery Mobile
http://dojotoolkit.org/features/mobilehttp://dojotoolkit.org/features/mobilehttp://dojotoolkit.org/features/mobile


88/102

http://jquerymobile.com

http://jeromeetienne.github.com/jquery-mobile-960
http://jquerymobile.com/http://jquerymobile.com/http://jquerymobile.com/http://jeromeetienne.github.com/jquery-mobile-960/http://jeromeetienne.github.com/jquery-mobile-960/


89/102


90/102

HTML5 Boilerplate - Mobile


91/102

http://html5boilerplate.com/mobile

Less Framework 4
http://html5boilerplate.com/mobilehttp://html5boilerplate.com/mobilehttp://html5boilerplate.com/mobile


92/102

http://lessframework.com

1140 CSS Grid
http://lessframework.com/http://lessframework.com/http://lessframework.com/


93/102

http://cssgrid.net

The Square Grid
http://cssgrid.net/http://cssgrid.net/http://cssgrid.net/


94/102

http://thesquaregrid.com

Respond.js - Parses CSS3 @media queries
http://thesquaregrid.com/http://thesquaregrid.com/http://thesquaregrid.com/


95/102

https://github.com/scottjehl/Respond
https://github.com/scottjehl/Respondhttps://github.com/scottjehl/Respondhttps://github.com/scottjehl/Respond


96/102

And the list

goes on...But you get the point. There are plenty

of options out there to choose from.

(I just want to mention two more things)

Forms = Quite possibly, the worst part of web design


97/102

To prevent developers from

wasting countless hours on

styling dumb form elements

Note: I wasted countless hours styling dumb form elements, so you dont have to!

Its been awhile in the making...


98/102

Future plans include a tutorial on howto use jQuery to add styling hooks to

form elements, since I know from

experience that is no cup of tea.

Source = Me when announcing 960.gsin 2008!

Excuse = New HTML5 elements set me back :)

http://sonspring.com/journal/960-grid-system

I finally distilled my approach to forms
http://sonspring.com/journal/960-grid-systemhttp://sonspring.com/journal/960-grid-systemhttp://sonspring.com/journal/960-grid-systemhttp://960.gs/http://960.gs/http://sonspring.com/journal/960-grid-systemhttp://sonspring.com/journal/960-grid-system


99/102

http://formalize.me
http://formalize.me/http://formalize.me/http://formalize.me/


100/102

Our team at HP uses Sass to expedite writing CSS


101/102

http://sass-lang.org

I didnt think I would like Sass, but I do. Oh, and

if youre going to use Sass, use Sass, not SCSS.

Questions? Comments? Hate mail? :)
http://sass-lang.org/http://sass-lang.org/http://sass-lang.org/


102/102

Email http://sonspring.com/contact

Twitter http://twitter.com/nathansmith

Slides http://slideshare.net/nathansmith/refresh-okc
http://slideshare.net/nathansmith/refresh-okchttp://slideshare.net/nathansmith/refresh-okchttp://twitter.com/nathansmithhttp://twitter.com/nathansmithhttp://sonspring.com/contacthttp://sonspring.com/contact

refresh-okc-110419035057-phpapp02

Documents