SlideShare a Scribd company logo
1 of 52
Download to read offline
THE WHY, HOW, AND WHEN?
                      of

CSS FRAMEWORKS
     http://thinkvitamin.com/online-conferences/
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/
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
“Any sufficiently advanced technology
 is indistinguishable from magic.”
   this scares me
                                       — Arthur C. Clarke


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


                                                                  FRAMEWORK
        BY H
            AND




                          Use a framework as an extension
                          of yourself – Not just as a crutch.

                                                  http://imdb.com/title/tt1046173/
WHY use a Framework?
+ Increase efficiency + Ease of maintenance
+ Code consistency + Repeatable process
+ Browser tested    + CMS driven templates
WHY not?
– Learning curve – Code feels foreign
– Bloated HTML – Longhand is quicker?
– Bloated CSS – 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”
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
“Semantic Web” doesn’t involve CSS




   http://www.w3.org/DesignIssues/Semantic.html
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/
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>
Semantics live here


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



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




                 http://sass-lang.com/
Now that the ranting is done...




HOW
do I use a CSS framework?
CSS Framework Comparison Matrix – Sounds really official, huh?
              Grid   Typography   PSD files   Form styles Print styles   “Plugins”   RTL lang



Blueprint     ✓         ✓           ✓           ✓             ✓           ✓           ✓


  YUI         ✓         ✓                       ✓             ✓           ✓           ✓


 960.gs       ✓         ✓          ✓*                                                 ✓


1KB Grid      ✓
*   The 960 Grid System has templates for...
    + Acorn                          + Corel DRAW
    + Adobe Fireworks                + Expression Design
    + Adobe Flash                    + GIMP
    + Adobe InDesign                 + InkScape
    + Adobe Illustrator              + OmniGraffle
    + Adobe Photoshop                + Visio

    ... and printable PDF sketch sheets.

                    http://960.gs/
Example of Blueprint HTML
<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>




                        http://blueprintcss.org/
Comparable example of 960.gs HTML (24-col)
<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>




                            http://960.gs/
Example of Blueprint CSS
.span-1,                                      .pull-1,
.span-2,                                      .pull-2,
... {                                         ... {
      float: left;                                  float: left;
      margin-right: 10px;                           position:relative;
}                                             }

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

.prepend-1 {                                  .push-1,
      padding-left: 40px;                     .push-2,
}                                             ... {
                                                    float: right;
.append-1 {                                         position:relative;
      padding-right: 40px;                    }
}
                                              .push-1 {
.last {                                             margin: 0 -40px 1.5em 40px;
    margin-right: 0;                          }
}




                             http://blueprintcss.org/
Example of 960.gs CSS (24-col)
.container_24 .grid_1,                       .push_1,
.container_24 .grid_2,                       .pull_1,
... {                                        .push_2,
      display: inline;                       .pull_2 {
      float: left;                                 position: relative;
      margin-left: 5px;                      }
      margin-right: 5px;
}                                            .container_24 .push_1 {
                                                   left: 40px;
.container_24 .grid_1 {                      }
      width: 30px;
}                                            .container_24 .pull_1 {
                                                   right: 40px;
.container_24 .prefix_1 {                    }
      padding-left: 40px;
}

.container_24 .suffix_1 {
      padding-right: 40px;                 Note: Whereas Blueprint’s push + pull
}
                                           classes are used for content (offset
.alpha {
    margin-left: 0;                        images / quotes), the push + pull classes
}
                                           in 960.gs are used to rearrange entire
.omega {

}
    margin-right: 0;                       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.
YUI 3’s grid is fluid. It doesn’t use any floats. WHAT!?
<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>




                    http://developer.yahoo.com/yui/3/
.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/
BROWSER ROUNDING
                                       % INCONSISTENCIES




