SlideShare uma empresa Scribd logo
1 de 135
Baixar para ler offline
CSS FRAMEWORKS
                            make the right choice




Kevin Yank, sitepoint.com                       Web Directions South 2009
CSS FRAMEWORKS
   make the right choice
CSS FRAMEWORKS


  “a set of tools, libraries, conventions, and best practices that
attempt to abstract routine tasks into generic modules that can
                              be reused”

           — Jeff Croft, Frameworks for Designers
SlickMap CSS
THREE QUESTIONS
THREE QUESTIONS


   What do CSS frameworks do?

 How do I choose a CSS framework?

                           evil
   Are CSS frameworks pure evil?
THREE QUESTIONS


   What do CSS frameworks do?

 How do I choose a CSS framework?

   Are CSS frameworks pure evil
                           evil?
THREE QUESTIONS
THREE QUESTIONS
CSS Frameworks
CSS Frameworks
CSS RESET



      http://www.flickr.com/photos/redux/3219068532/
CSS RESET
CSS RESET
CSS RESET
CSS RESET
CSS RESET
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockq
uote,th,td {

      margin:0;

      padding:0;
}
table {

      border-collapse:collapse;

      border-spacing:0;
}
fieldset,img {

      border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {

      font-style:normal;

      font-weight:normal;
}
ol,ul {

      list-style:none;
}
caption,th {

      text-align:left;
}
h1,h2,h3,h4,h5,h6 {

      font-size:100%;

      font-weight:normal;
}
q:before,q:after {

      content:'';
}
abbr,acronym {

      border:0;
}
CSS RESET
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockq
uote,th,td {

      margin:0;

      padding:0;
}
table {

      border-collapse:collapse;

      border-spacing:0;
}
fieldset,img {

      border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {

      font-style:normal;

      font-weight:normal;
}
ol,ul {

      list-style:none;
}
caption,th {

      text-align:left;
}
                                                    *{         :0;
h1,h2,h3,h4,h5,h6 {                                    margin
                                                               g:0;

      font-size:100%;                                  paddin

      font-weight:normal;
                                                     }
}
q:before,q:after {

      content:'';
}
abbr,acronym {

      border:0;
}
CSS RESET

      YUI Reset CSS                      Eric Meyer’s Reset CSS


leaves critical styles alone               resets critical styles
        ins   left underlined              no :focus outline, unstyled ins




 sets default font styles             attempts to inherit font styles
   strong   not bold, em not italic      leaves built-in font styles
CSS RESET

      YUI Reset CSS                      Eric Meyer’s Reset CSS


leaves critical styles alone               resets critical styles
        ins   left underlined              no :focus outline, unstyled ins




 sets default font styles             attempts to inherit font styles
   strong   not bold, em not italic      leaves built-in font styles
CSS RESET

      YUI Reset CSS                      Eric Meyer’s Reset CSS


leaves critical styles alone               resets critical styles
        ins   left underlined              no :focus outline, unstyled ins




 sets default font styles             attempts to inherit font styles
   strong   not bold, em not italic      leaves built-in font styles
CSS RESET

      YUI Reset CSS                      Eric Meyer’s Reset CSS


leaves critical styles alone               resets critical styles
        ins   left underlined              no :focus outline, unstyled ins




 sets default font styles             attempts to inherit font styles
   strong   not bold, em not italic      leaves built-in font styles
CSS RESET

      YUI Reset CSS                      Eric Meyer’s Reset CSS


leaves critical styles alone               resets critical styles
        ins   left underlined              no :focus outline, unstyled ins




 sets default font styles             attempts to inherit font styles
   strong   not bold, em not italic      leaves built-in font styles
CSS RESET
CSS RESET
CONTROVERSY IN
  MICROCOSM
CONTROVERSY IN
             MICROCOSM

   “The problem I’vetake style effectsresets is is that then find me
     “I“The problem I’ve had with thesefor granted. […] It makes
        don’t want to had with these resets that I I then find
 myself think just that littlemore thanever needed to just toof get
    myself declaring much bit than I Iaboutneeded to just toget
         declaring much more harder ever the semantics my
 browsers backWith the reset in place, Iway I want. strong turns
     browsers back to rendering things thedon’tI pick As ititturns
      document. to rendering things the way want. As because
out,the I’m perfectly for boldfacing. Instead, I pickelements render
   out, design calls happy with how number ofof the right element—
     I’m perfectly happy with how a a number elements render
by default. I likeit’slike to havehaveor band andor whatever—and then
      by default. Ilists lists to em bullets h3 strong elements to
       whether          strong or bullets or strong elements to have
                                have boldedneeded.”
                                bolded text.” ”
                                 style it as text.

             — — Jonathan Snook, No CSS Reset
               Jonathan Meyer, Reset Reasoning
                 — Eric Snook, No CSS Reset
CONTROVERSY IN
              MICROCOSM

   “The problemto take style effects for granted. […]then find meme
    “I don’t want I’vetake style effectsresets is that […]makes
     “I don’t want to had with these for granted. I It It makes
 myself thinkjust that little bit harder Iabout needed to justof my my
        think just that little bit than ever the semantics toof
         declaring much more harder about the semantics get
 browsers backWith the reset in place, Iwaypick strongitbecause
    document. With renderingin place, I don’t I want. strong because
      document. to the reset things the don’t pick As turns
out,thedesign callshappyboldfacing. Instead, I pickelements render
   the design calls for with how a number of the right element—
     I’m perfectly for boldfacing. Instead, I pick the right element—
by default. I likeit’s strongor em oror band h3 or whatever—and then
     whether it’s lists to have em b oror strong elements to then
       whether strong or bullets h3 or whatever—and have
                              style it asas needed.”
                               bolded text.” ”
                                style it needed.

                — Eric Meyer, Reset Reasoning
             — Jonathan Meyer, Reset Reasoning
                 — Eric Snook, No CSS Reset
CONTROVERSY IN
  MICROCOSM
CSS RESET
CSS Frameworks
CSS Frameworks
CSS Frameworks
CSS Frameworks
http://www.flickr.com/photos/evaekeblad/468013086/




               GRID FRAMEWORKS
COLUMN GRIDS



http://www.flickr.com/photos/tochis/1302364866/
COLUMN GRIDS

      Blueprint         960 Grid System      YUI Grids CSS

                                                 fluid or
    950px fixed            960px fixed
                                           750/950/974px fixed

    24 columns           12/16 columns
                                                custom
    or custom              or custom

good docs, nice code,      nice code,        fluid and mixed
  any source order      any source order         layouts
BLUEPRINT

 30px   10px




               950px
BLUEPRINT
 30px   10px




               950px




class="container"
BLUEPRINT
  30px   10px




                950px


site header class="span-24"




class="container"
BLUEPRINT
      30px   10px




                    950px


    site header class="span-24"




content class="span-18"
      class="container"
BLUEPRINT
      30px   10px




                    950px


    site header class="span-24"



                                   sidebar
content class="span-18"           class="span-6
      class="container"                last"
BLUEPRINT
                   30px   10px




                                 950px


                 site header class="span-24"
 feature A
class="span-9"



                                                sidebar
                                               class="span-6
              class="container"                     last"
        content class="span-18"
BLUEPRINT
                   30px   10px




                                   950px


                 site header class="span-24"
 feature A                          feature B
class="span-9"                   class="span-9 last"



                                                        sidebar
                                                       class="span-6
              class="container"                             last"
        content class="span-18"
BLUEPRINT
                   30px   10px




                                   950px


                 site header class="span-24"
 feature A                          feature B
class="span-9"                   class="span-9 last"



                                                        sidebar
           body content
               class="container"                       class="span-6
          class="span-18 last"                              last"
        content class="span-18"
BLUEPRINT
                           30px   10px




                                           950px


                       site header class="span-24"
       feature A                            feature B
     class="span-9"                      class="span-9 last"



                                                                           sidebar
                      body content
                          class="container"                               class="span-6
                     class="span-18 last"                                      last"
                   content class="span-18"
department A          department B                 department C
  class="span-6"        class="span-6"              class="span-6 last"
960 GRID SYSTEM

  60px   20px   40px




                       960px
960 GRID SYSTEM
  60px   20px   40px




                       960px




  class="container_16"
960 GRID SYSTEM
  60px    20px   40px




                        960px


         site header class="grid_16"




  class="container_16"
960 GRID SYSTEM
   60px    20px   40px




                         960px


          site header class="grid_16"




 content class="grid_12"
    class="container_16"
960 GRID SYSTEM
   60px    20px   40px




                         960px


          site header class="grid_16"




 content class="grid_12"                  sidebar
    class="container_16"                class="grid_4"
960 GRID SYSTEM
                       60px    20px    40px




                                                 960px


                              site header class="grid_16"
        feature A                                 feature B
  class="grid_6 alpha"                        class="grid_6 omega"




                       body content                                               sidebar
                        class="container_16"
                  class="grid_12 alpha omega"
                                                                                class="grid_4"

                   content class="grid_12"
department A           department B                      department C
class="grid_4 alpha"          class="grid_4"             class="grid_4 omega"
YUI GRIDS CSS
YUI GRIDS CSS
<div id="doc3" class="yui-t6">
!    <div id="hd"><h1>Header</h1></div>
!    <div id="bd">
!    !    <div id="yui-main">
!    !    !    <div class="yui-b">
!    !    !    !    <div class="yui-g">
!    !    !    !    !    <div class="yui-u first">
!    !    !    !    !    !    <!-- YOUR DATA GOES HERE   -->
!    !    !    !    !    </div>
!    !    !    !    !    <div class="yui-u">
!    !    !    !    !    !    <!-- YOUR DATA GOES HERE   -->
!    !    !    !    !    </div>
!    !    !    !    </div>
!    !    !    !    <div class="yui-g">
!    !    !    !    !    <!-- YOUR DATA GOES HERE -->
!    !    !    !    </div>
!    !    !    !    <div class="yui-gb">
!    !    !    !    !    <div class="yui-u first">
!    !    !    !    !    !    <!-- YOUR DATA GOES HERE   -->
!    !    !    !    !    </div>
!    !    !    !    !    <div class="yui-u">
!    !    !    !    !    !    <!-- YOUR DATA GOES HERE   -->
!    !    !    !    !    </div>
!    !    !    !    !    <div class="yui-u">
!    !    !    !    !    !    <!-- YOUR DATA GOES HERE   -->
!    !    !    !    !    </div>
!    !    !    !    </div>
!    !    !    </div>
!    !    </div>
!    !    <div class="yui-b">
!    !    !    <!-- YOUR NAVIGATION GOES HERE -->
!    !    </div>
!    </div>
   <div id="ft"><p>Footer</p></div>
</div>
YUI GRIDS CSS
               <div id="doc3" class="yui-t6">
               !    <div id="hd"><h1>Header</h1></div> class="yui-t6" 300px right sidebar
               !    <div id="bd">
               !    !    <div id="yui-main">
               !    !    !    <div class="yui-b">
id="doc3" 100% width
               !
               !
                    !
                    !
                         !
                         !
                              !
                              !
                                   <div class="yui-g">
                                   !    <div class="yui-u first">class="yui-g" 2-col sub-grid
               !    !    !    !    !    !    <!-- YOUR DATA GOES HERE   -->
               !    !    !    !    !    </div>
               !    !    !    !    !    <div class="yui-u">
               !    !    !    !    !    !    <!-- YOUR DATA GOES HERE   -->
               !    !    !    !    !    </div>
               !    !    !    !    </div>
               !    !    !    !    <div class="yui-g">
               !    !    !    !    !    <!-- YOUR DATA GOES HERE -->
               !    !    !    !    </div>
               !
               !
                    !
                    !
                         !
                         !
                              !
                              !
                                   <div class="yui-gb">
                                   !    <div class="yui-u first"> class="yui-gb" 3-col sub-grid
               !    !    !    !    !    !    <!-- YOUR DATA GOES HERE   -->
               !    !    !    !    !    </div>
               !    !    !    !    !    <div class="yui-u">
               !    !    !    !    !    !    <!-- YOUR DATA GOES HERE   -->
               !    !    !    !    !    </div>
               !
               !
                    !
                    !
                         !
                         !
                              !
                              !
                                   !
                                   !
                                        <div class="yui-u">
                                        !    <!-- YOUR DATA GOES HERE   class="yui-u" grid unit
                                                                        -->
               !    !    !    !    !    </div>
               !    !    !    !    </div>
               !    !    !    </div>
               !    !    </div>
               !    !    <div class="yui-b">
               !    !    !    <!-- YOUR NAVIGATION GOES HERE -->
               !    !    </div>
               !    </div>
                  <div id="ft"><p>Footer</p></div>
               </div>
ANNOYED?
NON-SEMANTIC CLASSES
NON-SEMANTIC CLASSES


      class="span-9 last"

     class="grid_6 alpha"

        class="yui-t6"
NON-SEMANTIC CLASSES
NON-SEMANTIC CLASSES
                HTML4

“The class attribute has several roles in
 HTML:
  • As a style sheet selector (when an
    author wishes to assign style
    information to a set of elements).
  • For general purpose processing by
    user agents.”
NON-SEMANTIC CLASSES
                HTML4                                   HTML5 Draft

“The class attribute has several roles in   “Authors may use any value in the class
 HTML:                                       attribute, but are encouraged to use the
  • As a style sheet selector (when an       values that describe the nature of the
    author wishes to assign style            content, rather than values that describe
    information to a set of elements).       the desired presentation of the content.”
  • For general purpose processing by
    user agents.”
NON-SEMANTIC CLASSES
                HTML4                                   HTML5 Draft

“The class attribute has several roles in   “Authors may use any value in the class
 HTML:                                       attribute, but are encouraged to use the
  • As a style sheet selector (when an       values that describe the nature of the
    author wishes to assign style            content, rather than values that describe
    information to a set of elements).       the desired presentation of the content.”
  • For general purpose processing by
    user agents.”

“Good names don’t change

“Think about why you want something to look a certain way, and not really about
 how it should look. Looks can always change, but the reasons for giving something
 a look stay the same.”
NON-SEMANTIC CLASSES



     Let’s use our own classes!
PRESENTATIONAL
   THINKING
COLUMN GRIDS

      Blueprint         960 Grid System      YUI Grids CSS

                                                 fluid or
    950px fixed            960px fixed
                                           750/950/974px fixed

    24 columns           12/16 columns
                                                custom
    or custom              or custom
good docs, nice code,
                           nice code,        fluid and mixed
  any source order,
                        any source order         layouts
semantic classes
COLUMN GRIDS
TYPOGRAPHIC GRIDS
TYPOGRAPHIC GRIDS



h1   {
!     font-size:3em;
!     line-height:1;
!     margin-bottom:0.5em;
}
TYPOGRAPHIC GRIDS
     vertical rhythm


h1   {
!     font-size:3em;
!     line-height:1;
!     margin-bottom:0.5em;
}
TYPOGRAPHIC GRIDS
      vertical rhythm
                              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
                              purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero


default font 12px/18px
                              egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget
                              suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non,
                              mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor.
                              Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi.
                              Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue
 h1   {                       non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida
 !     font-size:3em;         ultrices.

 !     line-height:1;
 !     margin-bottom:0.5em;
 }
TYPOGRAPHIC GRIDS
      vertical rhythm
                               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
                               purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero


default font 12px/18px
                               egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget
                               suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non,
                               mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor.
                               Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi.
                               Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue
 h2   {                        non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida
 !     font-size:2em;          ultrices.

 !     line-height:1.5;
 !     margin-bottom:0.75em;
 }
TYPOGRAPHIC GRIDS
         vertical rhythm             Heading 1
                                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
                                     purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero


  default font 12px/18px
                                     egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget
                                     suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non,
                                     mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor.
                                     Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi.
                                     Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue
    h2   {                           non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida
    !     font-size:2em;             ultrices.

    !     line-height:1.5;
    !     margin-bottom:0.75em;
    }




12px × 3 × 1 = 36px = 2 grids/line
TYPOGRAPHIC GRIDS
           vertical rhythm              Heading 1
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
                                        purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero


    default font 12px/18px
                                        egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget
                                        suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non,
                                        mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor.
                                        Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi.
                                        Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue
      h2   {                            non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida
      !     font-size:2em;              ultrices.

      !     line-height:1.5;
      !     margin-bottom:0.75em;
      }




 12px × 3 × 1 = 36px = 2 grids/line

12px × 3 × 0.5 = 18px = 1 grid margin
TYPOGRAPHIC GRIDS
           vertical rhythm              Heading 1
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
                                        purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero


    default font 12px/18px
                                        egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget
                                        suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non,
                                        mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor.
                                        Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi.
                                        Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue
      h3   {                            non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida
      !     font-size:1.5em;            ultrices.

      !     line-height:1;
      !     margin-bottom:1em;
      }




 12px × 3 × 1 = 36px = 2 grids/line

12px × 3 × 0.5 = 18px = 1 grid margin
TYPOGRAPHIC GRIDS
           vertical rhythm              Heading 1
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
                                        purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero


    default font 12px/18px
                                        egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget
                                        suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non,
                                        mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor.
                                        Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi.
                                        Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue
      h3   {                            non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida
      !     font-size:1.5em;            ultrices.

      !     line-height:1;
      !     margin-bottom:1em;          Heading 2
      }




 12px × 2 × 1.5 = 36px = 2 grids/line
 12px × 3 × 1 = 36px = 2 grids/line

12px × 3 × 0.5 = 18px = 1 grid margin
TYPOGRAPHIC GRIDS
           vertical rhythm              Heading 1
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
                                        purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero


    default font 12px/18px
                                        egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget
                                        suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non,
                                        mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor.
                                        Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi.
                                        Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue
      h3   {                            non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida
      !     font-size:1.5em;            ultrices.

      !     line-height:1;
      !     margin-bottom:1em;          Heading 2
      }
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
                                        purus scelerisque sit amet vestibulum justo viverra.



 12px × 2 × 1.5 = 36px = 2 grids/line

12px × 2 × 0.75 = 36px = 2 grids/line
  12px × 3 × 1 = 18px = 1 grid margin

12px × 3 × 0.5 = 18px = 1 grid margin
TYPOGRAPHIC GRIDS
         vertical rhythm                 Heading 1
                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
                                         purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero


    default font 12px/18px
                                         egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget
                                         suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non,
                                         mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor.
                                         Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi.
                                         Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue
                                         non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida
                                         ultrices.



                                         Heading 2
                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
                                         purus scelerisque sit amet vestibulum justo viverra.




 12px × 23× 1.5= 36px = 22grids/line
  12px × × 1 = 36px = grids/line

12px × 2 × 0.75= 18px = 1 grid margin
 12px × 3 × 0.5 = 18px = 1 grid margin
TYPOGRAPHIC GRIDS
         vertical rhythm                 Heading 1
                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
                                         purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero


    default font 12px/18px
                                         egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget
                                         suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non,
                                         mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor.
                                         Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi.
                                         Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue
                                         non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida
                                         ultrices.



                                         Heading 2
                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
                                         purus scelerisque sit amet vestibulum justo viverra.


                                         Heading 3
 12px × 1.5 × 1 = 18px = 1 grids/line
 12px × 23× 1.5= 36px = 22grids/line
  12px × × 1 = 36px = grids/line

12px × 2 × 0.75= 18px = 1 grid margin
 12px × 3 × 0.5 = 18px = 1 grid margin
TYPOGRAPHIC GRIDS
         vertical rhythm                 Heading 1
                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
                                         purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero


    default font 12px/18px
                                         egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget
                                         suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non,
                                         mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor.
                                         Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi.
                                         Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue
                                         non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida
                                         ultrices.



                                         Heading 2
                                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
                                         purus scelerisque sit amet vestibulum justo viverra.


                                         Heading 3
 12px × 1.5 × 1 = 18px = 1 grids/line
                                         Cras posuere lobortis libero egestas suscipit. Donec aliquet, sem at ornare dictum,
                                         elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam,

12px ×× 23× 1.5= 18px ==22grids/line
 12px × × 1 ==36px = 1 grid margin
  12px 1.5 × 1    36px     grids/line    iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis.
                                         Integer et congue dolor.


12px × 2 × 0.75= 18px = 1 grid margin
 12px × 3 × 0.5 = 18px = 1 grid margin
TYPOGRAPHIC GRIDS
TYPOGRAPHIC GRIDS
TYPOGRAPHIC GRIDS
TYPOGRAPHIC GRIDS
TYPOGRAPHIC GRIDS
TYPOGRAPHIC GRIDS
h1,   h2, h3, h4, h5, h6
   { position: relative; }
h1,   h2
   
     
    
    
     { line-height: 36px; margin-bottom: 18px; }
h1,   h2, h3, h4
 
    
    { margin-top: 18px; }
h3,   h4, h5, h6
 
    
    { line-height: 18px; }
h1
    
    
     
    
    
     { font-size: 36px; top: 5px; }
h2
    
    
     
    
    
     { font-size: 28px; top: 8px; }
h3
    
    
     
    
    
     { font-size: 22px; top: 1px; }
h4
    
    
     
    
    
     { font-size: 18px; top: 2px; }
h5
    
    
     
    
    
     { font-size: 15px; top: 4px; }
h6
    
    
     
    
    
     { font-size: 13px; top: 5px; }
TYPOGRAPHIC GRIDS
h1,   h2, h3, h4, h5, h6
   { position: relative; }
h1,   h2
   
     
    
    
     { line-height: 36px; margin-bottom: 18px; }
h1,   h2, h3, h4
 
    
    { margin-top: 18px; }
h3,   h4, h5, h6
 
    
    { line-height: 18px; }
h1
    
    
     
    
    
     { font-size: 36px; top: 5px; }
h2
    
    
     
    
    
     { font-size: 28px; top: 8px; }
h3
    
    
     
    
    
     { font-size: 22px; top: 1px; }
h4
    
    
     
    
    
     { font-size: 18px; top: 2px; }
h5
    
    
     
    
    
     { font-size: 15px; top: 4px; }
h6
    
    
     
    
    
     { font-size: 13px; top: 5px; }
TYPOGRAPHIC GRIDS
 ideal leading is font and design dependent




                Helvetica vs Calibri
     http://forabeautifulweb.com/blog/about/lead_weight
TYPOGRAPHIC GRIDS
 ideal leading is font and design dependent




                 Helvetica vs Times
     http://forabeautifulweb.com/blog/about/lead_weight
TYPOGRAPHIC GRIDS
 ideal leading is font and design dependent




              Helvetica vs Helvetica
     http://forabeautifulweb.com/blog/about/lead_weight
TYPOGRAPHIC GRIDS
CSS Frameworks
CSS Frameworks
CSS Frameworks
CSS Frameworks
http://www.flickr.com/photos/therefore/18542525/




CSS PRE-FAB
CSS PRE-FAB



ready-made styles for documents made of prescribed
                    components
CSS PRE-FAB
CSS PRE-FAB




           <ul class="v6-9-9">
           !   <li class="a-magazine span-6"> content </li>
           !   <li class="a-subscribe span-9"> content </li>
           !   <li class="a-shop span-9 last"> content </li>
           </ul>




http://forabeautifulweb.com/blog/about/an_appropriate_use_for_css_frameworks/
CSS PRE-FAB




           <ul class="v9-6-9">
           !   <li class="a-magazine span-9"> content </li>
           !   <li class="a-subscribe span-6"> content </li>
           !   <li class="a-shop span-9 last"> content </li>
           </ul>




http://forabeautifulweb.com/blog/about/an_appropriate_use_for_css_frameworks/
CSS PRE-FAB




           <ul class="v9-9-6">
           !   <li class="a-magazine span-9"> content </li>
           !   <li class="a-subscribe span-9"> content </li>
           !   <li class="a-shop span-6 last"> content </li>
           </ul>




http://forabeautifulweb.com/blog/about/an_appropriate_use_for_css_frameworks/
CSS PRE-FAB
CSS Frameworks
CSS Frameworks
CSS Frameworks
CSS Frameworks
http://www.flickr.com/photos/bobalong/3410454292/




CSS ABSTRACTION
CSS ABSTRACTION


      “Adding any form of macros or additional scopes and
 indirections, including symbolic constants, is not just redundant,
but changes CSS in ways that make it unsuitable for its intended
  audience. Given that there is currently no alternative to CSS,
                  these things must not be added.”

       — Bert Bos, Why “variables” in CSS are harmful
CSS ABSTRACTION
SERVER-SIDE
FRAMEWORKS
SERVER-SIDE
FRAMEWORKS
     !sitepoint_bg = #036
     !sitepoint_fg = #F60

     #header
      background-color= !sitepoint_bg

      a:link
       color= !sitepoint_fg
      a:visited
       color= !sitepoint_fg - #830



     @import blueprint.css
     !blueprint_grid_columns = 16
     !blueprint_grid_width = 40px
     !blueprint_grid_margin = 20px

     +blueprint-grid

     #container
      +container

     #header
      +column(16)
SERVER-SIDE
FRAMEWORKS
     sitepoint_bg = #036
     sitepoint_fg = #F60

     #header:
      background-color: $sitepoint_bg

      a:link
       color: $sitepoint_fg
      a:visited
       color: $sitepoint_fg - #830
SERVER-SIDE
                         FRAMEWORKS


@constants {                           @grid {

   sitepoint_bg:#036;                 
    column-count:16;

   sitepoint_fg:#F60;                 
    column-width:40;
}                                      
    left-gutter-width:10;
                                       
    right-gutter-width:10;
#header {                              
    unit:px;

    background-color:!sitepoint_bg;   }


    a:link, a:visited {               #container {

    
     color:!sitepoint_fg;          +container;

    }                                 }
}
                                       #header {
                                         +columns(16);
                                       }
