YUIs CSS Foundation

1
YUIs CSS Foundation

• Nate Koechley
• 25 Oct 2007, Yahoo!
• natek_at_yahoo-inc.com

2
Welcome.
3
(No Transcript)
4
Yahoo! User Interface (YUI)

• Documentation
• developer.yahoo.com/yui
• Mailing list
• groups.yahoo.com/group/ydn-javascript
• Blog
• yuiblog.com
• Nate Koechley
• natek_at_yahoo-inc.com

5
The User Interface

• HTML

CSS
JavaScript
6
The User Interface
CSS

• HTML

JavaScript
7
CSS is different.Property values from anywhere
and everywhere mingle and conflate before a final
value is calculated.
8
Powerful but risky.Enables elegance.But a bit
brittle.
9
CSS is accretive.

• Rule 1

Computed Style
Rule 2
10
Two primary layering models

• The Cascade model
• Rules are sorted according to weight and origin.
• The Inheritance model
• Some properties are passed to descendent nodes,
  some of which can accept them.
• (Tricky when values repeat, like "80")

11
The Cascade
Rule 1
Computed Style
Rule 2
12
Inheritance
Parent node
Child node
Grandchild
Rule 1
13
Errors and discrepancies are transferred equally
efficiently.
14
Goals of YUI CSS

• Provide stability
• Normalize differences
• Solve recurring problems
• Centrally manage complexity

15
YUI CSS Components

• Reset a clean foundation
• Fonts typographical control
• Grids layout and page control
• Base basic helper/snippets lib

16
"Base" is an outsider

• Foundation
• Reset
• Fonts
• Grids

• Helpers
• Base

17

• Grids
• Fonts
• Reset

18
Including YUI CSS

• Recommended
• Use ltlinkgt
• Use http//yui.yahooapis.com
• Concatenate with your own CSS
• More info
• http//developer.yahoo.com/performance/

19
Including Reset.css

• href"
• http//yui.yahooapis.com/
• 2.3.1/
• build/
• reset/reset-min.css"

20
Including Fonts.css

• href" http//yui.yahooapis.com/
• 2.3.1/
• build/
• fonts/fonts-min.css"

21
Including Grids.css

• href" http//yui.yahooapis.com/
• 2.3.1/
• build/
• grids/grids-min.css"

22
Pre-Concatenated Version

• href" http//yui.yahooapis.com/
• 2.3.1/
• build/
• reset-fonts-grids/
• reset-fonts-grids.css"
• (concatenated files are "min" by definition)

23
Using YUI Grids

• Control overall page width and centering.
• Six preset templates accommodate all IAB ad unit
  sizes nearly all Y! pages.
• Easily create nested multi-column regions.

24
4kb
25
A black box system.
26
Using YUI Grids

• Control overall page width and centering.
• Six preset templates accommodate all IAB ad unit
  sizes nearly all Y! pages.
• Easily create nested multi-column regions.

27
Part I Overall Page Width

• 750px centered
• 950px centered
• 974px centered
• 100 fluid
• (easy to customize, but that should be rare.)

28
750px, centered
29
750px, centered
30
750px, centered
31
950px, centered
32
950px, centered
33
974px, centered
34
974px, centered
35
974px, centered
36
100 fluid
37
100 fluid
38
Control the page from the root node.
39
The root node

• ltbodygt
• ltdivgtlt/divgt
• lt/bodygt

40
Why a div? Isnt that "divitis?"
41
What are DIVs for?

• "The DIV element, in conjunction with id and
  class attributes, offers a generic mechanism for
  adding structure to documents."

42
The root node

• ltbodygt
• ltdivgtlt/divgt
• lt/bodygt

43
Available ID values

• 750px centered doc
• 950px centered doc2
• 974px centered doc4
• 100 fluid doc3

44
750px centered document

• ltbodygt
• ltdiv id"doc"gtlt/divgt
• lt/bodygt

45
950px centered document

• ltbodygt
• ltdiv id"doc2"gtlt/divgt
• lt/bodygt

46
974px centered document

• ltbodygt
• ltdiv id"doc4"gtlt/divgt
• lt/bodygt

47
100 fluid document

• ltbodygt
• ltdiv id"doc3"gtlt/divgt
• lt/bodygt

48
Notes

• Page widths are defined with EMs. This means the
  page will expand when users zoom this fonts.
• Its easy to lock it down if you must.

49
Locking the page width

