SlideShare a Scribd company logo
1 of 101
Download to read offline
Refresh Oklahoma City
http://refreshokc.org — http://960.gs
Relax. Please don’t try 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.
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
Veteran “ninjas” master a variety of tools – Not just one.
Useaframeworkasanextension
ofyourself–Notjustasacrutch.
BYHAND
FRAMEWORK
http://imdb.com/title/tt1046173
“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
“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
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...
Semantics can reside in microformats’ class names,
because parsers are built to look for them specifically
http://microformats.org
The W3C’s “Semantic Web” doesn’t involve CSS
http://www.w3.org/DesignIssues/Semantic.html
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
<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.
Jeff Croft’s “Frameworks for Designers” article
http://www.alistapart.com/articles/frameworksfordesigners
Jeff Croft was never one to mince words...
http://jeffcroft.com/blog/2007/nov/17/whats-not-love-about-css-frameworks
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.
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
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
Um, okay, but
why grids?
“My design skillz are so awesome,
I’ve never needed to use grids.”
#anyways #whatevs #whocares #sobored
For design that’s really, really, ridiculously good looking
http://en.wikipedia.org/wiki/Zoolander
Also, to do other
things good too.
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.
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
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
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
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?
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.
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, there’s also a 24-column version.
“Dogfooding” = When you use your own product
NOM, NOM, NOM — I use 960 regularly! :)
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
Show me
teh codez!
#anyways #whatevs #whocares #sobored
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>
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>
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>
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>
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>
http://960.gs/demo.html
http://960.gs/demo.html
Have fixed-width grids become too pervasive?
http://twitter.com/jcroft/status/49880667374354433
Have fixed-width grids become too pervasive?
http://twitter.com/nathansmith/status/49882179379015680
http://grids.heroku.com
Many more possibilities via grid generators
Templates available for your weapon of choice...
Acorn Fireworks Flash
InDesign GIMP Inkscape
Illustrator OmniGraffle Photoshop
QuarkXPress Visio
Expression
Design
Adobe Fireworks 960.gs extension (Photoshop too)
Grids can accelerate progress while maintaining order
http://www.flickr.com/photos/meckert75/3732780382
Michael Phelps following a 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
Refresh OKC
Refresh OKC
Refresh OKC
Refresh OKC
Refresh OKC
Refresh OKC
“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 elements
2. Don’t add classes
3. Use descendent selectors exclusively
“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 elements
2. Don’t add classes
3. Use descendent selectors exclusively
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...
How would you style these <a> links?
<ul class="menu">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/about">About</a>
</li>
</ul>
Use only the selectors that are necessary.
.menu a {
/* Terse = Get ‘er done! */
}
ul.menu li a {
/* Too heavy = Overkill. */
}
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.subtraction.com/2004/12/31/grid-computi
http://www.cameronmoll.com/archives/2006/12/gridding_the_960
Inspiration: Cameron Moll
http://www.cameronmoll.com/archives/2006/12/gridding_the_960
Inspiration: Cameron Moll
Inspiration: Olav Bjørkøy
http://bjorkoy.com/2007/08/launch-blueprint-a-css-framework
http://www.adaptivepath.com/ideas/e000863
Inspiration: Brandon Schauer
http://www.adaptivepath.com/ideas/e000863
http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-1
Inspiration: Mark Boulton
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
Like jazz, responsive design is contextual.
No two approaches are exactly the same.
Responsive Web Design - using @media queries
http://www.alistapart.com/articles/responsive-web-design
http://hicksdesign.co.uk
Hicksdesign.co.uk = Beautiful responsive web design
http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold
Media queries for mobile aren’t a magic bullet
LifeChurch.tv - Separate site for mobile & desktop
http://m.lifechurch.tv — http://www.lifechurch.tv
Percentage-based grid, screenshot in Firefox 4.0
310px
150px
http://host.sonspring.com/yui3_grid
309px
149px
Percentage-based grid, screenshot in Chrome 10.0
http://host.sonspring.com/yui3_grid
http://960.gs/demo_24_col.html
960’s 24 column grid = Exact multiples of 10
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
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.
http://twitter.com/igorskee/status/52152273178079232
Where media queries fall short, JavaScript shines
Smart JS hackers = Context-aware image sizing
http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing
Symphony + Jazz = Crazy ~ Like playing jazz flute
http://en.wikipedia.org/wiki/Anchorman:_The_Legend_of_Ron_Burgundy
Adapt.js - Serve 960’s (or any) CSS dynamically
http://adapt.960.gs
Note: Not an endorsement, just a Twitter link...
http://twitter.com/zeldman/status/59432011693166592
For what it’s worth, a lot of people linked to it...
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>
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>
845 bytes
Minified, Adapt.js is less than 1 KB.
(Allow me to put into perspective)
What about adding JavaScript page-weight?
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
Or, as my dad 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>.
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
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
Sencha Touch
http://sencha.com/touch
http://dojotoolkit.org/features/mobile
Dojo Mobile
jQuery Mobile
http://jquerymobile.com
http://jeromeetienne.github.com/jquery-mobile-960
Blueprint CSS Framework
http://blueprintcss.org
HTML5 Boilerplate - Mobile
http://html5boilerplate.com/mobile
Less Framework 4
http://lessframework.com
http://cssgrid.net
1140 CSS Grid
The Square Grid
http://thesquaregrid.com
Respond.js - Parses CSS3 @media queries
https://github.com/scottjehl/Respond
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)
To prevent developers from
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
“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
http://formalize.me
I finally distilled my approach to forms
Refresh OKC
http://sass-lang.com
I prefer using Sass 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.
Questions? Comments? Hate mail? :)
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.

