...

Using Cascading Style Sheets (CSS) with Roxen CMS

by user

on
Category: Documents
5

views

Report

Comments

Transcript

Using Cascading Style Sheets (CSS) with Roxen CMS
en
ith x
w Ro
e
ow r
N mo
0%
10
Developing with Style
Using Cascading Style Sheets with Roxen CMS
Michael D. Muzzie
Web Development Services
Wednesday, November 18, 2009
1
What is CSS?
Style sheet language that describes the look
and feel of a markup language
Allows separation of presentation from
content
International standard with predictable display
output across modern platforms
Evolving standard, CSS1 (1996), CSS2 (1998),
CSS2.1 (~2007), and CSS3 (under dev.)
Wednesday, November 18, 2009
2
Why CSS?
Minimizes the nightmare of excessive code
forking
Encourages logical consistency
Allows sweeping style changes
Potentially faster loading, leaner pages
If you use a CMS, flexibility of CSS is invaluable
Wednesday, November 18, 2009
3
CSS cons
Internet Explorer 6. Internet Explorer 7.
Internet Explorer 8.
A typo can disable your style sheets.Validate.
Sloppy use of the cascade across multiple style
sheets gets confusing.
Multiple ways to achieve the same effect. Not
all combinations work together though.
Wednesday, November 18, 2009
4
CSS cons, continued
To use effectively, you need to understand the
raw CSS code and the HTML structure.
Layout can be difficult, esp. vertical placement
Your website will not look the same in every
browser. Deal with it.
Did I mention Internet Explorer?
BringDownIE6.com
Wednesday, November 18, 2009
5
Anatomy of a CSS tag
selector {
property1: somevalue;
property2: somevalue;
property3: somevalue;
}
Wednesday, November 18, 2009
6
Anatomy of a CSS tag
body {
font-size: small;
color: #333333;
padding: 15px;
}
body{font-size:small;color:#333333;padding:15px;}
Wednesday, November 18, 2009
7
CSS selectors
Tag (type) selectors
p { property: value; }
Class selectors
.funkytext { property: value; }
ID selectors
#footer { property: value; }
Grouped selectors
h2, h3, h4 { property: value; }
Descendent selectors
#footer p { property: value; }
Pseudo-class selectors
a:link { property: value; }
Wednesday, November 18, 2009
8
CSS selectors, continued
Broken in IE6, may be buggy in IE7
Universal selector
* { property: value; }
Child selectors
ul > li { property: value; }
Adjacent sibling selector
h1 + h2 { property: value; }
Attribute selectors
input[type="submit"] { property: value; }
Pseudo-element selector (no IE7)
p:before { property: value; }
a:after { property: value; }
Wednesday, November 18, 2009
9
Applying CSS to a document
Inline stylesheets
Embedded stylesheets
External Stylesheets
Linked
Imported
Wednesday, November 18, 2009
10
Code - Inline styles
(Added via an RXML component, inside the
FCKEditor source view, or via an XSL file)
(code inside <body> tags)
<div style="color:#f60;font-weight:bold;margin-top:1em;">
example text
</div>
Wednesday, November 18, 2009
11
Code - Embedded styles
(usually via local XSL, custom-head-element template)
(two examples of code inside <head> tags)
<style type="text/css">
<!-#footer {
color:#f60;
font-weight:bold;
margin-top:1em;
}
-->
</style>
<style type="text/css">
<!-.barfoo {
color:#867539;
text-indent:1em;
margin:1em;
}
-->
</style>
(two examples of code inside <body> tags)
<div id="footer">
example text
</div>
Wednesday, November 18, 2009
<div class="barfoo">
example text
</div>
12
Code - External styles (linked)
(code inside <head> tags)
<link href="example.css" rel="stylesheet" type="text/css" media="all" />
(code inside <body> tags)
<div id="footer">
example text
</div>
(code in external style sheet)
#footer {
color:#f60;
font-weight:bold;
margin-top:1em;
}
Wednesday, November 18, 2009
13
Code - External styles (imported)
(code inside <head> tags)
<style type="text/css">
<[email protected] url("example.css") all;
-->
</style>
(code inside <body> tags)
<div id="footer">
example text
</div>
(code in external style sheet)
#footer {
color:#f60;
font-weight:bold;
margin-top:1em;
}
Wednesday, November 18, 2009
14
CSS Media Types
all - Suitable for all devices.
aural - Intended for speech synthesizers.
braille - Intended for braille tactile feedback devices.
embossed - Intended for paged braille printers.
handheld - Intended for older handheld devices (small screen, monochrome, limited bandwidth).
print - Intended for paged, opaque material and for documents viewed on screen in print preview mode.
projection - Intended for projected presentations, for example projectors or print to transparencies.
screen - Intended primarily for color computer screens.
tty - Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices
with limited display capabilities. Authors should not use pixel units with the "tty" media type.
tv - Intended for older "web TV" television-type devices (low resolution, color, limited scrolling).
Wednesday, November 18, 2009
15
Roxen CMS: style sheet includes
Component CSS
/
Theme CSS
/
common/
css/
component.css
Local CSS
/
wwwdept_themes/
foobar/
css/
dept-root/
css/
custom.css
forms-and-response.css
aural.css
custom-handheld.css
forms.css
braille.css
custom-print.css
msie.css
handheld.css
msie.css
news-spotlight-comp.css
msie5.css
reset_styles.css
msie6.css
print.css
style.css
Wednesday, November 18, 2009
These 4 local CSS files are
auto-detected by XSL
Their file names are set in
/templates/params.xsl
16
The cascade
Provides a set of rules to determine which styles take priority
when an element is affected by multiple style rules.
Priority order (lowest to highest) if two style rules have the
same weight
Browser default styles
External style sheets (latter overrides former)
Embedded styles
Inline styles
The !important declaration (last resort)
Internal priority (lowest to highest)
element
.class
#id
Wednesday, November 18, 2009
17
The cascade - inheritance
<body>
<h1>Cascade example</h1>
<p>Lorem ipsem dolor sit amet, consectetur sed
do eiusmod <span>adipisicing <em>example</em> elit</span>.
</p>
</body>
body { font-face: Arial; color: #333333;}
span { color: #ff66CC;}
em { color: #ffffff;}
body > p > span > em
Cascade example
Lorem ipsem dolor sit amet, consectetur sed
do eiusmod adipisicing example elit.
Wednesday, November 18, 2009
Every child inherits
the style of its parent
and its parent’s parent
(etc.) unless a more
specifically applied
style overrides that
inheritance.
18
The cascade - keeping DRY
Don’t
Wednesday, November 18, 2009
19
The cascade - keeping DRY
Repeat
Wednesday, November 18, 2009
20
The cascade - keeping DRY
Yourself
Wednesday, November 18, 2009
21
The cascade - keeping DRY
Don’t Repeat Yourself. The more times you
repeat a block of code, the more work you
make for yourself or others when you have to
change that code. And you will eventually have
to change it. Really.You will. Then you will hate
yourself, and/or curse the original
author of the style sheets.
Try not to be overly specific with your
selectors unless necessary.
Wednesday, November 18, 2009
22
The cascade - keeping DRY
#home #bannerphoto {
background: #FFFFFF url(/foobar/banner-home.jpg) no-repeat center center;
height:250px;
padding:10px;
width:680px;
}
#services #bannerphoto {
background: #FFFFFF url(/foobar/services.jpg) no-repeat center center;
height:150px;
padding:10px;
width:680px;
}
#contact #bannerphoto {
background: #FFFFFF url(/foobar/contact.jpg) no-repeat center center;
height:150px;
padding:10px;
width:680px;
}
#news #bannerphoto {
background: #FFFFFF url(/foobar/news.jpg) no-repeat center center;
height:150px;
padding:10px;
width:680px;
}
Wednesday, November 18, 2009
23
The cascade - keeping DRY
#bannerphoto {
background: #FFFFFF url(/foobar/banner-home.jpg) no-repeat center center;
height:150px;
padding:10px;
width:680px;
}
#home #bannerphoto {
height:248px;
}
#services #bannerphoto {
background-image: url(/foobar/services.jpg);
}
#contact #bannerphoto {
background-image: url(/foobar/contact.jpg);
}
#news #bannerphoto {
background-image: url(/foobar/news.jpg);
}
Wednesday, November 18, 2009
24
Specificity calculation
a➝ids, b➝classes, c➝elements
li
a=0 b=0 c=1
specificity =
1
ul li
a=0 b=0 c=2
ul ol li
a=0 b=0 c=3
specificity =
specificity =
2
3
li.foobar
a=0 b=1 c=1
specificity = 11
ul ol li.foobar
a=0 b=1 c=3
specificity = 13
#whatever
a=1 b=0 c=0
specificity = 100
Wednesday, November 18, 2009
25
A few priority examples
theme CSS ➝ a.normal {color: red;}
local CSS ➝ .normal {color: orange;}
theme CSS ➝ ul li a {color: red;}
local CSS ➝ li a {color: orange;}
local CSS ➝ li a.normal {color: orange;}
theme CSS ➝ ul li a {color: red;}
local CSS ➝ li a {color: orange;}
<body id="programs" class= "grad">
global CSS ➝ #programs {color: red;}
theme CSS ➝ #programs {color: blue;}
theme CSS ➝ a:link {color: red;}
local CSS ➝ a {color: orange;}
global CSS ➝ #programs {color: red;}
theme CSS ➝ .grad {color: blue;}
global CSS ➝ #programs {color: red;}
global CSS ➝ .grad {color: blue;}
theme CSS ➝ #programs.grad {purple}
Wednesday, November 18, 2009
theme CSS ➝ input[type="submit"] {color: red;}
local CSS ➝ input#form-submit {color: orange;}
26
A few priority examples, 2
theme CSS ➝ a.normal {color: red;}
local CSS ➝ .normal {color: orange;}
theme CSS ➝ ul li a {color: red;}
local CSS ➝ li a {color: orange;}
local CSS ➝ li a.normal {color: orange;}
theme CSS ➝ ul li a {color: red;}
local CSS ➝ li a {color: orange;}
<body id="programs" class= "grad">
global CSS ➝ #programs {color: red;}
theme CSS ➝ #programs {color: blue;}
theme CSS ➝ a:link {color: red;}
local CSS ➝ a {color: orange;}
global CSS ➝ #programs {color: red;}
theme CSS ➝ .grad {color: blue;}
global CSS ➝ #programs {color: red;}
global CSS ➝ .grad {color: blue;}
theme CSS ➝ #programs.grad {purple}
Wednesday, November 18, 2009
theme CSS ➝ input[type="submit"] {color: red;}
local CSS ➝ input#form-submit {color: orange;}
27
Free tools - Code editor
Komodo Edit 5
Mac, Windows, Linux
Syntax highlighting
Predictive auto-complete
Free download
Warning: Snow
Leopard users must
upgrade to RAL 4.1.9
www.princeton.edu/
roxen/resources/toolkit
Wednesday, November 18, 2009
Roxen Application Launcher
Application that negotiates
between your chosen code editor
and Roxen Content Editor
28
Free tools - Firefox
Web Developer Toolbar
Wednesday, November 18, 2009
29
Free tools - Safari
Mac OS X and Windows
Safari Web Inspector
Webkit Nightly Builds, webkit.org
Wednesday, November 18, 2009
30
Free tools - IE
Internet Explorer Developer Toolbar
Sun Virtual Box
Mac, Windows, Linux, Solaris
virtualbox.org, free
XP Mode for Windows 7
(Virtual PC), free download
Wednesday, November 18, 2009
Fusion Desktop for Mac
vmware.com/mac, $39.99
31
The “div structure” - v2
<body id="{$variable}">
<div id="wrappercontainer">
www.princeton.edu/roxen/resources/
Inspired by CSS Zen Garden to allow theme
support
<div id="toolbarcontainer">
<div id="toolbar">
<div id="logolink"></div>
<div id="toolbarlinks"></div>
<div id="quicklinks"></div> <div id="searchbox"></div>
</div>
</div> <!-- close div id="toolbarcontainer" -->
<div id="wrapper">
<div id="header">
<div id="bannercontainer">
<div id="banner">
<div id="bannerphoto"></div>
</div> <!-- close div id="banner" -->
“v2” became the default only this past fall.
<div id="bannerlogo"></div>
</div> <!-- close div id="bannercontainer" -->
<div id="navalphacontainer">
Your site is only using v2 if your local cmscommon.xsl imports page-elements-v2.xsl.
<div id="navalpha">
<div id="navalphalinks"></div>
</div> <!-- close div id="navalpha" -->
</div> <!-- close div id="navalphacontainer" -->
</div> <!-- close div id="header" -->
All current themes are based on v2; legacy
themes have “-v1” appended
<div id="maincontainer">
<div id="main">
<div id="navbetacontainer">
<div id="navbeta">
<div id="uppercontent">
</div>
Most div elements have a “container” div to
allow for multiple backgrounds, etc.
</div>
</div>
Pieces of the div structure can be moved
around via XSL in the local cms-common.xsl
The wrapper does not contain the toolbar.
<div id="contentcontainer">
<div id="breadcrumbs"></div>
<div id="content">
<div id="subcontent">
</div>
</div>
<div id="lowercontent">
</div>
</div> <!-- close div id="contentcontainer" -->
</div> <!-- close div id="main" -->
</div> <!-- close div id="maincontainer" -->
<div id="footercontainer">
<div id="footer">
</div>
</div> <!-- close div id="footercontainer" -->
</div> <!-- close div id="wrapper" -->
</div> <!-- close div id="wrappercontainer" -->
</body>
dept template source chart.ai Last modified: 06/17/08
Wednesday, November 18, 2009
32
Barebones reset theme
Based on Eric Meyer’s CSS Reset Styles.
It is not pretty, but it is a good starting point
for a brand new theme from scratch.
Provides consistent baseline across browsers
Don’t have to worry about overriding
someone else’s theme styles.
Downside is that almost everything is reset,
so you have to explicitly style many content
elements.
<xsl:variable name="site-theme"
select="'barebonesreset'" />
Wednesday, November 18, 2009
33
The box model, standards mode
100
CONTENT
15 5
E R
PADDING
D
PADDING
D
R
E R
R
O
D
O
B
R
B
5 15
O
PADDING
E R
B
PADDING
B
O
R
D
E R
140
Wednesday, November 18, 2009
34
The box model, quirks mode
100
CONTENT
15 5
E R
PADDING
D
PADDING
D
R
E R
R
O
D
O
B
R
B
5 15
O
PADDING
E R
B
PADDING
B
O
R
D
E R
1O0
Wednesday, November 18, 2009
35
Floats
Floating a block-level element removes it from the “flow” and moves it is far as
possible to the left or right inside the containing element
You should always set an explicit width on floated items
Content below a floated item wraps around the item
Content above a floated item remains unaffected
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
LEFT eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut
enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Wednesday, November 18, 2009
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed
RIGHT
do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
36
Floats, 2
You can float one or more items against another floating item
If the containing element doesn’t have enough horizontal space to fit the
floated element, the floated element will shift down.
LEFT
LEFT
LEFT
LEFT
Wednesday, November 18, 2009
37
Floats and clears
While content will wrap around a floated element, borders and backgrounds
will slide underneath.
You can apply the clear property to avoid wrapping
(clear:left; clear:right; clear:both;)
Lorem ipsum dolor sit amet,
LEFT consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad
nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.
NOT FLOATED
LEFT
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad
nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.
{ clear:left; float:left; }
Wednesday, November 18, 2009
38
Floats and clears, 2
A float removes an element from the relative flow. In the first example below,
the text block is a separate div floated left inside the blue block. It does not fill
up the parent div which defines the background color.
You can either float the parent also (preferred, if possible) or you can apply an
empty “clear div” (hacky but it works)
Dan Cederholm has a method that uses the :after pseudo element.
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad
nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.
.clear { clear:both; }
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad
nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.
<div class="clear">&nbsp;</div>
Wednesday, November 18, 2009
39
Floats and clears and columns
Two-column - inside a container float the left column to the left and the right
column to the right. Heed the box model and how the widths and padding add up.
LEFT
RIGHT
Three-column - take the two column container and float that whole thing left
inside anther container that has the right column floated right.
LEFT
Wednesday, November 18, 2009
E
F
RIGHT
RIGHT
L
T
40
CSS Positioning
position: static;
the default setting, element in a normal position, “left” and “top” properties not
used
position: relative;
moves an element relative to its normal position (inside its parent element)
position: absolute;
completely removes the element from normal flow; element is contained by its
first parent that is not statically positioned.
Position is specified by “left,” “top,” “right,” and “bottom.” Absolutely positioned
elements that span multiple pages will cause printing headaches.
position: fixed;
item is absolutely positioned relative to the browser window (content can scroll
over top a fixed background); previously only possible with frames or Javascript
tricks. Not supported by IE6.
Wednesday, November 18, 2009
41
ATaT - Image sprites
#footer a.feedback {
background: #fff url(/common/images/secure.png) no-repeat 0 -198px;
padding-left: 14px;
}
#footer a:hover.feedback {
background-position: 0 -298px;
}
example sprites from
OIT and WDS websites
Wednesday, November 18, 2009
example sprites from
Reunions mobile website
42
ATaT - Adjacent selectors
#mainNav li a:hover,
#mainNav li a:active {
color: #ace;
}
#mainNav li + li a:hover,
#mainNav li + li a:active {
color: #cbc;
}
#mainNav li + li + li a:hover,
#mainNav li + li + li a:active {
color: #cdb;
}
#mainNav li + li + li + li a:hover,
#mainNav li + li + li + li a:active {
color: #cba;
}
Wednesday, November 18, 2009
43
ATaT - Rounded corners
#request #content form input[type="submit"] {
border: 1px solid #898989;
border-top-color: #aaa;
border-left-color: #aaa;
a
-webkit-border-radius: .6em;
-moz-border-radius: .6em;
a:hover
border-radius: .6em;
padding: .5em 1.5em;
a:active
font-weight: bold;
font-size: .8em;
background: #fefefe url(/common/images/submit-bg.png) repeat-x top left;
}
#request #content form input[type="submit"]:hover {
cursor: pointer;
background-color: #ddd;
submit-bg.png is a
}
translucent, shaded
#request #content form input[type="submit"]:active {
24-bit PNG
background-color: #fff1e8;
}
Wednesday, November 18, 2009
44
The Story about PNG
Microsoft announced PNG support way back in IE4, but they
forgot about 24-bit PNGs until IE7.
24-bit PNGs support alpha-channel transparency; 8-bit PNG
files only support 1-bit (binary) transparency (like GIFs).
Our Roxen servers use an .htc behavior file to allow alpha
transparency with embedded images in IE6.
There are solutions out there to allow IE6 to
display 24-bit PNG background images.
Easier to just gracefully degrade.
Opacity filter for solid color transparency
Wednesday, November 18, 2009
45
Online resources
A List Apart
http://www.alistapart.com
Wednesday, November 18, 2009
46
Online resources
W3Schools CSS Tutorial
http://www.w3schools.com/css/
Wednesday, November 18, 2009
47
Online resources
SitePoint CSS Reference
http://reference.sitepoint.com/css
Wednesday, November 18, 2009
48
Online resources
Princeton University Roxen Documentation
http://www.princeton.edu/roxen
Wednesday, November 18, 2009
49
Zeldman and friends
Designing with Web Standards
3rd Edition
Jeffrey Zeldman
ISBN: 0321616952
Developing with Web Standards
coming November 22, 2009
John Allsopp
ISBN: 0321646924
Wednesday, November 18, 2009
50
Books – Dan Cederholm
Bulletproof Web Design:
Improving flexibility and protecting against
worst-case scenarios with XHTML and CSS
Second Edition
Dan Cederholm
ISBN: 0321509021
Handcrafted CSS:
More Bulletproof Web Design
Dan Cederholm
ISBN: 0321643380
Video Edition, ISBN: 0321658531
Wednesday, November 18, 2009
51
go and make beautiful websites.
http://www.princeton.edu/roxen
Wednesday, November 18, 2009
52
Fly UP