• Fluid by default
• doc2
• width73.074emwidth71.313em
• Easy to lock with local override
• doc2
• width950px

50
Notes

• Page widths are defined with EMs. This means the
  page will expand when users zoom this fonts. Its
  easy to lock it down if you must.
• The divdoc can hold anything.

51
doc can hold anything

• ltbodygt
• ltdiv id"doc"gt
• ltdiv id"hd"gtlt/divgt
• ltdiv id"bd"gtlt/divgt
• ltdiv id"ft"gtlt/divgt
• lt/divgt
• lt/bodygt

52
Notes

• Page widths are defined with EMs. This means the
  page will expand when users zoom this fonts. Its
  easy to lock it down if you must.
• The divdoc can hold anything.
• Centering isamazinglystill non-trivial across
  the range of A-Grade browsers.

53
(A quick aside about Graded Browser Support.)
54
Graded Browser Support

• Whitelist of browsers that enjoy A-Grade support
  from YUI Yahoo!

http//developer.yahoo.com/yui/articles/gbs
55
(OK, now back to Grids.)
56
Using YUI Grids

• Control overall page width and centering.
• Six preset templates accommodate all IAB ad unit
  sizes and the vast majority of Y! pages.
• Easily create nested multi-column regions.

57
(No Transcript)
58
(No Transcript)
59
The narrow column is fixed width. The main
column gets the rest.The size of their parent
is irrelevant.
60
Template 1 160px left
61
Template 2 180px left
62
Template 3 300px left
63
Template 4 180px right
64
Template 5 240px right
65
Template 6 300px right
66
(No Transcript)
67
(No Transcript)
68
2 columns 2 content blocks
69
Two content blocks

• ltdiv id"doc"gt
• ltdiv class"yui-b"gtlt/divgt
• ltdiv class"yui-b"gtlt/divgt
• lt/divgt

70
Now, identify the main block.
71
identify the main block

• ltdiv id"doc"gt
• ltdiv id"yui-main"gt
• ltdiv class"yui-b"gtlt/divgt
• lt/divgt
• ltdiv class"yui-b"gtlt/divgt
• lt/divgt

72
Now, choose a template class.
73
Available Template Classes

• left 160px .yui-t1
• left 180px .yui-t2
• left 300px .yui-t3
• right 180px .yui-t4
• right 240px .yui-t5
• right 300px .yui-t6

74
Set the templateon the root DIV.
75
Set the template at the root

• ltdiv id"doc" class"yui-t3"gt
• ltdiv id"yui-main"gt
• ltdiv class"yui-b"gtlt/divgt
• lt/divgt
• ltdiv class"yui-b"gtlt/divgt
• lt/divgt

76
Hidden featureSource order independence.
77
Source order Independence

• The order of the blocks does not impact the
  layout.
• Put important content first to boost
  Accessibility, Usability, and SEO

78
Using YUI Grids

• Control overall page width and centering.
• Six preset templates accommodate all IAB ad unit
  sizes nearly all Y! pages.
• Easily create nested multi-column regions.

79
Nested Grids

• Use nested grids when you need divisions of space
  beyond templates.
• Nested grids are based on a simple markup
  microformat.

80
The basic microformat

• Grid holder .yui-g
• Units .yui-u
• ltdiv class"yui-g"gt
• ltdiv class"yui-u"gtlt/divgt
• ltdiv class"yui-u"gtlt/divgt
• lt/divgt

81
Each unit takes up half.(half of anything -
doesnt care)

• .yui-g

.yui-u
.yui-u
82
One more step .first

• Grid holder .yui-g
• Units .yui-u
• First unit .first
• ltdiv class"yui-g"gt
• ltdiv class"yui-u first"gtlt/divgt
• ltdiv class"yui-u"gtlt/divgt
• lt/divgt

83
Each unit takes up half.Gutters are voids
between them.

• .yui-g

.yui-u .first
.yui-u
84
What about four (22)?
85
Nest again for four columns

• div.yui-g
• div.yui-g.first
• div.yui-u.first /div
• div.yui-u /div
• /div
• div.yui-g
• div.yui-u.first /div
• div.yui-u /div
• /div
• /div

86
What about three columns? What about uneven
distributions?
87
Special Grid Holders

• For three columns
• .yui-gb 1/3 -- 1/3 -- 1/3
• For uneven distributions
• .yui-gc 2/3 -- 1/2
• .yui-gd 1/3 -- 2/3
• .yui-ge 3/4 -- 1/4
• .yui-gf 1/4 -- 3/4