SERVER-SIDE
FRAMEWORKS
CSS Frameworks
CSS Frameworks
THREE QUESTIONS
THREE QUESTIONS
THREE QUESTIONS


   What do CSS frameworks do?

 How do I choose a CSS framework?

   Are CSS frameworks pure evil?
THREE QUESTIONS
FINAL THOUGHTS
FINAL THOUGHTS
FINAL THOUGHTS

Combine
FINAL THOUGHTS

Combine

Strip
http://www.sitepoint.com/dustmeselectors/
FINAL THOUGHTS

Combine

Strip
http://www.sitepoint.com/dustmeselectors/
FINAL THOUGHTS

Combine

Strip
http://www.sitepoint.com/dustmeselectors/

Shrink
http://floele.flyspray.org/csstidy/
FINAL THOUGHTS

Combine

Strip
http://www.sitepoint.com/dustmeselectors/

Shrink
http://floele.flyspray.org/csstidy/

        (or don’t serve it yourself)
FINAL THOUGHTS
FINAL THOUGHTS


    training wheels
FINAL THOUGHTS


             training wheels

learning CSS without that “ugly first page”
FINAL THOUGHTS


                    training wheels

learning CSS without that “ugly first page”

            See: Object Oriented CSS
http://north.webdirections.org/news/object-oriented-css-the-video
FINAL THOUGHTS
FINAL THOUGHTS



 when all you have is a hammer…
