Think Vitamin CSS

of

THE WHY, HOW, AND WHEN?

CSS FRAMEWORKS

http://thinkvitamin.com/online-conferences/

Just a brief intro, then we’lldig right into the good stuff...

I’m Nathan. I am a designer(slash) front-end developerat Fellowship Technologies.

http://fellowshiptech.com/

You probably know me as the guy who made this...

http://960.gs/

But I’m not (entirely) one dimensional.

Today, I we are going to discuss some of the benefits (and drawbacks) of using CSS frameworks such as...

Blueprint, YUI 3,960.gs, 1kb Grid

http://en.wikipedia.org/wiki/Clarke's_three_laws

“Any sufficiently advanced technology is indistinguishable from magic.”

— Arthur C. Clarkethis scares me

You know why? CSS frameworks are not magic. Because CSS itself isn’t. Let’s not treat code like it’s mystical.

(Same for jQuery. But that’s another soapbox entirely.)

Veteran “ninjas” master a variety of tools – Not just one.

Use a framework as an extensionof yourself – Not just as a crutch.

BY HAND

FRAMEWORK

http://imdb.com/title/tt1046173/

WHY use a Framework?

+ Increase efficiency+ Code consistency+ Browser tested

+ Ease of maintenance+ Repeatable process+ CMS driven templates

WHY not?– Learning curve– Bloated HTML– Bloated CSS

– Code feels foreign– Longhand is quicker?– Unsemantic classes

I have found that many of those who cry “bloat” (as a reason not to use

frameworks) are themselves guilty of not doing all they can to reduce

client-side latency. For instance, referencing multiple CSS files of the

same media type is wasteful because it necessitates an HTTP request

for each file, thereby delaying page rendering until all the files have

been downloaded and parsed. Additionally, whitespace can quickly

add up: newline characters, tabbed (or spaced) indentation, etc...

— Nathan Smith (.Net Magazine July 2010)

... Regardless of if you are using a CSS framework, you can and

should be using techniques to mitigate the impact of CSS

downloads, including minification and concatenation – two fancy

terms that simply refer to the removal of unnecessary whitespace,

and combining multiple CSS files into one... If you want to minify

your CSS manually, I would recommend CSS Drive’s compressor.

— Nathan Smith (.Net Magazine July 2010)

http://www.cssdrive.com/index.php/main/csscompressor/

“Unsemantic”__________

http://www.w3.org/TR/html401/struct/global.html#h-7.5.4

The div and span elements, in conjunction with the id

and class attributes, offer a generic mechanism for

adding structure to documents. These elements define

content to be inline (span) or block-level (div) but

impose no other presentational idioms on the content.— World Wide Web Consortium (W3C)

DIV + SPAN ARE SEMANTICALLY MEANINGLESS (aka NEUTRAL)

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

“Semantic Web” doesn’t involve CSS

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

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)

SORRY CSS... YOU WEREN’T INVITED TO THIS PARTY. WE STILL ♥ YOU.

<header>...

</header><nav>

...</nav><article>

...</article><footer>

...</footer>

<div class="header">...

</div><div class="nav">

...</div><div class="article">

...</div><div class="footer">

...</div>

DIV + ID / CLASS = ZERO SEMANTIC VALUE HTML5 TAGS = RICH SEMANTIC VALUE

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

Semantics live here

Not here

If semantics keep you up at night... try SASS!

http://sass-lang.com/

Now that the ranting is done...

HOWdo I use a CSS framework?

Grid Typography PSD files Form styles Print styles “Plugins” RTL lang

Blueprint ✓ ✓ ✓ ✓ ✓ ✓ ✓

YUI ✓ ✓ ✓ ✓ ✓ ✓

960.gs ✓ ✓ ✓ * ✓

1KB Grid ✓

CSS Framework Comparison Matrix – Sounds really official, huh?

http://960.gs/

+ Acorn+ Adobe Fireworks+ Adobe Flash+ Adobe InDesign+ Adobe Illustrator+ Adobe Photoshop

+ Corel DRAW+ Expression Design+ GIMP+ InkScape+ OmniGraffle+ Visio

... and printable PDF sketch sheets.

The 960 Grid System has templates for...*

