Slide 1

Slide 1 text

of THE WHY, HOW, AND WHEN? CSS FRAMEWORKS http://thinkvitamin.com/online-conferences/

Slide 2

Slide 2 text

Just a brief intro, then we’ll dig right into the good stuff... I’m Nathan. I am a designer (slash) front-end developer at Fellowship Technologies. http://fellowshiptech.com/

Slide 3

Slide 3 text

You probably know me as the guy who made this... http://960.gs/

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

http://en.wikipedia.org/wiki/Clarke's_three_laws “Any sufficiently advanced technology is indistinguishable from magic.” — Arthur C. Clarke this scares me

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Veteran “ninjas” master a variety of tools – Not just one. Use a framework as an extension of yourself – Not just as a crutch. BY HAND FRAMEWORK http://imdb.com/title/tt1046173/

Slide 9

Slide 9 text

WHY use a Framework? + Increase efficiency + Code consistency + Browser tested + Ease of maintenance + Repeatable process + CMS driven templates

Slide 10

Slide 10 text

WHY not? – Learning curve – Bloated HTML – Bloated CSS – Code feels foreign – Longhand is quicker? – Unsemantic classes

Slide 11

Slide 11 text

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)

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

“Unsemantic” __________

Slide 14

Slide 14 text

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)

Slide 15

Slide 15 text

http://www.w3.org/DesignIssues/Semantic.html “Semantic Web” doesn’t involve CSS

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Yummy content Semantics live here Not here

Slide 19

Slide 19 text

If semantics keep you up at night... try SASS! http://sass-lang.com/

Slide 20

Slide 20 text

Now that the ranting is done... HOW do I use a CSS framework?

Slide 21

Slide 21 text

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?

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

1/3 width
1/3 width
1/3 width
1/8 width
1/4 width
1/4 width
Example of Blueprint HTML http://blueprintcss.org/

Slide 24

Slide 24 text

http://960.gs/
1/3 width
1/3 width
1/3 width
1/8 width
1/4 width
1/4 width
Comparable example of 960.gs HTML (24-col)

Slide 25

Slide 25 text

.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; }

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

BLUEPRINT GRID DIMENSIONS

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

http://developer.yahoo.com/yui/3/
1/2 width
1/2 width
1/24 width
23/24 width
YUI 3’s grid is fluid. It doesn’t use any floats. WHAT!?

Slide 32

Slide 32 text

.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
is required to create gutters between content areas. http://developer.yahoo.com/yui/3/

Slide 33

Slide 33 text

BROWSER ROUNDING % INCONSISTENCIES http://host.sonspring.com/yui3_grid/

Slide 34

Slide 34 text

http://1kbgrid.com/

Slide 35

Slide 35 text

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 you need, 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 column re-ordering. But it is incredibly efficient! The 960 Grid System is 5.5KB. You can think of the 1KB Grid as a “lite” version.

Slide 36

Slide 36 text

1/2 width
1/6 width
1/6 width
1/6 width
1/2 width
Example of 1KB Grid HTML http://1kbgrid.com/

Slide 37

Slide 37 text

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?

Slide 38

Slide 38 text

Pros: + Fluid (or fixed) Width + Easy RTL support + Tested by Yahoo! devs + Part of a larger ecosystem YUI 3.0 Grid Cons: – 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/

Slide 39

Slide 39 text

Pros: + Ruby build scripts + Form, button, tab “plugins” + Extensive typography + Print stylesheet Blueprint Cons: – 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/

Slide 40

Slide 40 text

Pros: + 12, 16, or 24 column grids + PS + FW plugins, templates + Possible SEO benefits + IA, Designer, Dev friendly 960.gs Cons: – 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 prototyping or have IA > Designer > Dev workflow. Want layout to differ from source order. http://960.gs/

Slide 41

Slide 41 text

Pros: + Handy grid generator tool + Easy to get started + Lightweight code + No extra nesting classes 1KB Grid Cons: – 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/

Slide 42

Slide 42 text

So, others’ frameworks are fine, but... WHEN should I roll my own framework?

Slide 43

Slide 43 text

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?

Slide 44

Slide 44 text

Some Helpful Resources...

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

http://fivesimplesteps.com/ Mark Boulton’s publishing company – Five Simple Steps

Slide 47

Slide 47 text

http://www.subtraction.com/2004/12/31/grid-computi “Grid computing... and Design” – by Khoi Vinh

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

http://keynotekungfu.com/

Slide 51

Slide 51 text

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/

Slide 52

Slide 52 text

Questions? — http://twitter.com/nathansmith — http://sonspring.com/contact Get the slides... — http://slideshare.net/nathansmith/think-vitamin-css