http://host.sonspring.com/yui3_grid/
http://1kbgrid.com/
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/
Example of 1KB Grid HTML
<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>




                          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?
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/
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/
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/
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/
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:                         Cons:
+ 100% control over code      – Debugging is all your burden
+ Build only what you need    – Re-inventing the wheel?
Some
Helpful
Resources...
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
Mark Boulton’s publishing company – Five Simple Steps




                  http://fivesimplesteps.com/
“Grid computing... and Design” – by Khoi Vinh
http://www.subtraction.com/2004/12/31/grid-computi
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

More Related Content

What's hot

Simply Responsive CSS3
Simply Responsive CSS3Simply Responsive CSS3
Simply Responsive CSS3Denise Jacobs
 
前端开发理论热点面对面:从怎么看,到怎么做?
前端开发理论热点面对面:从怎么看,到怎么做?前端开发理论热点面对面:从怎么看,到怎么做?
前端开发理论热点面对面:从怎么看,到怎么做?Kejun Zhang
 
CSS3: Ripe and Ready
CSS3: Ripe and ReadyCSS3: Ripe and Ready
CSS3: Ripe and ReadyDenise Jacobs
 
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考えるモダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える拓樹 谷
 
The Near Future of CSS
The Near Future of CSSThe Near Future of CSS
The Near Future of CSSRachel Andrew
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESSItai Koren
 
Introdução a CSS
Introdução a CSS Introdução a CSS
Introdução a CSS Tiago Santos
 
Yeşilbayır antika kol saati 0531 9810190 eski kurmalı saat
Yeşilbayır antika kol saati 0531 9810190 eski kurmalı saat Yeşilbayır antika kol saati 0531 9810190 eski kurmalı saat
Yeşilbayır antika kol saati 0531 9810190 eski kurmalı saat adin sonsuz
 

What's hot (9)

Simply Responsive CSS3
Simply Responsive CSS3Simply Responsive CSS3
Simply Responsive CSS3
 
前端开发理论热点面对面:从怎么看,到怎么做?
前端开发理论热点面对面:从怎么看,到怎么做?前端开发理论热点面对面:从怎么看,到怎么做?
前端开发理论热点面对面:从怎么看,到怎么做?
 
CSS3: Ripe and Ready
CSS3: Ripe and ReadyCSS3: Ripe and Ready
CSS3: Ripe and Ready
 
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考えるモダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
 
The Near Future of CSS
The Near Future of CSSThe Near Future of CSS
The Near Future of CSS
 
SASS is more than LESS
SASS is more than LESSSASS is more than LESS
SASS is more than LESS
 
Introdução a CSS
Introdução a CSS Introdução a CSS
Introdução a CSS
 
Presentation 2
Presentation 2Presentation 2
Presentation 2
 
Yeşilbayır antika kol saati 0531 9810190 eski kurmalı saat
Yeşilbayır antika kol saati 0531 9810190 eski kurmalı saat Yeşilbayır antika kol saati 0531 9810190 eski kurmalı saat
Yeşilbayır antika kol saati 0531 9810190 eski kurmalı saat
 

Viewers also liked

Visual Regression Testing
Visual Regression TestingVisual Regression Testing
Visual Regression Testingsonniesedge
 
Lessons Learned From Building Your Own CSS Framework
Lessons Learned From Building Your Own CSS FrameworkLessons Learned From Building Your Own CSS Framework
Lessons Learned From Building Your Own CSS Frameworksonniesedge
 
Roll Your Own CSS Framework
Roll Your Own CSS FrameworkRoll Your Own CSS Framework
Roll Your Own CSS FrameworkMike Aparicio
 
How to develop a CSS Framework
How to develop a CSS FrameworkHow to develop a CSS Framework
How to develop a CSS FrameworkOlivier Besson
 
Designing an Enterprise CSS Framework is Hard, Stephanie Rewis
Designing an Enterprise CSS Framework is Hard, Stephanie RewisDesigning an Enterprise CSS Framework is Hard, Stephanie Rewis
Designing an Enterprise CSS Framework is Hard, Stephanie RewisFuture Insights
 