FINAL THOUGHTS



 when all you have is a hammer…

   think outside the framework
FINAL THOUGHTS
THANKS!

Mais conteúdo relacionado

Destaque

An Introduction to CSS Frameworks
An Introduction to CSS FrameworksAn Introduction to CSS Frameworks
An Introduction to CSS FrameworksAdrian Westlake
 
Convert a Site Template to a Drupal 7 Theme using SASS or LESS and Zurb Found...
Convert a Site Template to a Drupal 7 Theme using SASS or LESS and Zurb Found...Convert a Site Template to a Drupal 7 Theme using SASS or LESS and Zurb Found...
Convert a Site Template to a Drupal 7 Theme using SASS or LESS and Zurb Found...Carlos Ospina
 
Zurb foundation
Zurb foundationZurb foundation
Zurb foundationsean_todd
 
ZURB Foundation 5 -- Understanding the Ecosystem
ZURB Foundation 5 -- Understanding the EcosystemZURB Foundation 5 -- Understanding the Ecosystem
ZURB Foundation 5 -- Understanding the EcosystemJames Stone
 
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. FoundationBattle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. FoundationRachel Cherry
 
徳丸本に学ぶ 安全なPHPアプリ開発の鉄則2011
徳丸本に学ぶ 安全なPHPアプリ開発の鉄則2011徳丸本に学ぶ 安全なPHPアプリ開発の鉄則2011
徳丸本に学ぶ 安全なPHPアプリ開発の鉄則2011Hiroshi Tokumaru
 
Foundation: Prototype to Production
Foundation: Prototype to ProductionFoundation: Prototype to Production
Foundation: Prototype to ProductionZURB
 

Destaque (10)

An Introduction to CSS Frameworks
An Introduction to CSS FrameworksAn Introduction to CSS Frameworks
An Introduction to CSS Frameworks
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS Frameworks
 
Convert a Site Template to a Drupal 7 Theme using SASS or LESS and Zurb Found...
Convert a Site Template to a Drupal 7 Theme using SASS or LESS and Zurb Found...Convert a Site Template to a Drupal 7 Theme using SASS or LESS and Zurb Found...
Convert a Site Template to a Drupal 7 Theme using SASS or LESS and Zurb Found...
 
Zurb foundation
Zurb foundationZurb foundation
Zurb foundation
 
Zurb Foundation 5
Zurb Foundation 5Zurb Foundation 5
Zurb Foundation 5
 
ZURB Foundation 5 -- Understanding the Ecosystem
ZURB Foundation 5 -- Understanding the EcosystemZURB Foundation 5 -- Understanding the Ecosystem
ZURB Foundation 5 -- Understanding the Ecosystem
 
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. FoundationBattle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
 
徳丸本に学ぶ 安全なPHPアプリ開発の鉄則2011
徳丸本に学ぶ 安全なPHPアプリ開発の鉄則2011徳丸本に学ぶ 安全なPHPアプリ開発の鉄則2011
徳丸本に学ぶ 安全なPHPアプリ開発の鉄則2011
 
Foundation: Prototype to Production
Foundation: Prototype to ProductionFoundation: Prototype to Production
Foundation: Prototype to Production
 
Refresh OKC
Refresh OKCRefresh OKC
Refresh OKC
 

Semelhante a CSS Frameworks

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
 
16- Learn CSS Fundamentals / Background
16- Learn CSS Fundamentals / Background16- Learn CSS Fundamentals / Background
16- Learn CSS Fundamentals / BackgroundIn a Rocket
 
CSS3 is Not Magic Pixie Dust
CSS3 is Not Magic Pixie DustCSS3 is Not Magic Pixie Dust
CSS3 is Not Magic Pixie DustKyle Adams
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSSRachel Andrew
 
CSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyCSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyJoe Seifi
 
HTML&CSS 5 - Intermediate CSS (2/2)
HTML&CSS 5 - Intermediate CSS (2/2)HTML&CSS 5 - Intermediate CSS (2/2)
HTML&CSS 5 - Intermediate CSS (2/2)Dinis Correia
 
CSS for basic learner
CSS for basic learnerCSS for basic learner
CSS for basic learnerYoeung Vibol
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid PrototypingEven Wu
 
Compass And Sass(Tim Riley)
Compass And Sass(Tim Riley)Compass And Sass(Tim Riley)
Compass And Sass(Tim Riley)elliando dias
 
13- Learn CSS Fundamentals / Specificity
13- Learn CSS Fundamentals / Specificity13- Learn CSS Fundamentals / Specificity
13- Learn CSS Fundamentals / SpecificityIn a Rocket
 
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
 
