3.8 Content Design
YAML is a layout framework and as such provides a structure to display columns correctly in all browsers, no matter what content is added.
The structural, semantic, and visual composition of the content must be undertaken by the site designer, yet YAML does provide a starter kit with the file content_default.css in the yaml/screen/ folder. This template sets up basic formatting for standard elements.
You can copy this template for your projects, change and expand it according to your needs, and integrate it into your YAML-based layout via the central stylesheet.
The content_default.css Template
A website's content also requires careful design. Each browser has its own set of standard predefined formats, resulting in more or less important differences in their displays.
Of course, not every single element can be explained in the documentation. That's why you will find all styled elements from content_default.css in the following layout example:
/examples/01_layouts_basics/styling_content.html
Setting the basic font size
The first step on the way to a uniform display is the setting of a uniform font size for all standard elements. The first step in resetting the various browser's individual settings is to define all font sizes as 16 pixels high via the html * selector. The odd number evens out the rounding errors in a few older browsers.
Note: the use of html * instead of * ensures that Internet Explorer will still recognize Javascript expressions for simulating the CSS properties min-width and max-width. See Section 4.7.
/* (en) reset font size for all elements to standard (16 Pixel) */
/* (de) Alle Schriftgrößen auf Standardgröße (16 Pixel) zurücksetzen */
html * { font-size: 100.01% }
/**
* (en) reset monospaced elements to font size 16px in all browsers
* (de) Schriftgröße von monospaced Elemente in allen Browsern auf 16 Pixel setzen
*
* @see: ...
*/
textarea, pre, code, kbd, samp, var, tt {
font-family: Consolas, "Lucida Console", ...;
}
/* (en) base layout gets standard font size 12px */
/* (de) Basis-Layout erhält Standardschriftgröße von 12 Pixeln */
body {
font-family: 'Trebuchet MS', Verdana, Helvetica, ...;
font-size: 75.00%
}
The second part is a correction for a special characteristic of Gecko-based browsers. These browsers set the standard font size of monospaced elements (textarea, pre, tt, code etc.) to 13px and not to 16px as all other browsers do. By changing the font family from monospace to Courier New or Courier, this problem can be avoided.
Below that we choose a new, sensible standard font size for the body element. As this property will be inherited, it will thus be set for all elements within body. For the basis: a sans serif font, 12 pixels high.
Headlines and Copytext
The next step sets the font sizes, margins, and line heights of the headlines and copytext.
h1,h2,h3,h4,h5,h6 {
font-family: "Times New Roman", Times, serif;
font-weight:normal;
color:#222;
margin: 0 0 0.25em 0;
}
h1 { font-size: 250% } /* 30px */
h2 { font-size: 200% } /* 24px */
h3 { font-size: 150% } /* 18px */
h4 { font-size: 133.33% } /* 16px */
h5 { font-size: 116.67% } /* 14px */
h6 { font-size: 116.67; font-style:italic } /* 14px */
p { line-height: 1.5em; margin: 0 0 1em 0; }
Important: generally, the font sizes should be given in relative units of measurement to allow all browsers to zoom the text.
As soon as a value is given in pixels [px], Internet Explorer users (including users of IE 7) cannot use the text-zoom function of the browser to size the text to their liking.
HTML List Design
The next block deals with the design of HTML lists - setting margins, paddings and list style types. Changes are easier to make when the standard definition is explicitly set.
/* --- Lists | Listen ---------------------------- */
ul, ol, dl { line-height: 1.5em; margin: 0 0 1em 1em; }
ul { list-style-type: disc; }
ul ul { list-style-type: circle; margin-bottom: 0; }
ol { list-style-type: decimal; }
ol ol { list-style-type: lower-latin; margin-bottom: 0; }
li { margin-left: 0.8em; line-height: 1.5em; }
dt { font-weight:bold; }
dd { margin:0 0 1em 0.8em; }
Text Markup
Quotes, text emphasis, abbreviations / acronyms, and preformatted text (or code excerpts) all often require special text markup. These are included in our general formatting, with the basic properties of font face, margins, etc.
/* --- general text formatting | Allgemeine Textauszeichnung --- */
...
blockquote, cite, q {
font-family: Georgia, "Times New Roman", Times, serif;
font-style:italic;
}
blockquote { margin: 0 0 1em 1.6em; color: #666; }
strong,b { font-weight: bold; }
em,i { font-style: italic; }
big { font-size:116.667%; }
small { font-size:91.667%; }
pre { line-height:1.5em; margin:0 0 1em 0; }
pre, code, kbd, tt, samp, var { font-size:100%; }
pre, code { color:#800; }
kbd, samp, var, tt { color:#666; font-weight:bold; }
var, dfn { font-style:italic; }
acronym, abbr {
border-bottom: 1px #aaa dotted;
font-variant: small-caps;
letter-spacing: .07em;
cursor: help;
}
sub, sup { font-size:91.6667%; line-height: 0; }
...
Generic Classes for Positioning and Highlighting Content Elements
/**
*
* Generic Content Classes
*
* (en) standard classes for positioning and highlighting
* (de) Standardklassen zur Positionierung und Hervorhebung
*
* @section content-generic-classes
*/
.highlight { color: #f60; }
.dimmed { color: #888; }
.info { background: #f8f8f8; color: #666; ... }
.note { background: #efe; color: #040; ... }
.important { background: #ffe; color: #440; ... }
.warning { background: #fee; color: #400; ... }
.float_left { float: left; display:inline; ... }
.float_right { float: right; display:inline; ... }
.center { display:block; text-align:center; ... }
Three CSS classes have been created to highlight elements according to their contextual relevance: general information, an important note, and a warning.
The horizontal alignment of block elements is taken care of by three CSS classes: for left-aligned, right-aligned, and centered.
Automatic Formatting of Hyperlinks
CSS automatically formats external links. This process is restricted to the actual content area of the layout, the container #main. Adjust the URL label for your own domain.
/**
* External Links
* (en) classification and formatting of hyperlinks via CSS
* (de) Klassifizierung und Gestaltung von Hyperlinks mit CSS
*
* @section content-external-links
* @app-yaml-default disabled
*/
/*
#main a[href^="http://www.my-domain.com"],
#main a[href^="https://www.my-domain.com"]
{
padding-left: 12px;
background-image: url('your_image.gif');
background-repeat: no-repeat;
background-position: 0 0.45em;
}
*/
If you use relative paths for internal links, you can even leave out the URL entirely.
#main a[href^="http:"], a[href^="https:"] { ... }
Note: the style declarations for the automatic formatting of external links are commented out in the template and must be activated for use in practice.
Important: the automatic link formatting requires the browser to support CSS 2.1 pseudoclasses. Internet Explorer up to and including version 7.0 unfortunately does not fulfill this criterium.
Simple Table Design
The next block deals with the display of simple tables. Normal tables are created with an automatic width, but by using the class .full the table can be forced to fill the entire width. Important to note: when using this class, additional margins or borders on the sides will automatically create an oversized element.
The second predefined CSS class, .fixed, allows the creation of tables at a fixed width: their cells will not expand to encompass oversized content. These tables are thus easier to incorporate into flexible layouts.
/**
* Tables | Tabellen
* (en) Generic classes for table-width ...
* (de) Generische Klassen für die Tabellenbreite ...
*
* @section content-tables
*/
table { width: auto; border-collapse:collapse; ... }
table caption { font-variant:small-caps; }
table.full { width: 100%; }
table.fixed { table-layout:fixed; }
th,td { padding: 0.5em; }
thead th { color: #000; border-bottom: 2px #800 solid; }
tbody th { background: #e0e0e0; color: #333; }
tbody th[scope="row"],
tbody th.sub { background: #f0f0f0; }
tbody th { border-bottom: 1px solid #fff; text-align: left; }
tbody td { border-bottom: 1px solid #eee; }
tbody tr:hover th[scope="row"],
tbody tr:hover tbody th.sub { background: #f0e8e8; }
tbody tr:hover td { background: #fff8f8; }
The other definitions are self-explanatory. Column and row headlines can be clearly assigned by using the handy differences between thead and tbody as well as the elements th and th.sub.