Seven Steps to Creating a Framework
Seven Steps to Creating a FrameworkSeven Steps to Creating a Framework
Seven Steps to Creating a FrameworkRob Philibert
 
Quintada Regaliera
Quintada RegalieraQuintada Regaliera
Quintada Regalierarauluis
 
Ourstory Fabbri Martin
Ourstory Fabbri MartinOurstory Fabbri Martin
Ourstory Fabbri Martindboling
 
Digital Citizenship
Digital CitizenshipDigital Citizenship
Digital CitizenshipAndrew Kohl
 
VietRees_Newsletter_38_Week1_Month07_Year08
VietRees_Newsletter_38_Week1_Month07_Year08VietRees_Newsletter_38_Week1_Month07_Year08
VietRees_Newsletter_38_Week1_Month07_Year08internationalvr
 
Error Reports
Error ReportsError Reports
Error Reportsaurora444
 
Using copy.com app for uploading and sharing files
Using copy.com app for uploading and sharing filesUsing copy.com app for uploading and sharing files
Using copy.com app for uploading and sharing filesRachabodin Suwannakanthi
 
Draft of Memory of the World Thailand Communication and Advocacy Plan
Draft of Memory of the World Thailand Communication and Advocacy PlanDraft of Memory of the World Thailand Communication and Advocacy Plan
Draft of Memory of the World Thailand Communication and Advocacy PlanRachabodin Suwannakanthi
 
Bản Tin BĐS Việt Nam Số 72 Tuần 1 Tháng 3 Năm 2009
Bản Tin BĐS Việt Nam Số 72 Tuần 1 Tháng 3 Năm 2009Bản Tin BĐS Việt Nam Số 72 Tuần 1 Tháng 3 Năm 2009
Bản Tin BĐS Việt Nam Số 72 Tuần 1 Tháng 3 Năm 2009internationalvr
 

Viewers also liked (20)

Visual Regression Testing
Visual Regression TestingVisual Regression Testing
Visual Regression Testing
 
Lessons Learned From Building Your Own CSS Framework
Lessons Learned From Building Your Own CSS FrameworkLessons Learned From Building Your Own CSS Framework
Lessons Learned From Building Your Own CSS Framework
 
Roll Your Own CSS Framework
Roll Your Own CSS FrameworkRoll Your Own CSS Framework
Roll Your Own CSS Framework
 
How to develop a CSS Framework
How to develop a CSS FrameworkHow to develop a CSS Framework
How to develop a CSS Framework
 
Designing an Enterprise CSS Framework is Hard, Stephanie Rewis
Designing an Enterprise CSS Framework is Hard, Stephanie RewisDesigning an Enterprise CSS Framework is Hard, Stephanie Rewis
Designing an Enterprise CSS Framework is Hard, Stephanie Rewis
 
Seven Steps to Creating a Framework
Seven Steps to Creating a FrameworkSeven Steps to Creating a Framework
Seven Steps to Creating a Framework
 
flashcards A1
flashcards A1flashcards A1
flashcards A1
 
Quintada Regaliera
Quintada RegalieraQuintada Regaliera
Quintada Regaliera
 
Ourstory Fabbri Martin
Ourstory Fabbri MartinOurstory Fabbri Martin
Ourstory Fabbri Martin
 
IxDa Redux
IxDa ReduxIxDa Redux
IxDa Redux
 
Digital Citizenship
Digital CitizenshipDigital Citizenship
Digital Citizenship
 
Utility Fog
Utility FogUtility Fog
Utility Fog
 
VietRees_Newsletter_38_Week1_Month07_Year08
VietRees_Newsletter_38_Week1_Month07_Year08VietRees_Newsletter_38_Week1_Month07_Year08
VietRees_Newsletter_38_Week1_Month07_Year08
 
Halo Network
Halo NetworkHalo Network
Halo Network
 
Error Reports
Error ReportsError Reports
Error Reports
 
