Just Call Vip call girls Kasganj Escorts ☎️8617370543 Two shot with one girl ...
Think Vitamin CSS
1. THE WHY, HOW, AND WHEN?
of
CSS FRAMEWORKS
http://thinkvitamin.com/online-conferences/
2. 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/
6. “Any sufficiently advanced technology
is indistinguishable from magic.”
this scares me
— Arthur C. Clarke
http://en.wikipedia.org/wiki/Clarke's_three_laws
7. 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.)
8. 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/
9. WHY use a Framework?
+ Increase efficiency + Ease of maintenance
+ Code consistency + Repeatable process
+ Browser tested + CMS driven templates
11. 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)
12. ... 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/
14. DIV + SPAN ARE SEMANTICALLY MEANINGLESS (aka NEUTRAL)
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)
http://www.w3.org/TR/html401/struct/global.html#h-7.5.4
16. SORRY CSS... YOU WEREN’T INVITED TO THIS PARTY. WE STILL YOU.
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)
http://www.w3.org/standards/semanticweb/
17. DIV + ID / CLASS = ZERO SEMANTIC VALUE HTML5 TAGS = RICH SEMANTIC VALUE
<div class="header"> <header>
... ...
</div> </header>
<div class="nav"> <nav>
... ...
</div> </nav>
<div class="article"> <article>
... ...
</div> </article>
<div class="footer"> <footer>
... ...
</div> </footer>
32. .yui3-g {
/* webkit: collapse white-space
between units */
Example of YUI 3 Grid CSS
letter-spacing: -0.31em;
/* reset IE < 8 */
*letter-spacing: normal;
/* IE < 8 && gecko: collapse
white-space between units */
word-spacing: -0.43em;
} Note: Because nothing is floated in YUI,
this means that no additional files are
.yui3-u,
.yui3-u-1, needed in order to support languages that
.yui3-u-1-2,
... {
display: inline-block;
read right-to-left (Hebrew, Arabic, etc).
/* IE < 8: fake inline-block */
zoom: 1; *display: inline;
letter-spacing: normal;
word-spacing: normal;
But because everything is essentially
}
vertical-align: top;
display: inline-block, and is fluid width,
.yui3-u-1 { this also means columns cannot be
display: block;
} rearranged for SEO purposes. Additionally,
.yui3-u-1-2 { an extra wrapping <div> is required to
width: 50%;
} create gutters between content areas.
.yui3-u-1-3 {
width: 33.33333%;
}
http://developer.yahoo.com/yui/3/
35. 1KB Grid – Entire CSS file!
.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
.grid_8
{
{
width:540px;
width:620px;
}
}
The 1KB Grid has everything you
.grid_9
.grid_10
{
{
width:700px;
width:780px;
}
}
need, and nothing you don’t.
.grid_11 { width:860px; }
.grid_12 { width:940px; }
.column { Okay, maybe it doesn’t have everything
margin: 0 10px;
overflow: hidden; you need. It is – after all – less than 1
float: left;
display: inline; kilobyte of code, so it can’t do it all.
}
.row {
width: 960px;
margin: 0 auto;
No right-to-left support. No SEO column
}
overflow: hidden; re-ordering. But it is incredibly efficient!
.row .row {
margin: 0 -10px;
width: auto;
The 960 Grid System is 5.5KB. You can
}
display: inline-block;
think of the 1KB Grid as a “lite” version.
http://1kbgrid.com/
37. 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?
38. YUI 3.0 Grid
Pros: Cons:
+ Fluid (or fixed) Width – Source dependent layout
+ Easy RTL support – No gutters by default
+ Tested by Yahoo! devs – Rounding % inconsistencies
+ Part of a larger ecosystem
Use when:
You need a flexible layout, and when a margin of error ± a few pixels is acceptable.
http://developer.yahoo.com/yui/3/
39. Blueprint
Pros: Cons:
+ Ruby build scripts – Source dependent layout
+ Form, button, tab “plugins” – No outer gutters by default
+ Extensive typography – Design presuppositions
+ Print stylesheet (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/
40. 960.gs
Pros: Cons:
+ 12, 16, or 24 column grids – Less features than YUI / BP
+ PS + FW plugins, templates – Focuses solely on grids
+ Possible SEO benefits (could be a positive though)
+ IA, Designer, Dev friendly
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/
41. 1KB Grid
Pros: Cons:
+ Handy grid generator tool – Source dependent layout
+ Easy to get started – Features < than YUI / BP / 960
+ Lightweight code – Focuses solely on grids
+ No extra nesting classes (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/
43. 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: Cons:
+ 100% control over code – Debugging is all your burden
+ Build only what you need – Re-inventing the wheel?
45. 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