<div class="container"> <div class="span-8"> 1/3 width </div> <div class="span-8"> 1/3 width </div> <div class="span-8 last"> 1/3 width </div> <div class="span-12"> <div class="span-6"> 1/8 width </div> <div class="span-6 last"> 1/4 width </div> </div> <div class="span-12 last"> <div class="span-6 prepend-3 append-3 last"> 1/4 width </div> </div></div>

Example of Blueprint HTML

http://blueprintcss.org/

http://960.gs/

<div class="container_24"> <div class="grid_8"> 1/3 width </div> <div class="grid_8"> 1/3 width </div> <div class="grid_8"> 1/3 width </div> <div class="grid_12"> <div class="grid_6 alpha"> 1/8 width </div> <div class="grid_6 omega"> 1/4 width </div> </div> <div class="grid_12"> <div class="grid_6 prefix_3 suffix_3 alpha omega"> 1/4 width </div> </div></div>

Comparable example of 960.gs HTML (24-col)

.span-1,

.span-2,

... { float: left; margin-right: 10px;}

.span-1 { width: 30px;}

.prepend-1 { padding-left: 40px;}

.append-1 { padding-right: 40px;}

.last {margin-right: 0;

}

Example of Blueprint CSS

http://blueprintcss.org/

.pull-1,

.pull-2,

... { float: left; position:relative;}

.pull-1 { margin-left: -40px;}

.push-1,

.push-2,

... { float: right; position:relative;}

.push-1 { margin: 0 -40px 1.5em 40px;}

.container_24 .grid_1,

.container_24 .grid_2,

... { display: inline; float: left; margin-left: 5px; margin-right: 5px;}

.container_24 .grid_1 { width: 30px;}

.container_24 .prefix_1 { padding-left: 40px;}

.container_24 .suffix_1 { padding-right: 40px;}

.alpha {margin-left: 0;

}

.omega {margin-right: 0;

}

Example of 960.gs CSS (24-col)

.push_1,

.pull_1,

.push_2,

.pull_2 { position: relative;}

.container_24 .push_1 { left: 40px;}

.container_24 .pull_1 { right: 40px;}

Note: Whereas Blueprint’s push + pull classes are used for content (offset images / quotes), the push + pull classes in 960.gs are used to rearrange entire columns, independent of source order. This has practical implications for SEO.

http://960.gs/

BLUEPRINT GRID DIMENSIONS

960 (24-COL) GRID DIMENSIONS – What’s the difference? Glad you asked...

Blueprint’s text can touch left / right edge of browser. Troublesome on mobile.

960.gs has a 5px (24-col) or 10px (12, 16-col) buffer on left / right side.

http://developer.yahoo.com/yui/3/

<div class="container"> <div class="yui3-g"> <div class="yui3-u-1-2"> 1/2 width </div> <div class="yui3-u-1-2"> 1/2 width </div> </div> <div class="yui3-g"> <div class="yui3-u-1-24"> 1/24 width </div> <div class="yui3-u-23-24"> 23/24 width </div> </div></div>

YUI 3’s grid is fluid. It doesn’t use any floats. WHAT!?

.yui3-g { /* webkit: collapse white-space between units */ letter-spacing: -0.31em; /* reset IE < 8 */ *letter-spacing: normal; /* IE < 8 && gecko: collapse white-space between units */ word-spacing: -0.43em;}

.yui3-u,

.yui3-u-1,

.yui3-u-1-2,

... { display: inline-block; /* IE < 8: fake inline-block */ zoom: 1; *display: inline; letter-spacing: normal; word-spacing: normal; vertical-align: top;}

.yui3-u-1 { display: block;}

.yui3-u-1-2 { width: 50%;}

.yui3-u-1-3 { width: 33.33333%;}

Example of YUI 3 Grid CSS

Note: Because nothing is floated in YUI, this means that no additional files are needed in order to support languages that read right-to-left (Hebrew, Arabic, etc).

But because everything is essentially display: inline-block, and is fluid width, this also means columns cannot be rearranged for SEO purposes. Additionally, an extra wrapping <div> is required to create gutters between content areas.

http://developer.yahoo.com/yui/3/

BROWSER ROUNDING% INCONSISTENCIES

http://host.sonspring.com/yui3_grid/

http://1kbgrid.com/

http://1kbgrid.com/

.grid_1 { width:60px; }

.grid_2 { width:140px; }

.grid_3 { width:220px; }

.grid_4 { width:300px; }

.grid_5 { width:380px; }