More Related Content

Viewers also liked

Презентация по курсу «Проектирования в Axure»
Презентация по курсу  «Проектирования в Axure» Презентация по курсу  «Проектирования в Axure»
Презентация по курсу «Проектирования в Axure» Ekaterina Mironova
 
An Introduction to CSS Frameworks
An Introduction to CSS FrameworksAn Introduction to CSS Frameworks
An Introduction to CSS FrameworksAdrian Westlake
 
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. FoundationBattle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. FoundationRachel Cherry
 
徳丸本に学ぶ 安全なPHPアプリ開発の鉄則2011
徳丸本に学ぶ 安全なPHPアプリ開発の鉄則2011徳丸本に学ぶ 安全なPHPアプリ開発の鉄則2011
徳丸本に学ぶ 安全なPHPアプリ開発の鉄則2011Hiroshi Tokumaru
 
Data Visualization: Cognitive Psychology and Design Principles
Data Visualization:  Cognitive Psychology and Design PrinciplesData Visualization:  Cognitive Psychology and Design Principles
Data Visualization: Cognitive Psychology and Design PrinciplesDan Sweet
 
Foundation: Prototype to Production
Foundation: Prototype to ProductionFoundation: Prototype to Production
Foundation: Prototype to ProductionZURB
 
Keynote Kung-Fu: Black Belt
Keynote Kung-Fu: Black BeltKeynote Kung-Fu: Black Belt
Keynote Kung-Fu: Black BeltTravis Isaacs
 
How to create a multimedia presentation
How to create a multimedia presentationHow to create a multimedia presentation
How to create a multimedia presentationgsetser
 
5. Social 2.0 Web 3.0 Retake Control Of Your Own Cloud Edmon Chung
5. Social 2.0   Web 3.0 Retake Control Of Your Own Cloud   Edmon Chung5. Social 2.0   Web 3.0 Retake Control Of Your Own Cloud   Edmon Chung
5. Social 2.0 Web 3.0 Retake Control Of Your Own Cloud Edmon ChungHKAIM
 
VietRees_Newsletter_28_Week4_Month04_Year08
VietRees_Newsletter_28_Week4_Month04_Year08VietRees_Newsletter_28_Week4_Month04_Year08
VietRees_Newsletter_28_Week4_Month04_Year08internationalvr
 
Pixer.us
Pixer.usPixer.us
Pixer.usdboling
 
Finding, Posting And Prepending A Oppossing Viewpoints Article
Finding, Posting And Prepending A Oppossing Viewpoints ArticleFinding, Posting And Prepending A Oppossing Viewpoints Article
Finding, Posting And Prepending A Oppossing Viewpoints ArticleSteve Kashdan
 
Practice Powerpoint
Practice PowerpointPractice Powerpoint
Practice Powerpointktobin
 

Viewers also liked (20)

Презентация по курсу «Проектирования в Axure»
Презентация по курсу  «Проектирования в Axure» Презентация по курсу  «Проектирования в Axure»
Презентация по курсу «Проектирования в Axure»
 
