Heading 1

WORK IN PROGRESS - TODO:

• microformats
• sitemap.xml (also useful for use with dutmeselectors firefox extension)
• progressive enhancement with child & adjacent sibling & attribute selectors
• browser testing

This is my HTML & CSS framework. The following is sample markup to demonstrate many common sets of data.

Heading 2

Vestibulum class="what" gravida eros. Fusce lacinia urna vitae est mollis viverra. Proin a nunc vitae arcu convallis iaculis. Curabitur turpis. Integer lacinia erat nec nibh. Fusce purus dui, feugiat vitae, CSS tincidunt, blandit nec, quam. Donec euismod varius leo.

Praesent fringilla euismod leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam at eros. Integer consectetuer pede et enim.

Praesent rutrum ipsum at justo. Quisque elementum lacus ac pede. In hac habitasse platea dictumst. Donec odio tortor, bibendum quis, auctor sed, bibendum eget, turpis. Etiam ac lorem sit amet ipsum convallis accumsan. Nulla id ipsum. Ut consectetuer, nunc id suscipit semper, sapien purus malesuada lectus, in tristique arcu augue quis lacus. Proin nec diam sit amet lorem commodo condimentum Donec nunc Proin ipsum leo, auctor a, dapibus non, lacinia auctor, odio. Vestibulum wisi mi, congue ut, lobortis accumsan, dictum et, wisi.

You can download somefile.zip (123 KiB). Here are some fake links to some Guidelines and a Report

Heading 3

1. Mauris et justo.
2. Fusce tincidunt felis in massa.
   1. Ut vel erat.
   2. Cras risus.
   3. Mauris lacus.
3. Pellentesque a justo.
4. Aliquam erat volutpat.

Heading 4

1. body, button, input, select, textarea {
2. color:#666;
3. font-family: "Frutiger", "Univers", "Helvetica Neue", arial, helvetica, sans-serif;
4. }

Heading 5

Common HTML entities

Description	Entity	Result
table footer header?	Data	Data
ampersand	&	&
greater than	>	>
less than	&lt;	<
copyright	&copy;	©
left single quote	&lsquo;	‘
right single quote	&rsquo;	’
left double quote	&ldquo;	“
right double quote	&rdquo;	”
pound	&pound;	£
euro	&euro;	€
cent	&cent;	¢
multiply	&times;	×
divide	&divide;	÷

File size conventions

Abbreviation	Description
B	Bytes
KiB	Kibibytes (1000 B)
MiB	Mibibytes (1000 KiB)
GiB	Gibibytes (1000 MiB)

Heading 6

* indicates the field is required.

Example Form

Text input label that is long enough to wrap *

Password input

Useful information about this field

Text area

Useful information about this field goes in here

Select box Option 1 Option 2 Option 3 Option 4 Option 5 *

Check box

Radio boxes Radio box 1 Radio box 2 Radio box 3

Button

• Praesent fringilla euismod leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam at eros. Integer consectetuer pede et enim.

• Praesent fringilla euismod leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam at eros. Integer consectetuer pede et enim.

• Praesent fringilla euismod leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam at eros. Integer consectetuer pede et enim.

• Praesent fringilla euismod leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam at eros. Integer consectetuer pede et enim.

• Praesent fringilla euismod leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam at eros. Integer consectetuer pede et enim.

• Praesent fringilla euismod leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam at eros. Integer consectetuer pede et enim.

• Praesent fringilla euismod leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam at eros. Integer consectetuer pede et enim.

• Praesent fringilla euismod leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam at eros. Integer consectetuer pede et enim.

Style guidelines

1. selector {
2. declaration block
3. }

1. selector,
2. selector {
3. declaration
4. declaration
5. declaration
6. }

1. #id element.class element {
2. property: value;
3. property: value;
4. property: value;
5. }

1. #example-id div.example-class p {
2. color: #f00;
3. padding: 0 10px;
4. }

the rules would be applied to the following HTML.

1. <div id="example-id">
2. <div class="example-class another-class">
3. <p>content</p>
4. </div>
5. </div>

If the same property is defined multiple time it will use the last defined property of the strongest level selector. The strength is calculated by concatenating the following:

• # of ids
• # of classes
• # of elements