Responsive Web Apps
Responsive Web AppsResponsive Web Apps
Responsive Web AppsNick Pettit
 
How to develop a CSS Framework
How to develop a CSS FrameworkHow to develop a CSS Framework
How to develop a CSS FrameworkOlivier Besson
 
CSS::SpriteMaker in action!
CSS::SpriteMaker in action!CSS::SpriteMaker in action!
CSS::SpriteMaker in action!lokku
 
Attsf css kt
Attsf css ktAttsf css kt
Attsf css ktturp31
 

Semelhante a CSS Frameworks (20)

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
 
16- Learn CSS Fundamentals / Background
16- Learn CSS Fundamentals / Background16- Learn CSS Fundamentals / Background
16- Learn CSS Fundamentals / Background
 
CSS3 is Not Magic Pixie Dust
CSS3 is Not Magic Pixie DustCSS3 is Not Magic Pixie Dust
CSS3 is Not Magic Pixie Dust
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSS
 
CSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The UglyCSS in React - The Good, The Bad, and The Ugly
CSS in React - The Good, The Bad, and The Ugly
 
HTML&CSS 5 - Intermediate CSS (2/2)
HTML&CSS 5 - Intermediate CSS (2/2)HTML&CSS 5 - Intermediate CSS (2/2)
HTML&CSS 5 - Intermediate CSS (2/2)
 
CSS for basic learner
CSS for basic learnerCSS for basic learner
CSS for basic learner
 
Rapid Prototyping
Rapid PrototypingRapid Prototyping
Rapid Prototyping
 
Compass And Sass(Tim Riley)
Compass And Sass(Tim Riley)Compass And Sass(Tim Riley)
Compass And Sass(Tim Riley)
 
13- Learn CSS Fundamentals / Specificity
13- Learn CSS Fundamentals / Specificity13- Learn CSS Fundamentals / Specificity
13- Learn CSS Fundamentals / Specificity
 
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!
 
Next-level CSS
Next-level CSSNext-level CSS
Next-level CSS
 
Accelerated Stylesheets
Accelerated StylesheetsAccelerated Stylesheets
Accelerated Stylesheets
 
Responsive Web Apps
Responsive Web AppsResponsive Web Apps
Responsive Web Apps
 
Css framework
Css frameworkCss framework
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
 
Css framework
Css frameworkCss framework
Css framework
 
CSS::SpriteMaker in action!
CSS::SpriteMaker in action!CSS::SpriteMaker in action!
CSS::SpriteMaker in action!
 
Think Vitamin CSS
Think Vitamin CSSThink Vitamin CSS
Think Vitamin CSS
 
Attsf css kt
Attsf css ktAttsf css kt
Attsf css kt
 

Mais de Web Directions

Douglas Crockford - Programming Style and Your Brain
Douglas Crockford - Programming Style and Your BrainDouglas Crockford - Programming Style and Your Brain
Douglas Crockford - Programming Style and Your BrainWeb Directions
 
Kim Heras - So, You've Got an Idea
Kim Heras - So, You've Got an IdeaKim Heras - So, You've Got an Idea
Kim Heras - So, You've Got an IdeaWeb Directions
 
Arunan Skanthan - Roll Your own Style Guide
Arunan Skanthan - Roll Your own Style GuideArunan Skanthan - Roll Your own Style Guide
Arunan Skanthan - Roll Your own Style GuideWeb Directions
 
Alan Downie and Matt Milosavljevic - BugHerd, the Incubator Experience
Alan Downie and Matt Milosavljevic - BugHerd, the Incubator ExperienceAlan Downie and Matt Milosavljevic - BugHerd, the Incubator Experience
Alan Downie and Matt Milosavljevic - BugHerd, the Incubator ExperienceWeb Directions
 
Five things I know about running a digital agency
Five things I know about running a digital agencyFive things I know about running a digital agency
Five things I know about running a digital agencyWeb Directions
 
Dave Orchard - Offline Web Apps with HTML5
Dave Orchard - Offline Web Apps with HTML5Dave Orchard - Offline Web Apps with HTML5
Dave Orchard - Offline Web Apps with HTML5Web Directions
 
Robby Ingebretsen - Get your game on: HTML5 for game building
Robby Ingebretsen - Get your game on: HTML5 for game buildingRobby Ingebretsen - Get your game on: HTML5 for game building
Robby Ingebretsen - Get your game on: HTML5 for game buildingWeb Directions
 
Ross Boucher - Quality Control: Testing and debugging your apps
Ross Boucher - Quality Control: Testing and debugging your appsRoss Boucher - Quality Control: Testing and debugging your apps
Ross Boucher - Quality Control: Testing and debugging your appsWeb Directions
 
Juliette Melton - Mobile User Experience Research
Juliette Melton - Mobile User Experience ResearchJuliette Melton - Mobile User Experience Research
Juliette Melton - Mobile User Experience ResearchWeb Directions
 
Lisa Herrod - The Age of Awareness
Lisa Herrod - The Age of AwarenessLisa Herrod - The Age of Awareness
Lisa Herrod - The Age of AwarenessWeb Directions
 
Practising Web Standards in the Large
Practising Web Standards in the Large Practising Web Standards in the Large
Practising Web Standards in the Large Web Directions
 
15 years in - Dan Hill
15 years in - Dan Hill15 years in - Dan Hill
15 years in - Dan HillWeb Directions
 
Kerry Taylor - Semantics & sensors
Kerry Taylor - Semantics & sensorsKerry Taylor - Semantics & sensors
Kerry Taylor - Semantics & sensorsWeb Directions
 
Boosting new media accessibility - Scott Hollier
Boosting new media accessibility - Scott HollierBoosting new media accessibility - Scott Hollier
Boosting new media accessibility - Scott HollierWeb Directions
 
Opening up social networks - Renato Iannella
Opening up social networks - Renato IannellaOpening up social networks - Renato Iannella
Opening up social networks - Renato IannellaWeb Directions
 
Douglas Crockford - Ajax Security
Douglas Crockford - Ajax SecurityDouglas Crockford - Ajax Security
Douglas Crockford - Ajax SecurityWeb Directions
 
Jeffrey Veen - Designing our way through data
Jeffrey Veen - Designing our way through dataJeffrey Veen - Designing our way through data
Jeffrey Veen - Designing our way through dataWeb Directions
 
Nick Bolton - The evolution and commercialisation of online video
Nick Bolton - The evolution and commercialisation of online videoNick Bolton - The evolution and commercialisation of online video
Nick Bolton - The evolution and commercialisation of online videoWeb Directions
 
Designing The User Experience Curve
Designing The User Experience CurveDesigning The User Experience Curve
Designing The User Experience CurveWeb Directions
 

Mais de Web Directions (20)

Douglas Crockford - Programming Style and Your Brain
Douglas Crockford - Programming Style and Your BrainDouglas Crockford - Programming Style and Your Brain
Douglas Crockford - Programming Style and Your Brain
 
Kim Heras - So, You've Got an Idea
Kim Heras - So, You've Got an IdeaKim Heras - So, You've Got an Idea
Kim Heras - So, You've Got an Idea
 
Arunan Skanthan - Roll Your own Style Guide
Arunan Skanthan - Roll Your own Style GuideArunan Skanthan - Roll Your own Style Guide
Arunan Skanthan - Roll Your own Style Guide
 
Alan Downie and Matt Milosavljevic - BugHerd, the Incubator Experience
Alan Downie and Matt Milosavljevic - BugHerd, the Incubator ExperienceAlan Downie and Matt Milosavljevic - BugHerd, the Incubator Experience
Alan Downie and Matt Milosavljevic - BugHerd, the Incubator Experience
 
Five things I know about running a digital agency
Five things I know about running a digital agencyFive things I know about running a digital agency
Five things I know about running a digital agency
 
Dave Orchard - Offline Web Apps with HTML5
Dave Orchard - Offline Web Apps with HTML5Dave Orchard - Offline Web Apps with HTML5
Dave Orchard - Offline Web Apps with HTML5
 
Robby Ingebretsen - Get your game on: HTML5 for game building
Robby Ingebretsen - Get your game on: HTML5 for game buildingRobby Ingebretsen - Get your game on: HTML5 for game building
Robby Ingebretsen - Get your game on: HTML5 for game building
 
Ross Boucher - Quality Control: Testing and debugging your apps
Ross Boucher - Quality Control: Testing and debugging your appsRoss Boucher - Quality Control: Testing and debugging your apps
Ross Boucher - Quality Control: Testing and debugging your apps
 
Juliette Melton - Mobile User Experience Research
Juliette Melton - Mobile User Experience ResearchJuliette Melton - Mobile User Experience Research
Juliette Melton - Mobile User Experience Research
 
Lisa Herrod - The Age of Awareness
Lisa Herrod - The Age of AwarenessLisa Herrod - The Age of Awareness
Lisa Herrod - The Age of Awareness
 
Practising Web Standards in the Large
Practising Web Standards in the Large Practising Web Standards in the Large
Practising Web Standards in the Large
 
15 years in - Dan Hill
15 years in - Dan Hill15 years in - Dan Hill
15 years in - Dan Hill
 
WCAG2 - Gian Wild
WCAG2 - Gian WildWCAG2 - Gian Wild
WCAG2 - Gian Wild
 
Kerry Taylor - Semantics & sensors
Kerry Taylor - Semantics & sensorsKerry Taylor - Semantics & sensors
Kerry Taylor - Semantics & sensors
 
Boosting new media accessibility - Scott Hollier
Boosting new media accessibility - Scott HollierBoosting new media accessibility - Scott Hollier
Boosting new media accessibility - Scott Hollier
 
Opening up social networks - Renato Iannella
Opening up social networks - Renato IannellaOpening up social networks - Renato Iannella
Opening up social networks - Renato Iannella
 
Douglas Crockford - Ajax Security
Douglas Crockford - Ajax SecurityDouglas Crockford - Ajax Security
Douglas Crockford - Ajax Security
 
Jeffrey Veen - Designing our way through data
Jeffrey Veen - Designing our way through dataJeffrey Veen - Designing our way through data
Jeffrey Veen - Designing our way through data
 
Nick Bolton - The evolution and commercialisation of online video
Nick Bolton - The evolution and commercialisation of online videoNick Bolton - The evolution and commercialisation of online video
Nick Bolton - The evolution and commercialisation of online video
 
Designing The User Experience Curve
Designing The User Experience CurveDesigning The User Experience Curve
Designing The User Experience Curve
 

Último

KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 

Último (20)

KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 