An Introduction to CSS Frameworks
An Introduction to CSS FrameworksAn Introduction to CSS Frameworks
An Introduction to CSS Frameworks
 
Moodle En Gnomio
Moodle En GnomioMoodle En Gnomio
Moodle En Gnomio
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS Frameworks
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS Frameworks
 
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. FoundationBattle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
 
徳丸本に学ぶ 安全なPHPアプリ開発の鉄則2011
徳丸本に学ぶ 安全なPHPアプリ開発の鉄則2011徳丸本に学ぶ 安全なPHPアプリ開発の鉄則2011
徳丸本に学ぶ 安全なPHPアプリ開発の鉄則2011
 
Data Visualization: Cognitive Psychology and Design Principles
Data Visualization:  Cognitive Psychology and Design PrinciplesData Visualization:  Cognitive Psychology and Design Principles
Data Visualization: Cognitive Psychology and Design Principles
 
Foundation: Prototype to Production
Foundation: Prototype to ProductionFoundation: Prototype to Production
Foundation: Prototype to Production
 
Keynote Kung-Fu: Black Belt
Keynote Kung-Fu: Black BeltKeynote Kung-Fu: Black Belt
Keynote Kung-Fu: Black Belt
 
How to create a multimedia presentation
How to create a multimedia presentationHow to create a multimedia presentation
How to create a multimedia presentation
 
5. Social 2.0 Web 3.0 Retake Control Of Your Own Cloud Edmon Chung
5. Social 2.0   Web 3.0 Retake Control Of Your Own Cloud   Edmon Chung5. Social 2.0   Web 3.0 Retake Control Of Your Own Cloud   Edmon Chung
5. Social 2.0 Web 3.0 Retake Control Of Your Own Cloud Edmon Chung
 
Austmine
AustmineAustmine
Austmine
 
Engrade
EngradeEngrade
Engrade
 
VietRees_Newsletter_28_Week4_Month04_Year08
VietRees_Newsletter_28_Week4_Month04_Year08VietRees_Newsletter_28_Week4_Month04_Year08
VietRees_Newsletter_28_Week4_Month04_Year08
 
Pixer.us
Pixer.usPixer.us
Pixer.us
 
Finding, Posting And Prepending A Oppossing Viewpoints Article
Finding, Posting And Prepending A Oppossing Viewpoints ArticleFinding, Posting And Prepending A Oppossing Viewpoints Article
Finding, Posting And Prepending A Oppossing Viewpoints Article
 
Final Project
Final ProjectFinal Project
Final Project
 
Practice Powerpoint
Practice PowerpointPractice Powerpoint
Practice Powerpoint
 
Berufswahlpass
BerufswahlpassBerufswahlpass
Berufswahlpass
 

Similar to Refresh OKC

The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}Eric Carlisle
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern librariesRuss Weakley
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreRuss Weakley
 
CSS framework By Palash
CSS framework By PalashCSS framework By Palash
CSS framework By PalashPalashBajpai
 
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSSObject-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSSLi-Wei Lu
 
Web I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksWeb I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksRandy Connolly
 
Bootstrap 3 training
Bootstrap 3 trainingBootstrap 3 training
Bootstrap 3 trainingVison Sunon
 
JavaScript For People Who Don't Code
JavaScript For People Who Don't CodeJavaScript For People Who Don't Code
JavaScript For People Who Don't CodeChristopher Schmitt
 
MW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationMW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationCharlie Moad
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?Nicole Sullivan
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlChristian Heilmann
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucksTim Wright
 
One Div To Save Them All: Controlling Drupal Div's and Implementing a Modular...
One Div To Save Them All: Controlling Drupal Div's and Implementing a Modular...One Div To Save Them All: Controlling Drupal Div's and Implementing a Modular...
One Div To Save Them All: Controlling Drupal Div's and Implementing a Modular...thejibe
 

Similar to Refresh OKC (20)

The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern libraries
 
Juggling
JugglingJuggling
Juggling
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
 
Class15
Class15Class15
Class15
 
Remix
RemixRemix
Remix
 
CSS framework By Palash
CSS framework By PalashCSS framework By Palash
CSS framework By Palash
 
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSSObject-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS
 
Web I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksWeb I - 07 - CSS Frameworks
Web I - 07 - CSS Frameworks
 
Bootstrap 3 training
Bootstrap 3 trainingBootstrap 3 training
Bootstrap 3 training
 