.grid_6 { width:460px; }

.grid_7 { width:540px; }

.grid_8 { width:620px; }

.grid_9 { width:700px; }

.grid_10 { width:780px; }

.grid_11 { width:860px; }

.grid_12 { width:940px; }

.column { margin: 0 10px; overflow: hidden; float: left; display: inline;}

.row { width: 960px; margin: 0 auto; overflow: hidden;}

.row .row { margin: 0 -10px; width: auto; display: inline-block;}

1KB Grid – Entire CSS file!

The 1KB Grid has everything youneed, and nothing you don’t.

Okay, maybe it doesn’t have everything you need. It is – after all – less than 1 kilobyte of code, so it can’t do it all.

No right-to-left support. No SEO columnre-ordering. But it is incredibly efficient!

The 960 Grid System is 5.5KB. You can think of the 1KB Grid as a “lite” version.

<div class="row"> <div class="column grid_6"> <div class="row"> <div class="column grid_6"> 1/2 width </div> </div> <div class="row"> <div class="column grid_2"> 1/6 width </div> <div class="column grid_2"> 1/6 width </div> <div class="column grid_2"> 1/6 width </div> </div> </div> <div class="column grid_6"> 1/2 width </div></div>

Example of 1KB Grid HTML

http://1kbgrid.com/

So which CSS framework is the best? It depends...

+ What size site are you building?

+ Are you working alone or with a team?

+ Is pixel precision a make-or-break factor?

+ Do you need right-to-left language support?

+ Is your layout complex enough to merit SEO?

+ Do you want ready-made design or just a grid?

Pros:+ Fluid (or fixed) Width+ Easy RTL support+ Tested by Yahoo! devs+ Part of a larger ecosystem

YUI 3.0 GridCons:– Source dependent layout– No gutters by default– Rounding % inconsistencies

Use when:You need a flexible layout, and when a margin of error ± a few pixels is acceptable.

http://developer.yahoo.com/yui/3/

Pros:+ Ruby build scripts+ Form, button, tab “plugins”+ Extensive typography+ Print stylesheet

BlueprintCons:– Source dependent layout– No outer gutters by default– Design presuppositions (could be a positive though)

Use when:You want a design that is ready to go “out of the box” with many of the default details handled for you by default. You want to generate grids via Ruby scripts.

http://blueprintcss.org/

Pros:+ 12, 16, or 24 column grids+ PS + FW plugins, templates+ Possible SEO benefits+ IA, Designer, Dev friendly

960.gsCons:– Less features than YUI / BP– Focuses solely on grids (could be a positive though)

Use when:Building a site with layouts driven by a CMS. If you are doing rapid prototypingor have IA > Designer > Dev workflow. Want layout to differ from source order.

http://960.gs/

Pros:+ Handy grid generator tool+ Easy to get started+ Lightweight code+ No extra nesting classes

1KB GridCons:– Source dependent layout– Features < than YUI / BP / 960– Focuses solely on grids (could be a positive though)

Use when:You are building a site that needs a grid layout, but the site’s requirements do not necessitate the overhead of a robust CSS framework. Or code size is a concern.

http://1kbgrid.com/

So, others’ frameworks are fine, but...

WHEN should I roll my own framework?

When to build your own...✓ You have a specific need no other framework addresses✓ You require a grid that is atypical of common frameworks✓ To try your hand at architecting something others may use

Pros:+ 100% control over code+ Build only what you need

Cons:– Debugging is all your burden– Re-inventing the wheel?

Some HelpfulResources...

5 Simple Steps to Designing Grid Systems

A five-part series by Mark Boulton.

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

http://fivesimplesteps.com/

Mark Boulton’s publishing company – Five Simple Steps

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

“Grid

comp

uting

... and

Desig

n” –

by Kh

oi Vin

h

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

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

http://keynotekungfu.com/

FURTHER READING...

Frameworks for Designers – Jeff Croft— http://alistapart.com/articles/frameworksfordesigners

Smart CSS ain’t always sexy CSS – Martin Ringlein— http://digital-web.com/articles/smart_CSS_aint_always_sexy_CSS/

Object Oriented CSS – Nicole Sullivan— http://wiki.github.com/stubbornella/oocss/

Questions?— http://twitter.com/nathansmith— http://sonspring.com/contact

Get the slides...— http://slideshare.net/nathansmith/think-vitamin-css