Download as PDF, PPTX
![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>](https://image.slidesharecdn.com/refresh-okc-110419035057-phpapp02/85/Refresh-OKC-78-320.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>](https://image.slidesharecdn.com/refresh-okc-110419035057-phpapp02/85/Refresh-OKC-79-320.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](https://image.slidesharecdn.com/refresh-okc-110419035057-phpapp02/85/Refresh-OKC-83-320.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>](https://image.slidesharecdn.com/refresh-okc-110419035057-phpapp02/75/Refresh-OKC-78-2048.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>](https://image.slidesharecdn.com/refresh-okc-110419035057-phpapp02/75/Refresh-OKC-79-2048.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](https://image.slidesharecdn.com/refresh-okc-110419035057-phpapp02/75/Refresh-OKC-83-2048.jpg)
Uploaded byNathan Smith
Refresh OKC
This document discusses the 960 Grid System, a CSS framework that utilizes a 12-column grid layout with widths of 60px each and gutters of 20px. It can be used for rapid prototyping and integrated into production environments. The document provides code examples of typical grid layouts and nested grids. It also discusses related topics like fixed-width grids, grid generators, and myths around CSS best practices.
More Related Content
Refresh OKC
- 1. Refresh Oklahoma City http://refreshokc.org— http://960.gs
- 2. Relax. Please don’ttry to take notes feverishly. Email — http://sonspring.com/contact Twitter — http://twitter.com/nathansmith Slides — http://slideshare.net/nathansmith/refresh-okc Feel free to email me later, and download these slides as well. These links are at the end, too.
- 3. An important disciplinewhen 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
- 4. Veteran “ninjas” mastera variety of tools – Not just one. Useaframeworkasanextension ofyourself–Notjustasacrutch. BYHAND FRAMEWORK http://imdb.com/title/tt1046173
- 5. “Our craft isbecoming 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
- 6. “Point being, choose yourbattles 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
- 7. 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...
- 8. Semantics can residein microformats’ class names, because parsers are built to look for them specifically http://microformats.org
- 9. The W3C’s “SemanticWeb” doesn’t involve CSS http://www.w3.org/DesignIssues/Semantic.html
- 10. The term “SemanticWeb” 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
- 11. <tag class="peanut_butter jelly">Yummycontent</tag> Semantics live here Not here So let’s get this straight... ... Except in the case of microformats.
- 12. Jeff Croft’s “Frameworksfor Designers” article http://www.alistapart.com/articles/frameworksfordesigners
- 13. Jeff Croft wasnever one to mince words... http://jeffcroft.com/blog/2007/nov/17/whats-not-love-about-css-frameworks
- 14. Don’t be aLuddite (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.
- 15. Added semantics viarole="..." & 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
- 16. Added semantics viarole="..." & 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
- 17. Um, okay, but whygrids? “My design skillz are so awesome, I’ve never needed to use grids.” #anyways #whatevs #whocares #sobored
- 18. For design that’sreally, really, ridiculously good looking http://en.wikipedia.org/wiki/Zoolander Also, to do other things good too.
- 19. The reason Icreate 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.
- 20. Co-author Tech editor Techeditor 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
- 21. 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
- 22. But I digress. I’llforever be known as “the 960 guy.” But I guess that’s not so bad... Right? #anyways #whatevs #whocares #sobored
- 23. The premise ofthe 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?
- 24. 960 SHIps WITHPrINtABlE *.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.
- 25. The 960 GridSystem 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, there’s also a 24-column version. “Dogfooding” = When you use your own product NOM, NOM, NOM — I use 960 regularly! :)
- 26. The 12-column gridis 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
- 27. Show me teh codez! #anyways#whatevs #whocares #sobored
- 28. Typical use casefor 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>
- 29. Typical use casefor 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>
- 30. 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>
- 31. 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>
- 32. Column rearrangement (SEOmaybe) <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>
- 33.
- 34.
- 35. Have fixed-width gridsbecome too pervasive? http://twitter.com/jcroft/status/49880667374354433
- 36. Have fixed-width gridsbecome too pervasive? http://twitter.com/nathansmith/status/49882179379015680
- 37. http://grids.heroku.com Many more possibilitiesvia grid generators
- 38. Templates available foryour weapon of choice... Acorn Fireworks Flash InDesign GIMP Inkscape Illustrator OmniGraffle Photoshop QuarkXPress Visio Expression Design
- 39. Adobe Fireworks 960.gsextension (Photoshop too)
- 40. Grids can accelerateprogress while maintaining order http://www.flickr.com/photos/meckert75/3732780382
- 41. Michael Phelps followinga painted line at the bottom of a pool doesn’t make him a less talented swimmer. http://livinggallery.oneindia.in/main.php?g2_itemId=32903
- 48. “Our best practicesare 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 elements 2. Don’t add classes 3. Use descendent selectors exclusively
- 49. “Our best practicesare 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 elements 2. Don’t add classes 3. Use descendent selectors exclusively
- 50. Take all “rules”in development with a grain of salt Sensibly revised... 1. Add extra elements sparingly 2. Add classes thoughtfully 3. Avoid descendent selector kludge...
- 51. How would youstyle these <a> links? <ul class="menu"> <li> <a href="/">Home</a> </li> <li> <a href="/about">About</a> </li> </ul>
- 52. Use only theselectors that are necessary. .menu a { /* Terse = Get ‘er done! */ } ul.menu li a { /* Too heavy = Overkill. */ }
- 53. http://www.digital-web.com/articles/smart_CSS_aint_always_sexy_CSS Still true: “SmartCSS ain’t always sexy CSS”
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61. Frameworks are kindof like sheet music. They are organized, and can keep teams on the same page. http://www.flickr.com/photos/avlxyz/3280803912
- 62. Like jazz, responsivedesign is contextual. No two approaches are exactly the same.
- 63. Responsive Web Design- using @media queries http://www.alistapart.com/articles/responsive-web-design
- 64. http://hicksdesign.co.uk Hicksdesign.co.uk = Beautifulresponsive web design
- 65. http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold Media queries formobile aren’t a magic bullet
- 66. LifeChurch.tv - Separatesite for mobile & desktop http://m.lifechurch.tv — http://www.lifechurch.tv
- 67. Percentage-based grid, screenshotin Firefox 4.0 310px 150px http://host.sonspring.com/yui3_grid
- 68. 309px 149px Percentage-based grid, screenshotin Chrome 10.0 http://host.sonspring.com/yui3_grid
- 69. http://960.gs/demo_24_col.html 960’s 24 columngrid = Exact multiples of 10
- 70. Whither: Grid frameworkor 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
- 71. Pet peeve: “Usetomorrow’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.
- 72. http://twitter.com/igorskee/status/52152273178079232 Where media queriesfall short, JavaScript shines
- 73. Smart JS hackers= Context-aware image sizing http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing
- 74. Symphony + Jazz= Crazy ~ Like playing jazz flute http://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy
- 75. Adapt.js - Serve960’s (or any) CSS dynamically http://adapt.960.gs
- 76. Note: Not anendorsement, just a Twitter link... http://twitter.com/zeldman/status/59432011693166592
- 77. For what it’sworth, a lot of people linked to it...
- 78. How to useAdapt.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>
- 79. How to useAdapt.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>
- 80. 845 bytes Minified, Adapt.jsis less than 1 KB. (Allow me to put into perspective) What about adding JavaScript page-weight?
- 81. 60 × 40pixel JPG @ 70% quality = 908 bytes My son, figuring out that the wind can spin pinwheels 908 bytes http://www.flickr.com/photos/nathansmith/5625332824
- 82. Or, as mydad used to tell me as a kid... “Don’t worry about problems smaller 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>.
- 83. Not to goall “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
- 84. In fact, here’sa 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
- 85.
- 86.
- 87.
- 88.
- 89.
- 90. HTML5 Boilerplate -Mobile http://html5boilerplate.com/mobile
- 91.
- 92.
- 93.
- 94. Respond.js - ParsesCSS3 @media queries https://github.com/scottjehl/Respond
- 95. And the list goeson... But you get the point. There are plenty of options out there to choose from. (I just want to mention two more things)
- 96. To prevent developersfrom wasting countless hours on styling 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
- 97. “Future plans includea 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
- 98. http://formalize.me I finally distilledmy approach to forms
- 100. http://sass-lang.com I prefer usingSass to expedite writing CSS I didn’t think I would like Sass, but I do. Oh, and if you’re going to use Sass, use Sass, not SCSS.
- 101. Questions? Comments? Hatemail? :) Email — http://sonspring.com/contact Twitter — 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.