YUI Foundational CSS

Document Sample
YUI Foundational CSS Powered By Docstoc
					              While we’re getting ready to start, please
              download the three exercises from:
              http://yuiblog.com/devday06/yui-css/



             YUI’s Foundational CSS
                     CSS Reset, CSS Fonts, CSS Grids




                                                                                               Nate Koechley
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   Platform Engineering, Yahoo!
                                                                                                           1
             YUI’s Foundational CSS
                     CSS Reset, CSS Fonts, CSS Grids




                                                                                               Nate Koechley
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   Platform Engineering, Yahoo!
                                                                                                           2
                      About me…
                      natek@yahoo-inc.com


      • YUI team:
            – Engineer and Design Liaison
            – Technical Evangelist
      • Graded Browser Support…
            …and browser vendor coordination
      • http://yuiblog.com
      • http://nate.koechley.com/blog

Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   3
                      What we’ll cover…

      • Background and YUI CSS Goals
      • Hands-on with CSS Reset
      • Hands-on with CSS Fonts
      • Hands-on with CSS Grids
            – What It Does (x3)
            – Using It (x3)



Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   4
                      CSS is Accretive…

      • An element’s presentation accumulates
        substance from every rule that touches it
            – via direct declaration, cascade, inheritance


      • Put another way:
            – CSS rules build on one another




Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   5
                      CSS’s Two Mechanisms

      • Cascade
            – many rules  single element
      • Inheritance
            – single rule  many elements



      (And don’t forget about cascading inheritance, of course.)



Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   6
                      CSS is Accretive… (cont’d)

      • The accretive aspects of CSS –
        cascade and inheritance – are the
        source of CSS’s power…




Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   7
                      CSS is Accretive… (cont’d)

      … but also a source of vulnerability:

      A worrying equation:
             Slight disagreement on foundational rules
         + Slight disagreement on application of rules
      ----------------------------------------------------------------
         = Dramatic compounded difference!


Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   8
                      YUI CSS Goals

      1. Normalize and stabilize
            •      Sound foundation enables sane
                   development
      2.        Maximize Availability and Accessibility
      3.        Centralize wheel invention
      4.        Centralize kludges
      5.        A-Grade Browser Support
      6.        Support Yahoo! Specifications
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   9
                      The Three Tools

      1. CSS Reset
      2. CSS Fonts
      3. CSS Grids




Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   10
                      YUI Reset – What it Does
                      http://developer.yahoo.com/yui/reset


      • Cross-browser normalization of the
        default rendering of HTML elements
            – Overcome browser.css
            – Level the playing field




Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   11
                      Removes common “default”
                      presentation

      • Helps ensure all style is declared
        intentionally
            – You choose how you want to <em>phasize
              something
      • Allows us to choose elements based on
        their semantic meaning instead of their
        “default” presentation
            – You choose how you want to render <li>sts
      • A-Grade Browser Support
Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   12
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,p,blockquote,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%;}
q:before,q:after
  {content:'';}
                      Using YUI Reset
                      http://developer.yahoo.com/yui/reset

   • Step 1: Say what you mean.
   • (there is no Step 2)
                       strong {font-weight:bold;}
                       h1 {margin-bottom:1em;}

                       li {
                       background:transparent
                       url(dot.gif)
                       no-repeat left 6px;
                       padding:0 0 0 .55em;
                       }

Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   14
                      YUI Fonts – What it Does…
                      http://developer.yahoo.com/yui/fonts

      • Consistent font sizing and line-height
      • Appropriate cross-OS font-family
        degradation paths
            – e.g., arial, helvetica, sans-serif
      • Not fixed, so users can adjust the font
        size within their browser
            – Even when adjusted, better cross-browser
              consistency


Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   15
                      YUI Fonts – What it Does (cont’d)
                      http://developer.yahoo.com/yui/fonts

      • Works in both Quirks Mode and
        Standards Mode
            – A centralized “kludge” (was “hack”, but…)
            – We develop with HTML 4.01 Strict which
              puts us in Standards Mode
      • Normalizes “em” size (almost)
            – Allows font-size-responsive positioning
      • A-Grade Browser Support

Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   16
                      YUI Fonts – What it Does (cont’d)
                      http://developer.yahoo.com/yui/fonts


      • For free:
            – Font-family: Arial (except per OS)
            – Font-size = 13px (not pixels)
            – Line-height = 16px (not pixels)
      • Consistent em dimension.




Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   17
                      Using YUI Fonts: Setting Size

      To get pixel size         Use this percentage                       http://developer.yahoo.com
      10px                      77%                                       /yui/fonts/#using
      11px                      85%
      12px                      92%
      13px                      100%
      14px                      107%               h1 {font-size:136%;}
      15px                      114%               #node {font-size:77%;}
      16px                      122%
      17px                      129%
      18px                      136%
      19px                      144%
      20px                      152%

Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006                     18
                      Using YUI Fonts: Setting Font

 We use:
       – Arial (default)
       – Verdana
                                         h1 {font-family:georgia;}
       – Georgia                         #node {font-family:verdana;}
       – Tahoma                          .error {
       – Monospace                            font-size:77%;
                                              font-family:verdana;
                                              color:red;
                                         }


Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   19
                      Hands-on Exercise #1

  1. Open hackday-exercise1.html
  2. Match these specs:

                                                                           16 pixels

                                                                           Verdana 11 pixels and grey
                                                                           (#666)



                                                                           italic
                                                                           1em margin at the bottom of
                                                                           each paragraph and after
                                                                           source/timestamp


Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006                           20
                      YUI Grids – What it Does
                      http://developer.yahoo.com/yui/grids


      “The safe and easy way to create complex
        page and template layouts that are
        bulletproof and flexible.”


      • 130+ layouts from single efficient CSS file
            – (under 1.9kb)
      • Recursive, extensible system

Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   21
                      YUI Grids – What it Does (cont’d)
                      http://developer.yahoo.com/yui/grids


      • Scale with font-size adjustment
      • Source-order independent
      • Self-clearing footer
      • Fits all IAB Advertising Units
      • Forward-compatible (coming soon!)
      • A-Grade Browser Support


Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   22
                      How It Works…

      Two Components:
            1. Templates
            2. Subdivide with Grids and Units




Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   23
                      How It Works… (cont’d)

      • Choose a template (yui-t1…yui-t7)




Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   24
<body>
<div id="doc” class=“yui-t1”>
 <div id="hd"></div>
 <div id="bd">
    <div id=“yui-main”>
        <div class=“yui-b”></div>
    </div>
    <div class=“yui-b”></div>
 </div>
 <div id="ft"></div>
</div>
                      Hands-on Exercise #2

  1. Open hackday-exercise2.html
  2. Switch top-level template (yui-t1)
  3. Experiment with source-order control




Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   26
                      How It Works… (cont’d)

                                         • “Recursively subdivide”
                                         • Based on “grids”
                                           holding “units”


                                         • Custom “grids” for non-
                                           even unit distribution


Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   27
The Base Case:



.yui-g
    .yui-u first
    .yui-u
The Base Case:



.yui-g (tells children to take 50%)
    .yui-u first (obey parent)
    .yui-u (obey parent)
The Base Case:



<div class=“yui-g”>
  <div class=“yui-u first”></div>
  <div class=“yui-u”></div>
</div>
1. You Can Nest Grids.
2. Units and Grids can both be within Grids.

<div class=“yui-g”>
  <div class=“yui-u first”></div>
  <div class=“yui-g”>
    <div class=“yui-u first”></div>
    <div class=“yui-u”></div>
  </div>
</div>
What % does each take up?



<div class=“yui-g”>
 <div class=“yui-u first”></div>
 <div class=“yui-g”>
    <div class=“yui-u first”></div>
    <div class=“yui-u”></div>
 </div>
</div>
Special Grids (yui-g[a...f])



<div class=“yui-gb”>
 <div class=“yui-u first”>33%</div>
 <div class=“yui-u”>33%</div>
 <div class=“yui-u”>33%</div>
</div>
. . .
<div id=“bd”>
  <div class=“yui-b”></div>
  <div id=“yui-main”>
    <div class=“yui-b”>
      <div class=“yui-g”>
        <div class=“yui-u first”></div>
        <div class=“yui-u”></div>
      </div>
    </div>
  </div>
</div>
. . .
<div class=“yui-b”>
  <div class=“yui-g”>
    <div class=“yui-g first”>
        <div class=“yui-u first”></div>
        <div class=“yui-u”></div>
    </div>
    <div class=“yui-g”>
        <div class=“yui-u first”></div>
        <div class=“yui-u”></div>
    </div>
  </div>
</div>
.yui-g
  .yui-g first
     .yui-u first
     .yui-u
  .yui-g
     .yui-u first
     .yui-u
.yui-g (tells children to take 50%)
  .yui-g first (half of parent & children take half)
     .yui-u first (half of parent)
     .yui-u (half of parent)
  .yui-g (half of parent & children take half)
     .yui-u first (half of parent)
     .yui-u (half of parent)
                      Hands-on Exercise #3

                                       1.    Open hackday-exercise3.html
                                       2.    Experiment stacking grids
                                       3.    Experiment nesting grids
                                       4.    Experiment with custom grids




Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   38
                      Thanks!

      • Available for questions all day and night
            – In Clasroom 1 and Classroom 6
            – Wandering around
      • Hack on, hackers




Nate Koechley – natek@yahoo-inc.com – Yahoo! Hack Day, September 29/30th, 2006   39