Using copy.com app for uploading and sharing files
Using copy.com app for uploading and sharing filesUsing copy.com app for uploading and sharing files
Using copy.com app for uploading and sharing files
 
Draft of Memory of the World Thailand Communication and Advocacy Plan
Draft of Memory of the World Thailand Communication and Advocacy PlanDraft of Memory of the World Thailand Communication and Advocacy Plan
Draft of Memory of the World Thailand Communication and Advocacy Plan
 
Forcesfor good
Forcesfor goodForcesfor good
Forcesfor good
 
Bản Tin BĐS Việt Nam Số 72 Tuần 1 Tháng 3 Năm 2009
Bản Tin BĐS Việt Nam Số 72 Tuần 1 Tháng 3 Năm 2009Bản Tin BĐS Việt Nam Số 72 Tuần 1 Tháng 3 Năm 2009
Bản Tin BĐS Việt Nam Số 72 Tuần 1 Tháng 3 Năm 2009
 
Blue Eye
Blue EyeBlue Eye
Blue Eye
 

Similar to Think Vitamin CSS

Web I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksWeb I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksRandy Connolly
 
Refresh Tallahassee: The RE/MAX Front End Story
Refresh Tallahassee: The RE/MAX Front End StoryRefresh Tallahassee: The RE/MAX Front End Story
Refresh Tallahassee: The RE/MAX Front End StoryRachael L Moore
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSSRachel Andrew
 
Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout Rachel Andrew
 
GOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for thatGOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for thatRachel Andrew
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucksTim Wright
 
ViA Bootstrap 4
ViA Bootstrap 4ViA Bootstrap 4
ViA Bootstrap 4imdurgesh
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockMarco Pinheiro
 
Introduction to CSS Grid
Introduction to CSS GridIntroduction to CSS Grid
Introduction to CSS GridKara Luton
 
Making the most of New CSS Layout
Making the most of New CSS LayoutMaking the most of New CSS Layout
Making the most of New CSS LayoutRachel Andrew
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Erin M. Kidwell
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}Eric Carlisle
 
Confoo: You can use CSS for that!
Confoo: You can use CSS for that!Confoo: You can use CSS for that!
Confoo: You can use CSS for that!Rachel Andrew
 
View Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & FriendsView Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & FriendsRachel Andrew
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentationMario Noble
 
Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17Rachel Andrew
 

Similar to Think Vitamin CSS (20)

Web I - 07 - CSS Frameworks
Web I - 07 - CSS FrameworksWeb I - 07 - CSS Frameworks
Web I - 07 - CSS Frameworks
 
Refresh Tallahassee: The RE/MAX Front End Story
Refresh Tallahassee: The RE/MAX Front End StoryRefresh Tallahassee: The RE/MAX Front End Story
Refresh Tallahassee: The RE/MAX Front End Story
 
SMACSS Workshop
SMACSS WorkshopSMACSS Workshop
SMACSS Workshop
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSS
 
Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout Google Developers Experts Summit 2017 - CSS Layout
Google Developers Experts Summit 2017 - CSS Layout
 
GOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for thatGOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for that
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
 
ViA Bootstrap 4
ViA Bootstrap 4ViA Bootstrap 4
ViA Bootstrap 4
 
SASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, GreensockSASS, Compass, Gulp, Greensock
SASS, Compass, Gulp, Greensock
 
Introduction to CSS Grid
Introduction to CSS GridIntroduction to CSS Grid
Introduction to CSS Grid
 
Making the most of New CSS Layout
Making the most of New CSS LayoutMaking the most of New CSS Layout
Making the most of New CSS Layout
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
 
Class15
Class15Class15
Class15
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
 
Confoo: You can use CSS for that!
Confoo: You can use CSS for that!Confoo: You can use CSS for that!
Confoo: You can use CSS for that!
 
View Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & FriendsView Source London: Solving Layout Problems with CSS Grid & Friends
View Source London: Solving Layout Problems with CSS Grid & Friends
 