88
Uneven columns (for example 1/32/3)

• div.yui-gd
• div.yui-u.first /div
• div.yui-u /div
• /div

.yui-gd
.yui-u.first
.yui-u
89
Divide into three

• div.yui-gb
• div.yui-u.first /div
• div.yui-u /div
• div.yui-u /div
• /div

.yui-gb
.yui-u.first
.yui-u
.yui-u
90
Grids are Stackable
.yui-gd
.yui-u.first
.yui-um
.yui-gb
.yui-u.first
.yui-u
.yui-u
91
Nested Grids
1
1/3
1/3
1/3
1
1/3
1/3
1/3
92
Lets review

• Page Width divdoc
• Templates .yui-t1
• Grids .yui-g .yui-u
• Fills any space.
• Nestable stackable.
• Sweet! You can now make intricate layouts safely
  and quickly.

93
(No Transcript)
94
Using YUI Fonts

• Mostly automatic.
• Reliably set font sizes.
• Other niceties.

95
For free

• Arial (and fallbacks)
• 13px font size
• 16px line height

96
Using YUI Fonts

• Mostly automatic.
• Reliably set precise font sizes.

97
Use Percentages ()

• 10px 77
• 11px 85
• 12px 93
• 13px 100
• 14px 108
• 15px 116
• 16px 123.1

98
Dont use pixels

• Pixel sizes break IEs ability to zoom fonts.

Always use percentages
h1 font-size123.1 .hd h1 font-size77
99
Using YUI Fonts

• Mostly automatic.
• Reliably set precise font sizes.
• Other niceties.

100
Allows User Zooming

• Yes.
• Fonts and Grids combine to preserve user zooming.

Delivers OS-appropriate Fonts
Yes. Happens for free.
101
Fonts Tip

• Avoid using the font shorthand because it is
  parsed inconsistently across browsers.

102
Using YUI Reset

• Lowest-level piece of YUI CSS
• Creates a clean and sturdy foundation.

103
Quiz

• What is the default visualization of the STRONG
  element?
• Of the UL LI element?

104
AnswerHTML has no visualization.
105
Where does it come from?

• Browsers contains a browser.css file.
• Fine, but theyre all different.
• Reset.css removes everything.

106
What does Reset do?

• Sets margin and padding to zero
• Sets borders to zero
• Removes visual list style (ol, ul, dl)
• Sets fonts to 100 of base
• Sets font-weight font-style to normal
• Etc

107
Using Reset

• Nothing to learn, but youll need to be explicit.
• Browsers are good at guessing, but even better at
  following directions.
• Its a good reminder that HTML should be chosen
  based on content alone.

108
Using YUI Base

• Almost a "snippets" library.
• Gives back what Reset removes.
• Great for linear HTML content pages.

109
A page with Grids Base
110
YUI CSS Summary

• Reset a clean foundation
• Fonts typographical control
• Grids layout and page control
• Base basic helper/snippets lib

111
Other YUI CSS Notes

• Calculating EMs
• Customizing Template Presets

112
Calculating EMs

• Pixel width / 13px EM width
• EM width x 0.9759 IEs EM width
• custom-doc
• width46.15em/ non-IE
• width45.04em/ IE /

113
Customizing Templates

• .yui-t2 .yui-b
• floatleft
• width13.8456em
• width13.512em
• .yui-t2 yui-main .yui-b
• margin-left14.8456em
• margin-left14.512em

114
Thank you.

• natek_at_yahoo-inc.com

115
More Information

• Documentation
• http//developer.yahoo.com/yui
• Mailing list
• http//groups.yahoo.com/group/ydn-javascript
• Blog
• http//yuiblog.com
• Nate Koechley
• natek_at_yahoo-inc.com

116
CC Image Credits

• Pyramide Inversée http//www.flickr.com/photos/dr
  odriguez/117818017/
• Cusco Qoricancha Inca foundations
• http//www.flickr.com/photos/yandi/364125159/
• Three-legged Stool
• http//www.mnartists.org/work.do?rid34382
• Enjoy the openness
• http//www.flickr.com/photos/perfhex/293118214/
• Night Lights
• http//www.flickr.com/photos/fornal/391746944/
• Helvetica
• http//www.flickr.com/photos/redsil/490734685/