CSS Frameworks

  • 1. CSS FRAMEWORKS make the right choice Kevin Yank, sitepoint.com Web Directions South 2009
  • 2. CSS FRAMEWORKS make the right choice
  • 3. CSS FRAMEWORKS “a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused” — Jeff Croft, Frameworks for Designers
  • 6. THREE QUESTIONS What do CSS frameworks do? How do I choose a CSS framework? evil Are CSS frameworks pure evil?
  • 7. THREE QUESTIONS What do CSS frameworks do? How do I choose a CSS framework? Are CSS frameworks pure evil evil?
  • 12. CSS RESET http://www.flickr.com/photos/redux/3219068532/
  • 17. CSS RESET body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockq uote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; }
  • 18. CSS RESET body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockq uote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } *{ :0; h1,h2,h3,h4,h5,h6 { margin g:0; font-size:100%; paddin font-weight:normal; } } q:before,q:after { content:''; } abbr,acronym { border:0; }
  • 19. CSS RESET YUI Reset CSS Eric Meyer’s Reset CSS leaves critical styles alone resets critical styles ins left underlined no :focus outline, unstyled ins sets default font styles attempts to inherit font styles strong not bold, em not italic leaves built-in font styles
  • 20. CSS RESET YUI Reset CSS Eric Meyer’s Reset CSS leaves critical styles alone resets critical styles ins left underlined no :focus outline, unstyled ins sets default font styles attempts to inherit font styles strong not bold, em not italic leaves built-in font styles
  • 21. CSS RESET YUI Reset CSS Eric Meyer’s Reset CSS leaves critical styles alone resets critical styles ins left underlined no :focus outline, unstyled ins sets default font styles attempts to inherit font styles strong not bold, em not italic leaves built-in font styles
  • 22. CSS RESET YUI Reset CSS Eric Meyer’s Reset CSS leaves critical styles alone resets critical styles ins left underlined no :focus outline, unstyled ins sets default font styles attempts to inherit font styles strong not bold, em not italic leaves built-in font styles
  • 23. CSS RESET YUI Reset CSS Eric Meyer’s Reset CSS leaves critical styles alone resets critical styles ins left underlined no :focus outline, unstyled ins sets default font styles attempts to inherit font styles strong not bold, em not italic leaves built-in font styles
  • 26. CONTROVERSY IN MICROCOSM
  • 27. CONTROVERSY IN MICROCOSM “The problem I’vetake style effectsresets is is that then find me “I“The problem I’ve had with thesefor granted. […] It makes don’t want to had with these resets that I I then find myself think just that littlemore thanever needed to just toof get myself declaring much bit than I Iaboutneeded to just toget declaring much more harder ever the semantics my browsers backWith the reset in place, Iway I want. strong turns browsers back to rendering things thedon’tI pick As ititturns document. to rendering things the way want. As because out,the I’m perfectly for boldfacing. Instead, I pickelements render out, design calls happy with how number ofof the right element— I’m perfectly happy with how a a number elements render by default. I likeit’slike to havehaveor band andor whatever—and then by default. Ilists lists to em bullets h3 strong elements to whether strong or bullets or strong elements to have have boldedneeded.” bolded text.” ” style it as text. — — Jonathan Snook, No CSS Reset Jonathan Meyer, Reset Reasoning — Eric Snook, No CSS Reset
  • 28. CONTROVERSY IN MICROCOSM “The problemto take style effects for granted. […]then find meme “I don’t want I’vetake style effectsresets is that […]makes “I don’t want to had with these for granted. I It It makes myself thinkjust that little bit harder Iabout needed to justof my my think just that little bit than ever the semantics toof declaring much more harder about the semantics get browsers backWith the reset in place, Iwaypick strongitbecause document. With renderingin place, I don’t I want. strong because document. to the reset things the don’t pick As turns out,thedesign callshappyboldfacing. Instead, I pickelements render the design calls for with how a number of the right element— I’m perfectly for boldfacing. Instead, I pick the right element— by default. I likeit’s strongor em oror band h3 or whatever—and then whether it’s lists to have em b oror strong elements to then whether strong or bullets h3 or whatever—and have style it asas needed.” bolded text.” ” style it needed. — Eric Meyer, Reset Reasoning — Jonathan Meyer, Reset Reasoning — Eric Snook, No CSS Reset
  • 29. CONTROVERSY IN MICROCOSM
  • 37. COLUMN GRIDS Blueprint 960 Grid System YUI Grids CSS fluid or 950px fixed 960px fixed 750/950/974px fixed 24 columns 12/16 columns custom or custom or custom good docs, nice code, nice code, fluid and mixed any source order any source order layouts
  • 38. BLUEPRINT 30px 10px 950px
  • 39. BLUEPRINT 30px 10px 950px class="container"
  • 40. BLUEPRINT 30px 10px 950px site header class="span-24" class="container"
  • 41. BLUEPRINT 30px 10px 950px site header class="span-24" content class="span-18" class="container"
  • 42. BLUEPRINT 30px 10px 950px site header class="span-24" sidebar content class="span-18" class="span-6 class="container" last"
  • 43. BLUEPRINT 30px 10px 950px site header class="span-24" feature A class="span-9" sidebar class="span-6 class="container" last" content class="span-18"
  • 44. BLUEPRINT 30px 10px 950px site header class="span-24" feature A feature B class="span-9" class="span-9 last" sidebar class="span-6 class="container" last" content class="span-18"
  • 45. BLUEPRINT 30px 10px 950px site header class="span-24" feature A feature B class="span-9" class="span-9 last" sidebar body content class="container" class="span-6 class="span-18 last" last" content class="span-18"
  • 46. BLUEPRINT 30px 10px 950px site header class="span-24" feature A feature B class="span-9" class="span-9 last" sidebar body content class="container" class="span-6 class="span-18 last" last" content class="span-18" department A department B department C class="span-6" class="span-6" class="span-6 last"
  • 47. 960 GRID SYSTEM 60px 20px 40px 960px
  • 48. 960 GRID SYSTEM 60px 20px 40px 960px class="container_16"
  • 49. 960 GRID SYSTEM 60px 20px 40px 960px site header class="grid_16" class="container_16"
  • 50. 960 GRID SYSTEM 60px 20px 40px 960px site header class="grid_16" content class="grid_12" class="container_16"
  • 51. 960 GRID SYSTEM 60px 20px 40px 960px site header class="grid_16" content class="grid_12" sidebar class="container_16" class="grid_4"
  • 52. 960 GRID SYSTEM 60px 20px 40px 960px site header class="grid_16" feature A feature B class="grid_6 alpha" class="grid_6 omega" body content sidebar class="container_16" class="grid_12 alpha omega" class="grid_4" content class="grid_12" department A department B department C class="grid_4 alpha" class="grid_4" class="grid_4 omega"
  • 54. YUI GRIDS CSS <div id="doc3" class="yui-t6"> ! <div id="hd"><h1>Header</h1></div> ! <div id="bd"> ! ! <div id="yui-main"> ! ! ! <div class="yui-b"> ! ! ! ! <div class="yui-g"> ! ! ! ! ! <div class="yui-u first"> ! ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! ! </div> ! ! ! ! ! <div class="yui-u"> ! ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! ! </div> ! ! ! ! </div> ! ! ! ! <div class="yui-g"> ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! </div> ! ! ! ! <div class="yui-gb"> ! ! ! ! ! <div class="yui-u first"> ! ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! ! </div> ! ! ! ! ! <div class="yui-u"> ! ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! ! </div> ! ! ! ! ! <div class="yui-u"> ! ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! ! </div> ! ! ! ! </div> ! ! ! </div> ! ! </div> ! ! <div class="yui-b"> ! ! ! <!-- YOUR NAVIGATION GOES HERE --> ! ! </div> ! </div> <div id="ft"><p>Footer</p></div> </div>
  • 55. YUI GRIDS CSS <div id="doc3" class="yui-t6"> ! <div id="hd"><h1>Header</h1></div> class="yui-t6" 300px right sidebar ! <div id="bd"> ! ! <div id="yui-main"> ! ! ! <div class="yui-b"> id="doc3" 100% width ! ! ! ! ! ! ! ! <div class="yui-g"> ! <div class="yui-u first">class="yui-g" 2-col sub-grid ! ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! ! </div> ! ! ! ! ! <div class="yui-u"> ! ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! ! </div> ! ! ! ! </div> ! ! ! ! <div class="yui-g"> ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! </div> ! ! ! ! ! ! ! ! <div class="yui-gb"> ! <div class="yui-u first"> class="yui-gb" 3-col sub-grid ! ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! ! </div> ! ! ! ! ! <div class="yui-u"> ! ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! ! </div> ! ! ! ! ! ! ! ! ! ! <div class="yui-u"> ! <!-- YOUR DATA GOES HERE class="yui-u" grid unit --> ! ! ! ! ! </div> ! ! ! ! </div> ! ! ! </div> ! ! </div> ! ! <div class="yui-b"> ! ! ! <!-- YOUR NAVIGATION GOES HERE --> ! ! </div> ! </div> <div id="ft"><p>Footer</p></div> </div>
  • 58. NON-SEMANTIC CLASSES class="span-9 last" class="grid_6 alpha" class="yui-t6"
  • 60. NON-SEMANTIC CLASSES HTML4 “The class attribute has several roles in HTML: • As a style sheet selector (when an author wishes to assign style information to a set of elements). • For general purpose processing by user agents.”
  • 61. NON-SEMANTIC CLASSES HTML4 HTML5 Draft “The class attribute has several roles in “Authors may use any value in the class HTML: attribute, but are encouraged to use the • As a style sheet selector (when an values that describe the nature of the author wishes to assign style content, rather than values that describe information to a set of elements). the desired presentation of the content.” • For general purpose processing by user agents.”
  • 62. NON-SEMANTIC CLASSES HTML4 HTML5 Draft “The class attribute has several roles in “Authors may use any value in the class HTML: attribute, but are encouraged to use the • As a style sheet selector (when an values that describe the nature of the author wishes to assign style content, rather than values that describe information to a set of elements). the desired presentation of the content.” • For general purpose processing by user agents.” “Good names don’t change “Think about why you want something to look a certain way, and not really about how it should look. Looks can always change, but the reasons for giving something a look stay the same.”
  • 63. NON-SEMANTIC CLASSES Let’s use our own classes!
  • 64. PRESENTATIONAL THINKING
  • 65. COLUMN GRIDS Blueprint 960 Grid System YUI Grids CSS fluid or 950px fixed 960px fixed 750/950/974px fixed 24 columns 12/16 columns custom or custom or custom good docs, nice code, nice code, fluid and mixed any source order, any source order layouts semantic classes
  • 68. TYPOGRAPHIC GRIDS h1 { ! font-size:3em; ! line-height:1; ! margin-bottom:0.5em; }
  • 69. TYPOGRAPHIC GRIDS vertical rhythm h1 { ! font-size:3em; ! line-height:1; ! margin-bottom:0.5em; }
  • 70. TYPOGRAPHIC GRIDS vertical rhythm Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero default font 12px/18px egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi. Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue h1 { non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida ! font-size:3em; ultrices. ! line-height:1; ! margin-bottom:0.5em; }
  • 71. TYPOGRAPHIC GRIDS vertical rhythm Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero default font 12px/18px egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi. Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue h2 { non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida ! font-size:2em; ultrices. ! line-height:1.5; ! margin-bottom:0.75em; }
  • 72. TYPOGRAPHIC GRIDS vertical rhythm Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero default font 12px/18px egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi. Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue h2 { non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida ! font-size:2em; ultrices. ! line-height:1.5; ! margin-bottom:0.75em; } 12px × 3 × 1 = 36px = 2 grids/line
  • 73. TYPOGRAPHIC GRIDS vertical rhythm Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero default font 12px/18px egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi. Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue h2 { non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida ! font-size:2em; ultrices. ! line-height:1.5; ! margin-bottom:0.75em; } 12px × 3 × 1 = 36px = 2 grids/line 12px × 3 × 0.5 = 18px = 1 grid margin
  • 74. TYPOGRAPHIC GRIDS vertical rhythm Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero default font 12px/18px egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi. Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue h3 { non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida ! font-size:1.5em; ultrices. ! line-height:1; ! margin-bottom:1em; } 12px × 3 × 1 = 36px = 2 grids/line 12px × 3 × 0.5 = 18px = 1 grid margin
  • 75. TYPOGRAPHIC GRIDS vertical rhythm Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero default font 12px/18px egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi. Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue h3 { non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida ! font-size:1.5em; ultrices. ! line-height:1; ! margin-bottom:1em; Heading 2 } 12px × 2 × 1.5 = 36px = 2 grids/line 12px × 3 × 1 = 36px = 2 grids/line 12px × 3 × 0.5 = 18px = 1 grid margin
  • 76. TYPOGRAPHIC GRIDS vertical rhythm Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero default font 12px/18px egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi. Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue h3 { non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida ! font-size:1.5em; ultrices. ! line-height:1; ! margin-bottom:1em; Heading 2 } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. 12px × 2 × 1.5 = 36px = 2 grids/line 12px × 2 × 0.75 = 36px = 2 grids/line 12px × 3 × 1 = 18px = 1 grid margin 12px × 3 × 0.5 = 18px = 1 grid margin
  • 77. TYPOGRAPHIC GRIDS vertical rhythm Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero default font 12px/18px egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi. Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida ultrices. Heading 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. 12px × 23× 1.5= 36px = 22grids/line 12px × × 1 = 36px = grids/line 12px × 2 × 0.75= 18px = 1 grid margin 12px × 3 × 0.5 = 18px = 1 grid margin
  • 78. TYPOGRAPHIC GRIDS vertical rhythm Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero default font 12px/18px egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi. Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida ultrices. Heading 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Heading 3 12px × 1.5 × 1 = 18px = 1 grids/line 12px × 23× 1.5= 36px = 22grids/line 12px × × 1 = 36px = grids/line 12px × 2 × 0.75= 18px = 1 grid margin 12px × 3 × 0.5 = 18px = 1 grid margin
  • 79. TYPOGRAPHIC GRIDS vertical rhythm Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero default font 12px/18px egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi. Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida ultrices. Heading 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Heading 3 12px × 1.5 × 1 = 18px = 1 grids/line Cras posuere lobortis libero egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, 12px ×× 23× 1.5= 18px ==22grids/line 12px × × 1 ==36px = 1 grid margin 12px 1.5 × 1 36px grids/line iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. 12px × 2 × 0.75= 18px = 1 grid margin 12px × 3 × 0.5 = 18px = 1 grid margin
  • 85. TYPOGRAPHIC GRIDS h1, h2, h3, h4, h5, h6 { position: relative; } h1, h2 { line-height: 36px; margin-bottom: 18px; } h1, h2, h3, h4 { margin-top: 18px; } h3, h4, h5, h6 { line-height: 18px; } h1 { font-size: 36px; top: 5px; } h2 { font-size: 28px; top: 8px; } h3 { font-size: 22px; top: 1px; } h4 { font-size: 18px; top: 2px; } h5 { font-size: 15px; top: 4px; } h6 { font-size: 13px; top: 5px; }
  • 86. TYPOGRAPHIC GRIDS h1, h2, h3, h4, h5, h6 { position: relative; } h1, h2 { line-height: 36px; margin-bottom: 18px; } h1, h2, h3, h4 { margin-top: 18px; } h3, h4, h5, h6 { line-height: 18px; } h1 { font-size: 36px; top: 5px; } h2 { font-size: 28px; top: 8px; } h3 { font-size: 22px; top: 1px; } h4 { font-size: 18px; top: 2px; } h5 { font-size: 15px; top: 4px; } h6 { font-size: 13px; top: 5px; }
  • 87. TYPOGRAPHIC GRIDS ideal leading is font and design dependent Helvetica vs Calibri http://forabeautifulweb.com/blog/about/lead_weight
  • 88. TYPOGRAPHIC GRIDS ideal leading is font and design dependent Helvetica vs Times http://forabeautifulweb.com/blog/about/lead_weight
  • 89. TYPOGRAPHIC GRIDS ideal leading is font and design dependent Helvetica vs Helvetica http://forabeautifulweb.com/blog/about/lead_weight
  • 96. CSS PRE-FAB ready-made styles for documents made of prescribed components
  • 98. CSS PRE-FAB <ul class="v6-9-9"> ! <li class="a-magazine span-6"> content </li> ! <li class="a-subscribe span-9"> content </li> ! <li class="a-shop span-9 last"> content </li> </ul> http://forabeautifulweb.com/blog/about/an_appropriate_use_for_css_frameworks/
  • 99. CSS PRE-FAB <ul class="v9-6-9"> ! <li class="a-magazine span-9"> content </li> ! <li class="a-subscribe span-6"> content </li> ! <li class="a-shop span-9 last"> content </li> </ul> http://forabeautifulweb.com/blog/about/an_appropriate_use_for_css_frameworks/
  • 100. CSS PRE-FAB <ul class="v9-9-6"> ! <li class="a-magazine span-9"> content </li> ! <li class="a-subscribe span-9"> content </li> ! <li class="a-shop span-6 last"> content </li> </ul> http://forabeautifulweb.com/blog/about/an_appropriate_use_for_css_frameworks/
  • 107. CSS ABSTRACTION “Adding any form of macros or additional scopes and indirections, including symbolic constants, is not just redundant, but changes CSS in ways that make it unsuitable for its intended audience. Given that there is currently no alternative to CSS, these things must not be added.” — Bert Bos, Why “variables” in CSS are harmful
  • 110. SERVER-SIDE FRAMEWORKS !sitepoint_bg = #036 !sitepoint_fg = #F60 #header background-color= !sitepoint_bg a:link color= !sitepoint_fg a:visited color= !sitepoint_fg - #830 @import blueprint.css !blueprint_grid_columns = 16 !blueprint_grid_width = 40px !blueprint_grid_margin = 20px +blueprint-grid #container +container #header +column(16)
  • 111. SERVER-SIDE FRAMEWORKS sitepoint_bg = #036 sitepoint_fg = #F60 #header: background-color: $sitepoint_bg a:link color: $sitepoint_fg a:visited color: $sitepoint_fg - #830
  • 112. SERVER-SIDE FRAMEWORKS @constants { @grid { sitepoint_bg:#036; column-count:16; sitepoint_fg:#F60; column-width:40; } left-gutter-width:10; right-gutter-width:10; #header { unit:px; background-color:!sitepoint_bg; } a:link, a:visited { #container { color:!sitepoint_fg; +container; } } } #header { +columns(16); }
  • 118. THREE QUESTIONS What do CSS frameworks do? How do I choose a CSS framework? Are CSS frameworks pure evil?
  • 128. FINAL THOUGHTS training wheels
  • 129. FINAL THOUGHTS training wheels learning CSS without that “ugly first page”
  • 130. FINAL THOUGHTS training wheels learning CSS without that “ugly first page” See: Object Oriented CSS http://north.webdirections.org/news/object-oriented-css-the-video
  • 132. FINAL THOUGHTS when all you have is a hammer…
  • 133. FINAL THOUGHTS when all you have is a hammer… think outside the framework

Notas do Editor

  1. 50-55 minutes long
  2. 50-55 minutes long
  3. Show of hands: based on this definition, &amp;#x2022; using a CSS framework? &amp;#x2022; using a &amp;#x201C;framework&amp;#x201D; they created themselves?
  4. &amp;#x2022; more than enough list posts out there (maybe one or two on sitepoint.com!)
  5. As I take you on this &amp;#x201C;grand tour of CSS frameworkery&amp;#x201D;, my aim is to answer three questions for you&amp;#x2026;
  6. As I take you on this &amp;#x201C;grand tour of CSS frameworkery&amp;#x201D;, my aim is to answer three questions for you&amp;#x2026;
  7. As I take you on this &amp;#x201C;grand tour of CSS frameworkery&amp;#x201D;, my aim is to answer three questions for you&amp;#x2026;
  8. As I take you on this &amp;#x201C;grand tour of CSS frameworkery&amp;#x201D;, my aim is to answer three questions for you&amp;#x2026;
  9. As I take you on this &amp;#x201C;grand tour of CSS frameworkery&amp;#x201D;, my aim is to answer three questions for you&amp;#x2026;
  10. As I take you on this &amp;#x201C;grand tour of CSS frameworkery&amp;#x201D;, my aim is to answer three questions for you&amp;#x2026;
  11. &amp;#x2026;and by the end, you should have a good feel for whether there are any CSS frameworks that are right for you. (Or if the one you build yourself might be worth putting out there!)
  12. &amp;#x2022; we&amp;#x2019;ll look at four types of frameworks
  13. &amp;#x2022; we&amp;#x2019;ll look at four types of frameworks
  14. &amp;#x2022; we&amp;#x2019;ll look at four types of frameworks
  15. &amp;#x2022; we&amp;#x2019;ll look at four types of frameworks
  16. &amp;#x2022; we&amp;#x2019;ll look at four types of frameworks
  17. &amp;#x2022; we&amp;#x2019;ll look at four types of frameworks
  18. &amp;#x2022; we&amp;#x2019;ll look at four types of frameworks
  19. &amp;#x2022; we&amp;#x2019;ll look at four types of frameworks
  20. &amp;#x2022; we&amp;#x2019;ll look at four types of frameworks
  21. &amp;#x2022; choosing a CSS Reset is fraught with all the complexities and complications of choosing any CSS framework
  22. &amp;#x2022; choosing a CSS Reset is fraught with all the complexities and complications of choosing any CSS framework
  23. &amp;#x2022; choosing a CSS Reset is fraught with all the complexities and complications of choosing any CSS framework
  24. &amp;#x2022; (if you use one) first style sheet you apply to every page
  25. &amp;#x2022; (if you use one) first style sheet you apply to every page
  26. &amp;#x2022; Yahoo! User Interface Library (YUI) Reset CSS &amp;#x2022; all sorts of things you might not think of &amp;#x2022; more robust than the typical do-it-yourself effort &amp;#x2022; doesn&amp;#x2019;t reset margins and padding that are vital to some form elements
  27. &amp;#x2022; Yahoo! User Interface Library (YUI) Reset CSS &amp;#x2022; all sorts of things you might not think of &amp;#x2022; more robust than the typical do-it-yourself effort &amp;#x2022; doesn&amp;#x2019;t reset margins and padding that are vital to some form elements
  28. &amp;#x2022; Yahoo! User Interface Library (YUI) Reset CSS &amp;#x2022; all sorts of things you might not think of &amp;#x2022; more robust than the typical do-it-yourself effort &amp;#x2022; doesn&amp;#x2019;t reset margins and padding that are vital to some form elements
  29. &amp;#x2022; Yahoo! User Interface Library (YUI) Reset CSS &amp;#x2022; all sorts of things you might not think of &amp;#x2022; more robust than the typical do-it-yourself effort &amp;#x2022; doesn&amp;#x2019;t reset margins and padding that are vital to some form elements
  30. &amp;#x2022; Yahoo! User Interface Library (YUI) Reset CSS &amp;#x2022; all sorts of things you might not think of &amp;#x2022; more robust than the typical do-it-yourself effort &amp;#x2022; doesn&amp;#x2019;t reset margins and padding that are vital to some form elements
  31. &amp;#x2022; Meyer removes :focus (pseudo-class) outlines and other &amp;#x201C;critical&amp;#x201D; styles like the underline on ins elements. &amp;#x2022; Yahoo! breaks font style inheritance by applying initial values (e.g. font-weight: normal) to all elements. &amp;#x2022; Meyer: right thing to do is use inherit, which IE6/7 do not support, so leave these styles alone.
  32. &amp;#x2022; Meyer removes :focus (pseudo-class) outlines and other &amp;#x201C;critical&amp;#x201D; styles like the underline on ins elements. &amp;#x2022; Yahoo! breaks font style inheritance by applying initial values (e.g. font-weight: normal) to all elements. &amp;#x2022; Meyer: right thing to do is use inherit, which IE6/7 do not support, so leave these styles alone.
  33. &amp;#x2022; Meyer removes :focus (pseudo-class) outlines and other &amp;#x201C;critical&amp;#x201D; styles like the underline on ins elements. &amp;#x2022; Yahoo! breaks font style inheritance by applying initial values (e.g. font-weight: normal) to all elements. &amp;#x2022; Meyer: right thing to do is use inherit, which IE6/7 do not support, so leave these styles alone.
  34. &amp;#x2022; Meyer removes :focus (pseudo-class) outlines and other &amp;#x201C;critical&amp;#x201D; styles like the underline on ins elements. &amp;#x2022; Yahoo! breaks font style inheritance by applying initial values (e.g. font-weight: normal) to all elements. &amp;#x2022; Meyer: right thing to do is use inherit, which IE6/7 do not support, so leave these styles alone.
  35. &amp;#x2022; lack of :focus outline huge accessibility issue by default &amp;#x2022; vote &amp;#x2022; YUI is a better choice if you want to ignore the details
  36. &amp;#x2022; apparent differences mostly meaningless &amp;#x2022; last row is the only important one
  37. 24 columns
  38. 24 columns
  39. 24 columns
  40. 24 columns
  41. 24 columns
  42. 24 columns
  43. 24 columns
  44. 24 columns
  45. 24 columns
  46. 24 columns
  47. 24 columns
  48. 24 columns
  49. 24 columns
  50. 24 columns
  51. 24 columns
  52. 24 columns
  53. 24 columns
  54. 24 columns
  55. 24 columns
  56. &amp;#x2022; choice of 12 or 16 columns &amp;#x2022; don&amp;#x2019;t be fooled by &amp;#x201C;960 is 10 better than Blueprint&amp;#x2019;s 950!&amp;#x201D; due to outer margins, it&amp;#x2019;s actually 10 worse! &amp;#x2022; I&amp;#x2019;m a Star Trek fan, but even I think those alpha/omega class names are wanky
  57. &amp;#x2022; choice of 12 or 16 columns &amp;#x2022; don&amp;#x2019;t be fooled by &amp;#x201C;960 is 10 better than Blueprint&amp;#x2019;s 950!&amp;#x201D; due to outer margins, it&amp;#x2019;s actually 10 worse! &amp;#x2022; I&amp;#x2019;m a Star Trek fan, but even I think those alpha/omega class names are wanky
  58. &amp;#x2022; choice of 12 or 16 columns &amp;#x2022; don&amp;#x2019;t be fooled by &amp;#x201C;960 is 10 better than Blueprint&amp;#x2019;s 950!&amp;#x201D; due to outer margins, it&amp;#x2019;s actually 10 worse! &amp;#x2022; I&amp;#x2019;m a Star Trek fan, but even I think those alpha/omega class names are wanky
  59. &amp;#x2022; choice of 12 or 16 columns &amp;#x2022; don&amp;#x2019;t be fooled by &amp;#x201C;960 is 10 better than Blueprint&amp;#x2019;s 950!&amp;#x201D; due to outer margins, it&amp;#x2019;s actually 10 worse! &amp;#x2022; I&amp;#x2019;m a Star Trek fan, but even I think those alpha/omega class names are wanky
  60. &amp;#x2022; choice of 12 or 16 columns &amp;#x2022; don&amp;#x2019;t be fooled by &amp;#x201C;960 is 10 better than Blueprint&amp;#x2019;s 950!&amp;#x201D; due to outer margins, it&amp;#x2019;s actually 10 worse! &amp;#x2022; I&amp;#x2019;m a Star Trek fan, but even I think those alpha/omega class names are wanky
  61. &amp;#x2022; choice of 12 or 16 columns &amp;#x2022; don&amp;#x2019;t be fooled by &amp;#x201C;960 is 10 better than Blueprint&amp;#x2019;s 950!&amp;#x201D; due to outer margins, it&amp;#x2019;s actually 10 worse! &amp;#x2022; I&amp;#x2019;m a Star Trek fan, but even I think those alpha/omega class names are wanky
  62. &amp;#x2022; choice of 12 or 16 columns &amp;#x2022; don&amp;#x2019;t be fooled by &amp;#x201C;960 is 10 better than Blueprint&amp;#x2019;s 950!&amp;#x201D; due to outer margins, it&amp;#x2019;s actually 10 worse! &amp;#x2022; I&amp;#x2019;m a Star Trek fan, but even I think those alpha/omega class names are wanky
  63. &amp;#x2022; choice of 12 or 16 columns &amp;#x2022; don&amp;#x2019;t be fooled by &amp;#x201C;960 is 10 better than Blueprint&amp;#x2019;s 950!&amp;#x201D; due to outer margins, it&amp;#x2019;s actually 10 worse! &amp;#x2022; I&amp;#x2019;m a Star Trek fan, but even I think those alpha/omega class names are wanky
  64. &amp;#x2022; choice of 12 or 16 columns &amp;#x2022; don&amp;#x2019;t be fooled by &amp;#x201C;960 is 10 better than Blueprint&amp;#x2019;s 950!&amp;#x201D; due to outer margins, it&amp;#x2019;s actually 10 worse! &amp;#x2022; I&amp;#x2019;m a Star Trek fan, but even I think those alpha/omega class names are wanky
  65. &amp;#x2022; choice of 12 or 16 columns &amp;#x2022; don&amp;#x2019;t be fooled by &amp;#x201C;960 is 10 better than Blueprint&amp;#x2019;s 950!&amp;#x201D; due to outer margins, it&amp;#x2019;s actually 10 worse! &amp;#x2022; I&amp;#x2019;m a Star Trek fan, but even I think those alpha/omega class names are wanky
  66. &amp;#x2022; choice of 12 or 16 columns &amp;#x2022; don&amp;#x2019;t be fooled by &amp;#x201C;960 is 10 better than Blueprint&amp;#x2019;s 950!&amp;#x201D; due to outer margins, it&amp;#x2019;s actually 10 worse! &amp;#x2022; I&amp;#x2019;m a Star Trek fan, but even I think those alpha/omega class names are wanky
  67. &amp;#x2022; choice of 12 or 16 columns &amp;#x2022; don&amp;#x2019;t be fooled by &amp;#x201C;960 is 10 better than Blueprint&amp;#x2019;s 950!&amp;#x201D; due to outer margins, it&amp;#x2019;s actually 10 worse! &amp;#x2022; I&amp;#x2019;m a Star Trek fan, but even I think those alpha/omega class names are wanky
  68. &amp;#x2022; choice of 12 or 16 columns &amp;#x2022; don&amp;#x2019;t be fooled by &amp;#x201C;960 is 10 better than Blueprint&amp;#x2019;s 950!&amp;#x201D; due to outer margins, it&amp;#x2019;s actually 10 worse! &amp;#x2022; I&amp;#x2019;m a Star Trek fan, but even I think those alpha/omega class names are wanky
  69. &amp;#x2022; choice of 12 or 16 columns &amp;#x2022; don&amp;#x2019;t be fooled by &amp;#x201C;960 is 10 better than Blueprint&amp;#x2019;s 950!&amp;#x201D; due to outer margins, it&amp;#x2019;s actually 10 worse! &amp;#x2022; I&amp;#x2019;m a Star Trek fan, but even I think those alpha/omega class names are wanky
  70. &amp;#x2022; choice of 12 or 16 columns &amp;#x2022; don&amp;#x2019;t be fooled by &amp;#x201C;960 is 10 better than Blueprint&amp;#x2019;s 950!&amp;#x201D; due to outer margins, it&amp;#x2019;s actually 10 worse! &amp;#x2022; I&amp;#x2019;m a Star Trek fan, but even I think those alpha/omega class names are wanky
  71. &amp;#x2022; choice of 12 or 16 columns &amp;#x2022; don&amp;#x2019;t be fooled by &amp;#x201C;960 is 10 better than Blueprint&amp;#x2019;s 950!&amp;#x201D; due to outer margins, it&amp;#x2019;s actually 10 worse! &amp;#x2022; I&amp;#x2019;m a Star Trek fan, but even I think those alpha/omega class names are wanky
  72. &amp;#x2022; choice of 12 or 16 columns &amp;#x2022; don&amp;#x2019;t be fooled by &amp;#x201C;960 is 10 better than Blueprint&amp;#x2019;s 950!&amp;#x201D; due to outer margins, it&amp;#x2019;s actually 10 worse! &amp;#x2022; I&amp;#x2019;m a Star Trek fan, but even I think those alpha/omega class names are wanky
  73. &amp;#x2022; fixed sizes are expressed in ems, even for pixel-width layouts &amp;#x2022; result: very difficult to tweak the grid for exceptions, special effects
  74. &amp;#x2022; fixed sizes are expressed in ems, even for pixel-width layouts &amp;#x2022; result: very difficult to tweak the grid for exceptions, special effects
  75. &amp;#x2022; fixed sizes are expressed in ems, even for pixel-width layouts &amp;#x2022; result: very difficult to tweak the grid for exceptions, special effects
  76. &amp;#x2022; fixed sizes are expressed in ems, even for pixel-width layouts &amp;#x2022; result: very difficult to tweak the grid for exceptions, special effects
  77. &amp;#x2022; fixed sizes are expressed in ems, even for pixel-width layouts &amp;#x2022; result: very difficult to tweak the grid for exceptions, special effects
  78. &amp;#x2022; fixed sizes are expressed in ems, even for pixel-width layouts &amp;#x2022; result: very difficult to tweak the grid for exceptions, special effects
  79. &amp;#x2026;what bugs you about the code I have shown you so far?
  80. Use class with semantics in mind (W3C QA Tip) http://www.w3.org/QA/Tips/goodclassnames
  81. Use class with semantics in mind (W3C QA Tip) http://www.w3.org/QA/Tips/goodclassnames
  82. Use class with semantics in mind (W3C QA Tip) http://www.w3.org/QA/Tips/goodclassnames
  83. Use class with semantics in mind (W3C QA Tip) http://www.w3.org/QA/Tips/goodclassnames
  84. Use class with semantics in mind (W3C QA Tip) http://www.w3.org/QA/Tips/goodclassnames
  85. Use class with semantics in mind (W3C QA Tip) http://www.w3.org/QA/Tips/goodclassnames
  86. Demo semantic class name support in Blueprint
  87. Is Andy Clarke&amp;#x2019;s &amp;#x201C;presentational thinking&amp;#x201D; while writing markup a real-world problem?
  88. &amp;#x2022; DESKTOP BACKGROUND COMPARISON!!! &amp;#x2022; I choose Blueprint if I am prototyping, or if fixed width OK. &amp;#x2022; For fluid layout, YUI Grids too painful. Do it yourself. &amp;#x2022; YUI: Amazing technical achievement (grid resizes with text), but em-based sizes too inflexible for creating special effects (e.g. overlapping block edges).
  89. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  90. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  91. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  92. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  93. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  94. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  95. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  96. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  97. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  98. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  99. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  100. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  101. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  102. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  103. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  104. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  105. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  106. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  107. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  108. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  109. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  110. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  111. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  112. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  113. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  114. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  115. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  116. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  117. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  118. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  119. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  120. &amp;#x2022; largely concerned with creating vertical rhythms &amp;#x2022; vertical rhythm improves readability, perceived polish of design &amp;#x2022; here&amp;#x2019;s how Blueprint does it
  121. &amp;#x2022; a finished layout with typographic grid &amp;#x2022; can anyone suggest how this might be made better? &amp;#x2022; a shared baseline, and that&amp;#x2019;s exactly what a new typographic grid framework called&amp;#x2014;creatively enough&amp;#x2014;Baseline aims to do. &amp;#x2022; even does it for form fields! &amp;#x2022; don&amp;#x2019;t believe in pixel font sizes? you will not like this framework
  122. &amp;#x2022; a finished layout with typographic grid &amp;#x2022; can anyone suggest how this might be made better? &amp;#x2022; a shared baseline, and that&amp;#x2019;s exactly what a new typographic grid framework called&amp;#x2014;creatively enough&amp;#x2014;Baseline aims to do. &amp;#x2022; even does it for form fields! &amp;#x2022; don&amp;#x2019;t believe in pixel font sizes? you will not like this framework
  123. &amp;#x2022; a finished layout with typographic grid &amp;#x2022; can anyone suggest how this might be made better? &amp;#x2022; a shared baseline, and that&amp;#x2019;s exactly what a new typographic grid framework called&amp;#x2014;creatively enough&amp;#x2014;Baseline aims to do. &amp;#x2022; even does it for form fields! &amp;#x2022; don&amp;#x2019;t believe in pixel font sizes? you will not like this framework
  124. &amp;#x2022; a finished layout with typographic grid &amp;#x2022; can anyone suggest how this might be made better? &amp;#x2022; a shared baseline, and that&amp;#x2019;s exactly what a new typographic grid framework called&amp;#x2014;creatively enough&amp;#x2014;Baseline aims to do. &amp;#x2022; even does it for form fields! &amp;#x2022; don&amp;#x2019;t believe in pixel font sizes? you will not like this framework
  125. &amp;#x2022; a finished layout with typographic grid &amp;#x2022; can anyone suggest how this might be made better? &amp;#x2022; a shared baseline, and that&amp;#x2019;s exactly what a new typographic grid framework called&amp;#x2014;creatively enough&amp;#x2014;Baseline aims to do. &amp;#x2022; even does it for form fields! &amp;#x2022; don&amp;#x2019;t believe in pixel font sizes? you will not like this framework
  126. &amp;#x2022; a finished layout with typographic grid &amp;#x2022; can anyone suggest how this might be made better? &amp;#x2022; a shared baseline, and that&amp;#x2019;s exactly what a new typographic grid framework called&amp;#x2014;creatively enough&amp;#x2014;Baseline aims to do. &amp;#x2022; even does it for form fields! &amp;#x2022; don&amp;#x2019;t believe in pixel font sizes? you will not like this framework
  127. &amp;#x2022; a finished layout with typographic grid &amp;#x2022; can anyone suggest how this might be made better? &amp;#x2022; a shared baseline, and that&amp;#x2019;s exactly what a new typographic grid framework called&amp;#x2014;creatively enough&amp;#x2014;Baseline aims to do. &amp;#x2022; even does it for form fields! &amp;#x2022; don&amp;#x2019;t believe in pixel font sizes? you will not like this framework
  128. &amp;#x2022; a finished layout with typographic grid &amp;#x2022; can anyone suggest how this might be made better? &amp;#x2022; a shared baseline, and that&amp;#x2019;s exactly what a new typographic grid framework called&amp;#x2014;creatively enough&amp;#x2014;Baseline aims to do. &amp;#x2022; even does it for form fields! &amp;#x2022; don&amp;#x2019;t believe in pixel font sizes? you will not like this framework
  129. &amp;#x2022; a finished layout with typographic grid &amp;#x2022; can anyone suggest how this might be made better? &amp;#x2022; a shared baseline, and that&amp;#x2019;s exactly what a new typographic grid framework called&amp;#x2014;creatively enough&amp;#x2014;Baseline aims to do. &amp;#x2022; even does it for form fields! &amp;#x2022; don&amp;#x2019;t believe in pixel font sizes? you will not like this framework
  130. &amp;#x2022; Calibri has smaller x-height that Helvetica, framework line-height is too large. &amp;#x2022; Times is a serif font, framework line-height is again too large. &amp;#x2022; Light-on-dark designs call for increased leading or they feel too noisy. &amp;#x2022; typographic grid comes with a lot of assumptions about the fonts, colours, typical line lengths, and other aspects of your design
  131. &amp;#x2022; Calibri has smaller x-height that Helvetica, framework line-height is too large. &amp;#x2022; Times is a serif font, framework line-height is again too large. &amp;#x2022; Light-on-dark designs call for increased leading or they feel too noisy. &amp;#x2022; typographic grid comes with a lot of assumptions about the fonts, colours, typical line lengths, and other aspects of your design
  132. aka &amp;#x201C;libraries&amp;#x201D;&amp;#x2014;ready-made solutions for specific tasks
  133. &amp;#x2022; real time-savers, but not tools for original design
  134. Andy Clarke&amp;#x2019;s design for The New Internationalist
  135. Andy Clarke&amp;#x2019;s design for The New Internationalist
  136. Andy Clarke&amp;#x2019;s design for The New Internationalist
  137. Andy Clarke&amp;#x2019;s design for The New Internationalist
  138. (Joke about finding a photo to represent abstraction.)
  139. (Joke about finding a photo to represent abstraction.)
  140. (Joke about finding a photo to represent abstraction.)
  141. &amp;#x201C;CSS is simple. It&amp;#x2019;s better that way. Needs to work for non-programmers.&amp;#x201D;
  142. &amp;#x2022; unfortunately no selector inheritance (mixins) &amp;#x2022; give them points for trying to slip a new word into the language&amp;#x2014;&amp;#x201C;webdesign&amp;#x201D;
  143. &amp;#x2022; by Anthony Short (from Sydney) &amp;#x2022; no colour arithmetic, but this is a non-issue in practice &amp;#x2022; installation and development workflow very smooth
  144. What do CSS frameworks do? &amp;#x2022; reset styles &amp;#x2022; horizontal grids for layout, vertical grids for text &amp;#x2022; pre-fab styles for particular types of content &amp;#x2022; make CSS more powerful with server-side processing How do you choose a CSS framework? &amp;#x2022; don&amp;#x2019;t adopt for the free code &amp;#x2022; because it contains code you agree with &amp;#x2022; buying into a shared methodology: community, open documentation, ease of training and recruitment. Are CSS frameworks pure evil? &amp;#x2022; of course not&amp;#x2014;shortcuts can be good or bad &amp;#x2022; no need to reinvent the wheel; just make it your business to know as much about the wheels you use as possible. Choose code you would have written on your best day.
  145. STOP &amp;#x2026; question time!
  146. &amp;#x2022; Object Oriented CSS by Nicole Sullivan &amp;#x2022; anecdote: the Core library &amp;#x2022; have considered a CSS book that used a framework in the same way
  147. &amp;#x2022; Object Oriented CSS by Nicole Sullivan &amp;#x2022; anecdote: the Core library &amp;#x2022; have considered a CSS book that used a framework in the same way
  148. &amp;#x2022; Object Oriented CSS by Nicole Sullivan &amp;#x2022; anecdote: the Core library &amp;#x2022; have considered a CSS book that used a framework in the same way