Preprocessor presentation
Preprocessor presentationPreprocessor presentation
Preprocessor presentation
 
Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17Solving Layout Problems with CSS Grid & Friends - DevFest17
Solving Layout Problems with CSS Grid & Friends - DevFest17
 

More from Nathan Smith

Getting Started with React
Getting Started with ReactGetting Started with React
Getting Started with ReactNathan Smith
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do ThatNathan Smith
 
Rapid Templating with Serve
Rapid Templating with ServeRapid Templating with Serve
Rapid Templating with ServeNathan Smith
 
Proactive Responsive Design
Proactive Responsive DesignProactive Responsive Design
Proactive Responsive DesignNathan Smith
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsNathan Smith
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksNathan Smith
 
Accelerated Grid Theming
Accelerated Grid ThemingAccelerated Grid Theming
Accelerated Grid ThemingNathan Smith
 
Urban Leadership Slides
Urban Leadership SlidesUrban Leadership Slides
Urban Leadership SlidesNathan Smith
 
Themes from Ascent of a Leader
Themes from Ascent of a LeaderThemes from Ascent of a Leader
Themes from Ascent of a LeaderNathan Smith
 
Marketing 450 Guest Lecture
Marketing 450 Guest LectureMarketing 450 Guest Lecture
Marketing 450 Guest LectureNathan Smith
 
Fundamental Design Principles
Fundamental Design PrinciplesFundamental Design Principles
Fundamental Design PrinciplesNathan Smith
 
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End DevelopmentStriking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End DevelopmentNathan Smith
 
Echo Conference 2008
Echo Conference 2008Echo Conference 2008
Echo Conference 2008Nathan Smith
 

More from Nathan Smith (20)

Getting Started with React
Getting Started with ReactGetting Started with React
Getting Started with React
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do That
 
Rapid Templating with Serve
Rapid Templating with ServeRapid Templating with Serve
Rapid Templating with Serve
 
Proactive Responsive Design
Proactive Responsive DesignProactive Responsive Design
Proactive Responsive Design
 
Use Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile AppsUse Web Skills To Build Mobile Apps
Use Web Skills To Build Mobile Apps
 
Red Dirt JS
Red Dirt JSRed Dirt JS
Red Dirt JS
 
DrupalCon jQuery
DrupalCon jQueryDrupalCon jQuery
DrupalCon jQuery
 
DSVC Design Talk
DSVC Design TalkDSVC Design Talk
DSVC Design Talk
 
Adobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + FireworksAdobe MAX 2008: HTML/CSS + Fireworks
Adobe MAX 2008: HTML/CSS + Fireworks
 
Meet Clumsy
Meet ClumsyMeet Clumsy
Meet Clumsy
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Accelerated Grid Theming
Accelerated Grid ThemingAccelerated Grid Theming
Accelerated Grid Theming
 
Urban Leadership Slides
Urban Leadership SlidesUrban Leadership Slides
Urban Leadership Slides
 
Themes from Ascent of a Leader
Themes from Ascent of a LeaderThemes from Ascent of a Leader
Themes from Ascent of a Leader
 
7 Storey Mountain
7 Storey Mountain7 Storey Mountain
7 Storey Mountain
 
Marketing 450 Guest Lecture
Marketing 450 Guest LectureMarketing 450 Guest Lecture
Marketing 450 Guest Lecture
 
Fundamental Design Principles
Fundamental Design PrinciplesFundamental Design Principles
Fundamental Design Principles
 
Striking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End DevelopmentStriking a Balance: Middle Ground in Front-End Development
Striking a Balance: Middle Ground in Front-End Development
 
Echo Conference 2008
Echo Conference 2008Echo Conference 2008
Echo Conference 2008
 
Bible Tech 2008
Bible Tech 2008Bible Tech 2008
Bible Tech 2008
 

Recently uploaded

Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 

