Refresh Oklahoma City

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

Relax. Please dont try to take notes feverishly.

Email http://sonspring.com/contact
Twitter http://twitter.com/nathansmith
Slides http://slideshare.net/nathansmith/refresh-okc

Feel free to email me later, and download these

slides as well. These links are at the end, too.

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

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.

Veteran ninjas master a variety of tools Not just one.

FRAMEWORK
BY H

AND

Use a framework as an extension

of yourself Not just as a crutch.
http://imdb.com/title/tt1046173

Christian Heilmann developer evangelist at Mozilla

Our craft is becoming a
commodity and the people in
charge dont 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.
http://thinkvitamin.com/code/web-development-is-moving-on-are-you

Matthew Anderson designer at OneHub.com

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.

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

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

Truth be told, I dont 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!

Semantics can reside in microformats class names,

because parsers are built to look for them specifically

http://microformats.org

The W3Cs Semantic Web doesnt involve CSS

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

CSS gets no at the Semantic Web party

The term Semantic Web refers to W3Cs
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)

http://www.w3.org/standards/semanticweb

So lets get this straight...

Semantics live here

<tag class="peanut_butter jelly">Yummy content</tag>

Not here
... Except in the case of microformats.

Jeff Crofts 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

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

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.
http://en.wikipedia.org/wiki/Luddite

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

#anyways #whatevs #whocares #sobored

Um, okay, but

why grids?
My design skillz are so awesome,
Ive never needed to use grids.

For design thats really, really, ridiculously good looking

Also, to do other
things good too.

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

FYI: I dont especially love CSS.

The reason I create and use CSS

frameworks is because I hate doing
mundane tasks repeatedly (yawn).
Id rather be working in JavaScript.

JavaScript books Ive worked on...

Co-author
Tech editor

Tech editor

jQueryEnlightenment.com

JavaScriptEnlightenment.com

oreilly.com/catalog/9780596159788

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

Front-end is the opposite of a mythological hydra

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! :)
http://en.wikipedia.org/wiki/Lernaean_Hydra

#anyways #whatevs #whocares #sobored

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

Whats this whole 960.gs thing all about?

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.

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.

Dogfooding = When you use your own product

The 960 Grid System is an effort to streamline

web development by providing commonly used
dimensions, based on a width of 960 pixels.
There are two variants: 12 and 16 columns,
which can be used separately or in tandem.
If you like, theres also a 24-column version.

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

12, 16, and 24 columns available by default

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.

#anyways #whatevs #whocares #sobored

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>
<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

Many more possibilities via grid generators

http://grids.heroku.com

Templates available for your weapon of choice...

Acorn

Fireworks

Flash

InDesign

GIMP

Inkscape

Illustrator

OmniGraffle

Photoshop

Visio

Expression
Design

QuarkXPress

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 doesnt make him a less talented swimmer.

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

Our best practices are killing us Nicole Sullivan

Three best practice myths...

1. Dont add any extra elements
2. Dont add classes
3. Use descendent selectors exclusively

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

Our best practices are killing us Nicole Sullivan

Three best practice myths...

1. Dont add any extra elements
2. Dont add classes
3. Use descendent selectors exclusively

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

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. */
}

Still true: Smart CSS aint always sexy CSS

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

Inspiration: Khoi Vinn

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

Inspiration: Cameron Moll

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

Inspiration: Cameron Moll

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

Inspiration: Olav Bjrky

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

Inspiration: Brandon Schauer

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

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

Inspiration: Mark Boulton

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

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

Hicksdesign.co.uk = Beautiful responsive web design

http://hicksdesign.co.uk

Media queries for mobile arent a magic bullet

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

LifeChurch.tv - Separate site for mobile & desktop

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

Percentage-based grid, screenshot in Firefox 4.0

http://host.sonspring.com/yui3_grid

310px

150px

Percentage-based grid, screenshot in Chrome 10.0

http://host.sonspring.com/yui3_grid

309px

149px

960s 24 column grid = Exact multiples of 10

http://960.gs/demo_24_col.html

Whither: Grid framework or Responsive design?

VS

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.

Pet peeve: Use tomorrows technology, today!

The mere fact were even able to use it

today makes it todays technology.
As designers and developers, its 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.

Where media queries fall short, JavaScript shines

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

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 960s (or any) CSS dynamically

http://adapt.960.gs

Note: Not an endorsement, just a Twitter link...

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

For what its 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>

What about adding JavaScript page-weight?

845 bytes
Minified, Adapt.js is less than 1 KB.
(Allow me to put into perspective)

60 40 pixel JPG @ 70% quality = 908 bytes

908 bytes

My son, figuring out that the wind can spin pinwheels

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

Or, as my dad used to tell me as a kid...

Dont worry about problems

smaller than a gnats backside.
Note: If the extra HTTP request for JS is a
concern, the file size is small enough to just
include inline in the documents <head>.

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

Kind of a [small] deal
I didnt set out to write a
terse snippet of JavaScript.
Thats 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

To reiterate: I dont care if you use 960.gs or Adapt.js

In fact, heres 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,
Id encourage you to create one!

Sencha Touch

http://sencha.com/touch

Dojo Mobile

http://dojotoolkit.org/features/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

1140 CSS Grid

http://cssgrid.net

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)

Forms = Quite possibly, the worst part of web design

To prevent developers from

wasting countless hours on
styling dumb form elements

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

Its been awhile in the making...

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 :)

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

I finally distilled my approach to forms

http://formalize.me

I prefer using Sass to expedite writing CSS

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

if youre going to use Sass, use Sass, not SCSS.
http://sass-lang.com

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.