JavaScript For People Who Don't Code
JavaScript For People Who Don't CodeJavaScript For People Who Don't Code
JavaScript For People Who Don't Code
 
MW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentationMW2011 Grid-based Web Design presentation
MW2011 Grid-based Web Design presentation
 
Old Dog, New Tricks
Old Dog, New TricksOld Dog, New Tricks
Old Dog, New Tricks
 
What is Object Oriented CSS?
What is Object Oriented CSS?What is Object Oriented CSS?
What is Object Oriented CSS?
 
Knowing it all
Knowing it allKnowing it all
Knowing it all
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
Death of a Themer
Death of a ThemerDeath of a Themer
Death of a Themer
 
SMACSS Workshop
SMACSS WorkshopSMACSS Workshop
SMACSS Workshop
 
One Div To Save Them All: Controlling Drupal Div's and Implementing a Modular...
One Div To Save Them All: Controlling Drupal Div's and Implementing a Modular...One Div To Save Them All: Controlling Drupal Div's and Implementing a Modular...
One Div To Save Them All: Controlling Drupal Div's and Implementing a Modular...
 

More from Nathan Smith

Getting Started with React
Getting Started with ReactGetting Started with React
Getting Started with ReactNathan Smith
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do ThatNathan Smith
 
Rapid Templating with Serve
Rapid Templating with ServeRapid Templating with Serve
Rapid Templating with ServeNathan Smith
 
Proactive Responsive Design
Proactive Responsive DesignProactive Responsive Design
Proactive Responsive DesignNathan Smith
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsNathan Smith
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksNathan Smith
 
Accelerated Grid Theming
Accelerated Grid ThemingAccelerated Grid Theming
Accelerated Grid ThemingNathan Smith
 
Urban Leadership Slides
Urban Leadership SlidesUrban Leadership Slides
Urban Leadership SlidesNathan Smith
 
Themes from Ascent of a Leader
Themes from Ascent of a LeaderThemes from Ascent of a Leader
Themes from Ascent of a LeaderNathan Smith
 
Marketing 450 Guest Lecture
Marketing 450 Guest LectureMarketing 450 Guest Lecture
Marketing 450 Guest LectureNathan Smith
 
Fundamental Design Principles
Fundamental Design PrinciplesFundamental Design Principles
Fundamental Design PrinciplesNathan Smith
 
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End DevelopmentStriking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End DevelopmentNathan Smith
 
Echo Conference 2008
Echo Conference 2008Echo Conference 2008
Echo Conference 2008Nathan Smith
 

More from Nathan Smith (20)

Getting Started with React
Getting Started with ReactGetting Started with React
Getting Started with React
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do That
 
Rapid Templating with Serve
Rapid Templating with ServeRapid Templating with Serve
Rapid Templating with Serve
 
Proactive Responsive Design
Proactive Responsive DesignProactive Responsive Design
Proactive Responsive Design
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile Apps
 
Red Dirt JS
Red Dirt JSRed Dirt JS
Red Dirt JS
 
DrupalCon jQuery
DrupalCon jQueryDrupalCon jQuery
DrupalCon jQuery
 
DSVC Design Talk
DSVC Design TalkDSVC Design Talk
DSVC Design Talk
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
 
Meet Clumsy
Meet ClumsyMeet Clumsy
Meet Clumsy
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Accelerated Grid Theming
Accelerated Grid ThemingAccelerated Grid Theming
Accelerated Grid Theming
 
Urban Leadership Slides
Urban Leadership SlidesUrban Leadership Slides
Urban Leadership Slides
 
Themes from Ascent of a Leader
Themes from Ascent of a LeaderThemes from Ascent of a Leader
Themes from Ascent of a Leader
 
7 Storey Mountain
7 Storey Mountain7 Storey Mountain
7 Storey Mountain
 
Marketing 450 Guest Lecture
Marketing 450 Guest LectureMarketing 450 Guest Lecture
Marketing 450 Guest Lecture
 
Fundamental Design Principles
Fundamental Design PrinciplesFundamental Design Principles
Fundamental Design Principles
 
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End DevelopmentStriking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End Development
 
Echo Conference 2008
Echo Conference 2008Echo Conference 2008
Echo Conference 2008
 
Bible Tech 2008
Bible Tech 2008Bible Tech 2008
Bible Tech 2008
 