Recently uploaded (19)

Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 

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/
  • 3. You probably know me as the guy who made this... http://960.gs/
  • 4. 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...
  • 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
  • 10. WHY not? – Learning curve – Code feels foreign – Bloated HTML – Longhand is quicker? – Bloated CSS – Unsemantic classes
  • 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
  • 15. “Semantic Web” doesn’t involve CSS http://www.w3.org/DesignIssues/Semantic.html
  • 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>
  • 18. Semantics live here <tag class="peanut_butter jelly">Yummy content</tag> Not here
  • 19. If semantics keep you up at night... try SASS! http://sass-lang.com/
  • 20. Now that the ranting is done... HOW do I use a CSS framework?
  • 21. CSS Framework Comparison Matrix – Sounds really official, huh? Grid Typography PSD files Form styles Print styles “Plugins” RTL lang Blueprint ✓ ✓ ✓ ✓ ✓ ✓ ✓ YUI ✓ ✓ ✓ ✓ ✓ ✓ 960.gs ✓ ✓ ✓* ✓ 1KB Grid ✓
  • 22. * The 960 Grid System has templates for... + Acorn + Corel DRAW + Adobe Fireworks + Expression Design + Adobe Flash + GIMP + Adobe InDesign + InkScape + Adobe Illustrator + OmniGraffle + Adobe Photoshop + Visio ... and printable PDF sketch sheets. http://960.gs/
  • 23. Example of Blueprint HTML <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> http://blueprintcss.org/
  • 24. Comparable example of 960.gs HTML (24-col) <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> http://960.gs/
  • 25. Example of Blueprint CSS .span-1, .pull-1, .span-2, .pull-2, ... { ... { float: left; float: left; margin-right: 10px; position:relative; } } .span-1 { .pull-1 { width: 30px; margin-left: -40px; } } .prepend-1 { .push-1, padding-left: 40px; .push-2, } ... { float: right; .append-1 { position:relative; padding-right: 40px; } } .push-1 { .last { margin: 0 -40px 1.5em 40px; margin-right: 0; } } http://blueprintcss.org/
  • 26. Example of 960.gs CSS (24-col) .container_24 .grid_1, .push_1, .container_24 .grid_2, .pull_1, ... { .push_2, display: inline; .pull_2 { float: left; position: relative; margin-left: 5px; } margin-right: 5px; } .container_24 .push_1 { left: 40px; .container_24 .grid_1 { } width: 30px; } .container_24 .pull_1 { right: 40px; .container_24 .prefix_1 { } padding-left: 40px; } .container_24 .suffix_1 { padding-right: 40px; Note: Whereas Blueprint’s push + pull } classes are used for content (offset .alpha { margin-left: 0; images / quotes), the push + pull classes } in 960.gs are used to rearrange entire .omega { } margin-right: 0; columns, independent of source order. This has practical implications for SEO. http://960.gs/
  • 28. 960 (24-COL) GRID DIMENSIONS – What’s the difference? Glad you asked...
  • 29. Blueprint’s text can touch left / right edge of browser. Troublesome on mobile.
  • 30. 960.gs has a 5px (24-col) or 10px (12, 16-col) buffer on left / right side.
  • 31. YUI 3’s grid is fluid. It doesn’t use any floats. WHAT!? <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> http://developer.yahoo.com/yui/3/
  • 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/
  • 33. BROWSER ROUNDING % INCONSISTENCIES http://host.sonspring.com/yui3_grid/
  • 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/
  • 36. Example of 1KB Grid HTML <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> 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/
  • 42. So, others’ frameworks are fine, but... WHEN should I roll my own framework?
  • 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
  • 46. Mark Boulton’s publishing company – Five Simple Steps http://fivesimplesteps.com/
  • 47. “Grid computing... and Design” – by Khoi Vinh http://www.subtraction.com/2004/12/31/grid-computi
  • 51. 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/
  • 52. Questions? — http://twitter.com/nathansmith — http://sonspring.com/contact Get the slides... — http://slideshare.net/nathansmith/think-vitamin-css