1. #example-id { /* 100 */
2. property: value;
3. }
4. div.example-class { /* 011 */
5. property: value;
6. }
7. div.another-class { /* 011 */
8. property: value;
9. }
10. div { /* 001 */
11. property: value;
12. }

In anticipation of HTML 5 the following classes should be used:

HTML5	HTML4 / XHTML1
<header>	<div class="header">
<nav>	<div class="nav">
<article>	<div class="article">
<section>	<div class="section">
<aside>	<div class="aside">
<footer>	<div class="footer">
<dialog>	<dl class="dialog">
<figure>	<div class="figure">

1. If an id is given to an element it should be unique for that page.

2. Zero values do not require a unit of measurement: 0px == 0pt == 0em == 0

3. Keep declarations in each rule sorted alphabetically by its property. This improves readability and reduces the chances of setting a property more than once.

4. Add a line-break after the comma when using multiple selectors in one rule unless all the selectors are single elements. Example:

   1. div.content h1,
   2. div.content h2 {
   3. color: #f00;
   4. }
   5.  
   6. h1, h2 {
   7. color: #f00;
   8. }

5. Use shorthand where appropriate. (margin, padding, border, background)

   1. padding: (TOP) (RIGHT) (BOTTOM) (LEFT);
   2. padding: (TOP) (RIGHT & LEFT) (BOTTOM);
   3. padding: (TOP & BOTTOM) (RIGHT & LEFT);
   4. padding: (TOP & RIGHT & BOTTOM & LEFT);
   1. padding: 2px 1px 0 1px;
   2. ==
   3. padding: 2px 1px 0;
   4.  
   5. padding: 5px 8px 5px 8px;
   6. ==
   7. padding: 5px 8px;
   8.  
   9. padding: 3px 3px 3px 3px;
   10. ==
   11. padding: 3px;
   12.  
   13. color: #ff0000;
   14. ==
   15. color: #f00;
   16.  
   17. background-color: #f00;
   18. background-image: url(images/example.png);
   19. background-repeat: repeat-x;
   20. background-position: 50% 10%;
   21. ==
   22. background: #f00 url(images/example.png) repeat-x 50% 10%;

6. End declarations with a semi-colon (;) even though it is not strictly necessary for the last declaration of the declaration block.

7. Avoid over declaring. Make the most of the fact that styles do/can inherit. For example avoid setting fixed widths on everything. Block level elements naturally expand to fill the width of their container. Use margins and padding instead so that if the width of the main container is changed all the widths will flow to fill their parents.

8. Make the styles work in Firefox/Safari first then IE6/7. Use !important or hacks as a last resort. IE conditional comments can be added to the HTML to import IE6/7 specific style sheets if necessary.

9. Pixel perfection in all browsers should not be the main priority.

10. Avoid specifying font-size in px. The better alternative is em. This allows text resizing in IE6. It also means that fonts will be relative to their containers. So if a site-wide font-size increase was necessary it would only require changing one property.

Glossary

rule:

selector { declaration block }

selector:

using a combination of elements, ids, and classes to specify which elements will have the rule applied to it

declaration block:

0-n declaration(s) within the curly braces { }

declaration:

property: value;

property:

e.g. color, margin, position, float

value:

e.g. #f00, 100px, absolute, left

element:

the HTML tag name - e.g. p, h1, a, div, span

id:

the HTML id

class:

the HTML class

psuedo class:

:link, :visited, :focus, :hover, :active

comment:

/* example */

Tag Cloud

Tertiary Content

Etiam venenatis, justo quis egestas placerat, enim libero ultricies nunc, ut tristique wisi est et est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras pellentesque facilisis mi. Etiam placerat libero id odio.

Maecenas molestie, sem eu cursus sollicitudin, wisi dui ullamcorper pede, sodales egestas lorem ligula vel dui. Fusce aliquam ullamcorper massa.

Praesent bibendum lacus quis orci. Nunc quam dui, elementum a, dictum sit amet, tincidunt a, erat. Nulla dui wisi, lacinia nec, porta rhoncus, pellentesque vitae, tellus. Pellentesque vitae velit eu leo eleifend ultricies. Nunc laoreet sapien a neque.