Recently uploaded

Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 

Recently uploaded (20)

Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 

Refresh OKC

  • 2. Relax. Please don’t try 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 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
  • 4. Veteran “ninjas” master a variety of tools – Not just one. Useaframeworkasanextension ofyourself–Notjustasacrutch. BYHAND FRAMEWORK http://imdb.com/title/tt1046173
  • 5. “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
  • 6. “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
  • 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 reside in microformats’ class names, because parsers are built to look for them specifically http://microformats.org
  • 9. The W3C’s “Semantic Web” doesn’t involve CSS http://www.w3.org/DesignIssues/Semantic.html
  • 10. 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
  • 11. <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.
  • 12. Jeff Croft’s “Frameworks for Designers” article http://www.alistapart.com/articles/frameworksfordesigners
  • 13. Jeff Croft was never one to mince words... http://jeffcroft.com/blog/2007/nov/17/whats-not-love-about-css-frameworks
  • 14. 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.
  • 15. 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
  • 16. 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
  • 17. Um, okay, but why grids? “My design skillz are so awesome, I’ve never needed to use grids.” #anyways #whatevs #whocares #sobored
  • 18. For design that’s really, really, ridiculously good looking http://en.wikipedia.org/wiki/Zoolander Also, to do other things good too.
  • 19. 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.
  • 20. 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
  • 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’ll forever be known as “the 960 guy.” But I guess that’s not so bad... Right? #anyways #whatevs #whocares #sobored
  • 23. 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?
  • 24. 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.
  • 25. 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, 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 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
  • 27. Show me teh codez! #anyways #whatevs #whocares #sobored
  • 28. 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>
  • 29. 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>
  • 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 (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>
  • 35. Have fixed-width grids become too pervasive? http://twitter.com/jcroft/status/49880667374354433
  • 36. Have fixed-width grids become too pervasive? http://twitter.com/nathansmith/status/49882179379015680
  • 38. Templates available for your weapon of choice... Acorn Fireworks Flash InDesign GIMP Inkscape Illustrator OmniGraffle Photoshop QuarkXPress Visio Expression Design
  • 39. Adobe Fireworks 960.gs extension (Photoshop too)
  • 40. Grids can accelerate progress while maintaining order http://www.flickr.com/photos/meckert75/3732780382
  • 41. Michael Phelps following a 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 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 elements 2. Don’t add classes 3. Use descendent selectors exclusively
  • 49. “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 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 you style these <a> links? <ul class="menu"> <li> <a href="/">Home</a> </li> <li> <a href="/about">About</a> </li> </ul>
  • 52. Use only the selectors that are necessary. .menu a { /* Terse = Get ‘er done! */ } ul.menu li a { /* Too heavy = Overkill. */ }
  • 61. 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
  • 62. Like jazz, responsive design is contextual. No two approaches are exactly the same.
  • 63. Responsive Web Design - using @media queries http://www.alistapart.com/articles/responsive-web-design
  • 66. LifeChurch.tv - Separate site for mobile & desktop http://m.lifechurch.tv — http://www.lifechurch.tv
  • 67. Percentage-based grid, screenshot in Firefox 4.0 310px 150px http://host.sonspring.com/yui3_grid
  • 68. 309px 149px Percentage-based grid, screenshot in Chrome 10.0 http://host.sonspring.com/yui3_grid
  • 69. http://960.gs/demo_24_col.html 960’s 24 column grid = Exact multiples of 10
  • 70. 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
  • 71. 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.
  • 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 - Serve 960’s (or any) CSS dynamically http://adapt.960.gs
  • 76. Note: Not an endorsement, just a Twitter link... http://twitter.com/zeldman/status/59432011693166592
  • 77. For what it’s worth, a lot of people linked to it...
  • 78. 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>
  • 79. 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>
  • 80. 845 bytes Minified, Adapt.js is less than 1 KB. (Allow me to put into perspective) What about adding JavaScript page-weight?
  • 81. 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
  • 82. Or, as my dad 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 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
  • 84. 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
  • 90. HTML5 Boilerplate - Mobile http://html5boilerplate.com/mobile
  • 94. Respond.js - Parses CSS3 @media queries https://github.com/scottjehl/Respond
  • 95. 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)
  • 96. To prevent developers from 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 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
  • 100. http://sass-lang.com I prefer using Sass 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? Hate mail? :) 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.