960_grid
TRANSCRIPT
![Page 1: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/1.jpg)
Refresh Oklahoma City
http://refreshokc.org — http://960.gs
![Page 2: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/2.jpg)
Nathan Smith = UX designer @ projekt202
http://sonspring.com — http://projekt202.com
![Page 3: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/3.jpg)
Relax. Please don’t try to take notes feverishly.
Email — http://sonspring.com/contactTwitter — http://twitter.com/nathansmith
Slides — http://slideshare.net/nathansmith/refresh-okc
Feel free to email me later, and download theseslides as well. These links are at the end, too.
![Page 4: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/4.jpg)
An important discipline when using any framework is striving to understand the underlying language. In other words, use it as a tool – Not a black box.
Before we get started, let’s agree: Code is not magic
![Page 5: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/5.jpg)
Veteran “ninjas” master a variety of tools – Not just one.
Use a framework as an extensionof yourself – Not just as a crutch.
BY HAND
FRAMEWORK
http://imdb.com/title/tt1046173
![Page 6: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/6.jpg)
“Our craft is becoming a commodity and the people in charge don’t care about the quality of the markup, CSS or how short our JavaScript is. What matters is how fast you can get it to market, how many 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
![Page 7: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/7.jpg)
“Point being, choose your battles wisely. In the time you could argue the relevance of naming conventions like these – I just built a 16-column layout.”
Matthew Anderson — designer at OneHub.com
http://onehub.com/past/2009/5/13/why-we-chose-960gs-css-framework
![Page 8: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/8.jpg)
Truth be told, I don’t really care if you use 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...
![Page 9: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/9.jpg)
Semantics can reside in microformats’ class names,because parsers are built to look for them specifically
http://microformats.org
![Page 10: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/10.jpg)
The W3C’s “Semantic Web” doesn’t involve CSS
http://www.w3.org/DesignIssues/Semantic.html
![Page 11: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/11.jpg)
The term “Semantic Web” refers to W3C’s vision of the Web of linked data. Semantic Web technologies enable people to create data stores on the Web, build vocabularies, and write rules for handling data. Linked data are empowered by technologies such as RDF, SPARQL, OWL, and SKOS.
— World Wide Web Consortium (W3C)
CSS gets no ♥ at the Semantic Web party
http://www.w3.org/standards/semanticweb
![Page 12: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/12.jpg)
<tag class="peanut_butter jelly">Yummy content</tag>
Semantics live here
Not here
So let’s get this straight...
... Except in the case of microformats.
![Page 13: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/13.jpg)
Jeff Croft’s “Frameworks for Designers” article
http://www.alistapart.com/articles/frameworksfordesigners
![Page 14: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/14.jpg)
Jeff Croft was never one to mince words...
http://jeffcroft.com/blog/2007/nov/17/whats-not-love-about-css-frameworks
![Page 15: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/15.jpg)
Don’t 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 destroying mechanized looms – against the changes produced by the Industrial Revolution, which they felt were leaving them without work and changing their way of life.
![Page 16: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/16.jpg)
Added semantics via role="..." & HTML5 tags
<header role="banner"> <nav>...</nav></header><div role="main"> <article> <section>...</section> </article> <aside>...</aside></div><footer role="contentinfo"> ...</footer>
http://adactio.com/journal/4267 — http://dev.w3.org/html5/html4-differences/#new-elements
![Page 17: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/17.jpg)
Added semantics via role="..." & HTML5 tags
<header role="banner"> <nav>...</nav></header><div role="main"> <article> <section>...</section> </article> <aside>...</aside></div><footer role="contentinfo"> ...</footer>
http://adactio.com/journal/4267 — http://dev.w3.org/html5/html4-differences/#new-elements
![Page 18: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/18.jpg)
Um, okay, but why grids?
“My design skillz are so awesome,I’ve never needed to use grids.”
#anyways #whatevs #whocares #sobored
![Page 19: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/19.jpg)
For design that’s really, really, ridiculously good looking
http://en.wikipedia.org/wiki/Zoolander
Also, to do otherthings good too.
![Page 20: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/20.jpg)
The reason I create and use CSS frameworks is because I hate doing mundane tasks repeatedly (yawn).
I’d rather be working in JavaScript.
FYI: I don’t especially love CSS.
![Page 21: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/21.jpg)
Co-author
Tech editor Tech editor
jQueryEnlightenment.com
oreilly.com/catalog/9780596159788
JavaScriptEnlightenment.com
JavaScript books I’ve worked on...
All involving Cody Lindley, who has been a JavaScript mentor to me: http://codylindley.com
![Page 22: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/22.jpg)
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
![Page 23: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/23.jpg)
But I digress.I’ll forever be known as “the 960 guy.”But I guess that’s not so bad... Right?
#anyways #whatevs #whocares #sobored
![Page 24: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/24.jpg)
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.
What’s this whole 960.gs thing all about?
![Page 25: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/25.jpg)
960 SHIps WITH PrINtABlE *.PDf SKeTCH
SHeEts, BeCAUSe sOmEtIMeS THe BeSt
DEsIGn ToOl IS No ToOl At ALl!
WE OfTeN JUMp RIgHT INtO DEsIGn Or
CODe SoFtWARe, BUt SKeTCHInG THIngS
OUt CAN Be MUCH mOrE eFfICIEnT.
WHEn I WOrKED AS AN InFoRmATIoN
ARCHItECt, SoMe Of mY BeSt WOrK WAS
DOnE SImPlY USInG PeN AnD PApEr.
![Page 26: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/26.jpg)
The 960 Grid System is an effort to streamlineweb development by providing commonly useddimensions, 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, there’s also a 24-column version.
“Dogfooding” = When you use your own product
NOM, NOM, NOM — I use 960 regularly! :)
![Page 27: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/27.jpg)
The 12-column grid is divided into portions that are 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
![Page 28: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/28.jpg)
Show meteh codez!
#anyways #whatevs #whocares #sobored
![Page 29: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/29.jpg)
Typical use case for a 12-column grid
<div class="container_12"> <div class="grid_4"> I am 1/3 wide. </div> <div class="grid_4"> I am 1/3 wide. </div> <div class="grid_4"> Me too! </div> <div class="clear"></div> <!-- Yuck, I know --> <div class="grid_6"> I am 1/2 wide. </div> <div class="grid_6"> I am 1/2 wide. </div></div>
![Page 30: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/30.jpg)
Typical use case for a 12-column grid
<div class="container_12"> <div class="grid_4"> I am 1/3 wide. </div> <div class="grid_4"> I am 1/3 wide. </div> <div class="grid_4"> Me too! </div> <div class="clear"></div> <!-- Yuck, I know --> <div class="grid_6"> I am 1/2 wide. </div> <div class="grid_6"> I am 1/2 wide. </div></div>
![Page 31: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/31.jpg)
Nested grids & Column rearrangement
<div class="container_12"> <div class="grid_6 push_6"> <div class="grid_2 alpha"> First nested grid. </div> <div class="grid_2"> Middle. No special class. </div> <div class="grid_2 omega"> Last nested grid. </div> </div> <div class="grid_6 pull_6"> Last in markup, first visually. </div></div>
![Page 32: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/32.jpg)
Nested grids: alpha = first, omega = last (per row)
<div class="container_12"> <div class="grid_6 push_6"> <div class="grid_2 alpha"> First nested grid. </div> <div class="grid_2"> Middle. No special class. </div> <div class="grid_2 omega"> Last nested grid. </div> </div> <div class="grid_6 pull_6"> Last in markup, first visually. </div></div>
![Page 33: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/33.jpg)
Column rearrangement (SEO maybe)
<div class="container_12"> <div class="grid_6 push_6"> <div class="grid_2 alpha"> First nested grid. </div> <div class="grid_2"> Middle. No special class. </div> <div class="grid_2 omega"> Last nested grid. </div> </div> <div class="grid_6 pull_6"> Last in markup, first visually. </div></div>
![Page 36: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/36.jpg)
Have fixed-width grids become too pervasive?
http://twitter.com/jcroft/status/49880667374354433
![Page 37: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/37.jpg)
Have fixed-width grids become too pervasive?
http://twitter.com/nathansmith/status/49882179379015680
![Page 38: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/38.jpg)
http://grids.heroku.com
Many more possibilities via grid generators
![Page 39: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/39.jpg)
Templates available for your weapon of choice...
Acorn Fireworks Flash
InDesign GIMP Inkscape
Illustrator OmniGraffle Photoshop
QuarkXPress Visio Expression Design
![Page 40: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/40.jpg)
Adobe Fireworks 960.gs extension (Photoshop too)
![Page 41: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/41.jpg)
Grids can accelerate progress while maintaining order
http://www.flickr.com/photos/meckert75/3732780382
![Page 42: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/42.jpg)
Michael Phelps following a painted line at the bottomof a pool doesn’t make him a less talented swimmer.
http://livinggallery.oneindia.in/main.php?g2_itemId=32903
![Page 43: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/43.jpg)
![Page 44: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/44.jpg)
![Page 45: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/45.jpg)
![Page 46: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/46.jpg)
![Page 47: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/47.jpg)
![Page 48: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/48.jpg)
![Page 49: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/49.jpg)
“Our best practices are killing us” – Nicole Sullivan
http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us
Three best practice myths...
1. Don’t add any extra elements2. Don’t add classes3. Use descendent selectors exclusively
![Page 50: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/50.jpg)
“Our best practices are killing us” – Nicole Sullivan
http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us
Three best practice myths...
1. Don’t add any extra elements2. Don’t add classes3. Use descendent selectors exclusively
![Page 51: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/51.jpg)
Take all “rules” in development with a grain of salt
Sensibly revised...
1. Add extra elements sparingly2. Add classes thoughtfully3. Avoid descendent selector kludge...
![Page 52: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/52.jpg)
How would you style these <a> links?
<ul class="menu"> <li> <a href="/">Home</a> </li> <li> <a href="/about">About</a> </li></ul>
![Page 53: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/53.jpg)
Use only the selectors that are necessary.
.menu a { /* Terse = Get ‘er done! */}
ul.menu li a { /* Too heavy = Overkill. */}
![Page 54: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/54.jpg)
http://www.digital-web.com/articles/smart_CSS_aint_always_sexy_CSS
Still true: “Smart CSS ain’t always sexy CSS”
![Page 55: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/55.jpg)
Inspiration: Khoi Vinn
http://www.subtraction.com/2004/12/31/grid-computi
![Page 56: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/56.jpg)
http://www.cameronmoll.com/archives/2006/12/gridding_the_960
Inspiration: Cameron Moll
![Page 57: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/57.jpg)
http://www.cameronmoll.com/archives/2006/12/gridding_the_960
Inspiration: Cameron Moll
![Page 58: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/58.jpg)
Inspiration: Olav Bjørkøy
http://bjorkoy.com/2007/08/launch-blueprint-a-css-framework
![Page 59: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/59.jpg)
http://www.adaptivepath.com/ideas/e000863
Inspiration: Brandon Schauer
![Page 60: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/60.jpg)
http://www.adaptivepath.com/ideas/e000863
![Page 61: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/61.jpg)
http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1
Inspiration: Mark Boulton
![Page 62: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/62.jpg)
Frameworks are kind of like sheet music. They are organized, and can keep teams on the same page.
http://www.flickr.com/photos/avlxyz/3280803912
![Page 63: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/63.jpg)
Like jazz, responsive design is contextual.No two approaches are exactly the same.
![Page 64: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/64.jpg)
Responsive Web Design - using @media queries
http://www.alistapart.com/articles/responsive-web-design
![Page 65: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/65.jpg)
http://hicksdesign.co.uk
Hicksdesign.co.uk = Beautiful responsive web design
![Page 66: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/66.jpg)
http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold
Media queries for mobile aren’t a magic bullet
![Page 67: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/67.jpg)
LifeChurch.tv - Separate site for mobile & desktop
http://m.lifechurch.tv — http://www.lifechurch.tv
![Page 68: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/68.jpg)
Percentage-based grid, screenshot in Firefox 4.0
310px
150px
http://host.sonspring.com/yui3_grid
![Page 69: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/69.jpg)
309px
149px
Percentage-based grid, screenshot in Chrome 10.0http://host.sonspring.com/yui3_grid
![Page 70: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/70.jpg)
http://960.gs/demo_24_col.html
960’s 24 column grid = Exact multiples of 10
![Page 71: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/71.jpg)
Whither: Grid framework or Responsive design?
Doing a fixed-width design using a grid framework is relatively easy. Whereas, doing a responsive design that looks solid at every resolution is multivariate and there is not (yet) an automated, foolproof solution.
VS
![Page 72: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/72.jpg)
Pet peeve: “Use tomorrow’s technology, today!”
The mere fact we’re even able to use it today makes it today’s technology.
As designers and developers, it’s easy to get 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.
![Page 73: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/73.jpg)
http://twitter.com/igorskee/status/52152273178079232
Where media queries fall short, JavaScript shines
![Page 74: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/74.jpg)
Smart JS hackers = Context-aware image sizing
http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing
![Page 75: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/75.jpg)
Symphony + Jazz = Crazy ~ Like playing jazz flute
http://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy
![Page 76: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/76.jpg)
Adapt.js - Serve 960’s (or any) CSS dynamically
http://adapt.960.gs
![Page 77: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/77.jpg)
Note: Not an endorsement, just a Twitter link...
http://twitter.com/zeldman/status/59432011693166592
![Page 78: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/78.jpg)
For what it’s worth, a lot of people linked to it...
![Page 79: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/79.jpg)
How to use Adapt.js = A human-readable config<script>// 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' ]};</script>
![Page 80: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/80.jpg)
How to use Adapt.js = A human-readable config<script>// 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' ]};</script>
![Page 81: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/81.jpg)
845 bytesMinified, Adapt.js is less than 1 KB.(Allow me to put into perspective)
What about adding JavaScript page-weight?
![Page 82: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/82.jpg)
60 × 40 pixel JPG @ 70% quality = 908 bytes
My son, figuring out that the wind can spin pinwheels
908 bytes
http://www.flickr.com/photos/nathansmith/5625332824
![Page 83: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/83.jpg)
Or, as my dad used to tell me as a kid...
“Don’t worry about problemssmaller than a gnat’s backside.”
Note: If the extra HTTP request for JS is a concern, the file size is small enough to just include inline in the document’s <head>.
![Page 84: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/84.jpg)
Not to go all “Ron Burgundy” on you, but...
“Kind of a [small] deal”
I didn’t set out to write a terse snippet of JavaScript.
That’s just how easy the problem was to solve.
Seriously though, consider what will be best for your project. Nothing is a magic bullet. Code is just code.
http://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy
![Page 85: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/85.jpg)
In fact, here’s a slew of alternatives you might like better. You should explore every option, and choose one that makes sense to you.
Or, if nothing seems like a good fit, I’d encourage you to create one!
To reiterate: I don’t care if you use 960.gs or Adapt.js
![Page 87: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/87.jpg)
http://dojotoolkit.org/features/mobile
Dojo Mobile
![Page 89: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/89.jpg)
http://jeromeetienne.github.com/jquery-mobile-960
![Page 91: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/91.jpg)
HTML5 Boilerplate - Mobile
http://html5boilerplate.com/mobile
![Page 95: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/95.jpg)
Respond.js - Parses CSS3 @media queries
https://github.com/scottjehl/Respond
![Page 96: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/96.jpg)
And the listgoes on...
But you get the point. There are plentyof options out there to choose from.
(I just want to mention two more things)
![Page 97: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/97.jpg)
To prevent developers fromwasting countless hours onstyling dumb form elements
Note: I wasted countless hours styling dumb form elements, so you don’t have to!
Forms = Quite possibly, the worst part of web design
![Page 98: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/98.jpg)
“Future plans include a tutorial on how to 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.gs in 2008!
— Excuse = New HTML5 elements set me back :)
It’s been awhile in the making...
http://sonspring.com/journal/960-grid-system
![Page 99: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/99.jpg)
http://formalize.me
I finally distilled my approach to forms
![Page 100: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/100.jpg)
![Page 101: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/101.jpg)
http://sass-lang.com
I prefer using Sass to expedite writing CSS
I didn’t think I would like Sass, but I do. Oh, andif you’re going to use Sass, use Sass, not SCSS.
![Page 102: 960_grid](https://reader034.vdocuments.us/reader034/viewer/2022051109/547f7799b4af9f91108b461a/html5/thumbnails/102.jpg)
Questions? Comments? Hate mail? :)
Email — http://sonspring.com/contactTwitter — http://twitter.com/nathansmith
Slides — http://slideshare.net/nathansmith/refresh-okc
Thanks for attending my presentation!Feel free to email or say “hi” on Twitter.