Refresh OKC

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 speciﬁcally
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

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?

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 ﬁles 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!

Typical use case for a 12-column grid
<div class="container_12">
<div class="grid_4">
I am 1/3 wide.
</div>
I am 1/3 wide.
</div>
Me too!
</div>
<div class="clear"></div> 
I am 1/2 wide.
</div>
I am 1/2 wide.
</div>
</div>

Nested grids & Column rearrangement
<div class="grid_6 push_6">
<div class="grid_2 alpha">
First nested grid.
</div>
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 = ﬁrst, omega = last (per row)
First nested grid.
</div>
</div>
Last nested grid.
</div>
</div>
</div>
</div>

Column rearrangement (SEO maybe)
First nested grid.
</div>
</div>
Last nested grid.
</div>
</div>
</div>
</div>

http://960.gs/demo.html

Have ﬁxed-width grids become too pervasive?
http://twitter.com/jcroft/status/49880667374354433

Have ﬁxed-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 OmniGrafﬂe Photoshop
QuarkXPress Visio
Expression
Design

Adobe Fireworks 960.gs extension (Photoshop too)

Grids can accelerate progress while maintaining order
http://www.ﬂickr.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

“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

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/ﬁve-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.ﬂickr.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 ﬁxed-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://ﬁlamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing

Symphony + Jazz = Crazy ~ Like playing jazz ﬂute
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 conﬁg
<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
Miniﬁed, 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, ﬁguring out that the wind can spin pinwheels
908 bytes
http://www.ﬂickr.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 ﬁle 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 ﬁt,
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 ﬁnally distilled my approach to forms

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.

Refresh OKC

Recommended

More Related Content

Viewers also liked (20)

Similar to Refresh OKC (20)

More from Nathan Smith (20)

Recently uploaded (20)

Refresh OKC