3.4 The Base Stylesheet base.css
Important: The stylesheet base.css in the folder yaml/core/ is one of the basic components of the YAML framework. It sets up the foundation (browser reset, clearing, subtemplates etc.). This stylesheet is required for every YAML-based layout and should not be changed lightly!
Browser Reset - Uniform Starting Point for All Browsers
Note: the components of the browser reset are required for all media. The following CSS rules are thus included with the media rule @media all.
YAML's purpose is to guarantee a uniform and cross-browser compatible layout. A uniform starting point is necessary. This is not a given: every browser sets its own particular standard formats for displaying unformatted content.
Let us examine the first lines of the base stylesheet base.css:
/**
* @section browser reset
* @see ...
*/
* { margin:0; padding:0; }
option { padding-left: 0.4em; }
* html body * { overflow:visible; }
* html iframe, * html frame { overflow:auto; }
* html frameset { overflow:hidden; }
html {height:100%; margin-bottom: 1px; }
body {
font-size: 100.01%;
position: relative;
color: #000;
background: #fff;
text-align: left;
}
div { outline: 0 none; }
fieldset, img { border:0 solid; }
ul, ol, dl { margin: 0 0 1em 1em; }
li {
margin-left: 0.8em;
line-height: 1.5em;
}
dt { font-weight: bold; }
dd { margin: 0 0 1em 0.8em; }
blockquote { margin: 0 0 1em 0.8em; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; }
Eliminating margins and paddings
Setting * { margin:0; padding:0; } eliminates the inner and outer spacing of all HTML elements via the asterisk selector. This method takes care of all HTML elements at one go.
For select elements, however, this creates a small problem. The above instruction of course sets the padding of the option element (the choices in the selectbox) to zero, causing it (in Windows) to hide the last letter of the content. This problem is solved by setting its standard value explicitly: option {padding-left: 0.4em}.
Note: the entry can be completed with the CSS property * {border: 0;}. However, this also removes the preformatting of form elements -- textareas and submit buttons.
In this case, these elements must be formatted with the standard values in the CSS file content.css (see Section 3.8: Designing the Content), or they will be quite difficult to see on the screen.
To avoid a permanently visible outline of DIV elements div {outline: 0 none;}. This occurs when its ID's are used as targets for skip links. The rule doesn't affect other browsers due to their identical default behavior.
The border for the HTML elements fieldset and img are also set to zero (fieldset, img { border:0 solid; }).
Avoiding the italics bug in IE
This bugfix for Internet Explorer 5.x and 6.0 is an exception. While all YAML's further CSS hacks for IE are collected in special stylesheets, this bugfix must appear before all layout-specific CSS declarations to work properly.
* html body * { overflow:visible; }
* html iframe, * html frame { overflow:auto; }
* html frameset { overflow:hidden; }
An exact description of this bugfix is in Section 3.5: CSS Adjustments for Internet Explorer.
Font size and rounding errors
The declaration body { font-size: 100.01% } compensates rounding errors, in particular in older versions of Opera and Safari. Both would otherwise display fonts that are too small.
Note: in earlier YAML versions, this font size correction was also included for the elements select, input, and textarea for Safari 1.x. This led to problems in the current Firefox 2.x and will not be used after YAML version 3.0. Safari 1.x is also seldom used today.
Standard values for lists and quotations
HTML lists as well as elements for designating quotations (blockquote, ol, ul, dl) need line heights and margins in order to be consistent in all browsers. The browser's own interpretations were overwritten with the declaration * {margin:0; padding:0 } along with the other browser resetting options.
ul, ol, dl { margin: 0 0 1em 1em; }
li {
margin-left: 0.8em;
line-height: 1.5em;
}
dt { font-weight: bold; }
dd { margin: 0 0 1em 0.8em; }
blockquote { margin: 0 0 1em 0.8em; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; }
Standard CSS Classes
Note: the components of the standard classes are necessary for all media. The following CSS rules are thus included with the media rule @media all.
YAML provides many standardized CSS classes to be used when required. These classes are discussed briefly.
Clearing Methods
YAML provides two general methods for clearing floats without additional markup. These are the clearfix and the overflow methods. Their technical details were discussed in section 2.3. Practical use scenarios for each method were described in section 2.6.
/**
* @section clearing methods
* @see yaml.de/en/documentation/basics/general.html
*/
/* (en) clearfix method for clearing floats */
/* (de) Clearfix-Methode zum Clearen der Float-Umgebungen */
.clearfix:after {
clear: both;
content: ".";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
/* (en) essential for Safari browser !! */
/* (de) Diese Angabe benötigt der Safari-Browser zwingend !! */
.clearfix { display: block; }
/* (en) overflow method for clearing floats */
/* (de) Overflow-Methode zum Clearen der Float-Umgebungen */
.floatbox { overflow: hidden; }
Section 2.7 described how within YAML the container #col3 can consistently remain the longest column by using the clearfix method. Internet Explorer requires many adjustments for this function, which are provided by the container #ie_clearing. The adjustments for IE 5.x – IE 7.0 are included via the iehacks.css. The container #ie_clearing is generally hidden in modern browsers, as they do not require it.
/* (en) IE-Clearing: Only used in Internet Explorer ... */
#ie_clearing { display: none; }
Skip Links and Invisible Content
In order to provide the most easily accessible webpages, YAML offers predefined CSS classes in the base.css to hide content from the visual screen and yet make it available to print versions and alternative media such as screen readers.
/**
* @section hidden elements | Versteckte Elemente
* @see www.yaml.de/en/documentation/basics/skip-links.html
*
* (en) skip links and invisible content
*/
/* (en) classes for invisible elements in the base layout */
.skip, .hideme, .print {
position: absolute;
top: -32768px;
left: -32768px; /* LTR */
}
/* (en) make skip links visible when using tab navigation */
.skip:focus, .skip:active {
position: static;
top: 0;
left: 0;
}
/* skiplinks: technical setup */
#skiplinks {
position: absolute;
top: 0px;
left: -32768px;
z-index: 1000;
width:100%;
margin: 0;
padding: 0;
list-style-type: none;
}
#skiplinks a.skip:focus,
#skiplinks a.skip:active {
left: 32768px;
outline: 0 none;
position: absolute;
width:100%;
}
The definition of the CSS class .skip for providing predefined skip links was explained in section 2.8: Skip-Link Navigation. Further standard classes were developed to display content only to particular media (for example, to provide additional information for screen readers).
The class .hideme hides content from all visual media. The CSS class .print allows content to be hidden from screens and yet printed onto paper. Both classes are fully accessible to screen readers.
Building Blocks for the Screenlayout
YAML works on the top-down principle, providing a basic markup with often-used standard elements of common layouts.
- .page_margins serves as a wrapper for a particular layout area. Usually the layout width or the minimum and maximum widths of a flexible layout are set via .page_margins.
- .page defines the borders of and space around flexible layouts in relation to .page_margins (see the combination model, Section 2.4).
- #header, #nav, #main und #footer are typical standard elements for all layouts.
- In addition to the main navigation, many pages include a "metanavigation", which contains links to the sitemap, the privacy policy, etc. The container #topnav is intended for this.
- Within #main there are three column containers:
- #col1 & #col1_content
- #col2 & #col2_content
- #col3 & #col3_content + #ie_clearing
The column containers are each divided into two, in order to allow for the greatest possible flexibility and freedom in designing flexible layouts with the combination model.
Basic Layout - Universal Fallback
The predefined elements in the markup can always be freely redesigned, but basic values are set within the base.css to provide a fallback to a simple three-column layout. In this basic layout, the side columns #col1 and #col2 are each defined as 200px wide. The metanavigation #topnav is positioned absolutely at the top right within #header.
The position:relative property for the content container #colx_content is a preparatory step to allow absolute positioning within the columns. It also ensures that Internet Explorer's column contents appear without selection or changing the size of the window, and they are prevented from suddenly disappearing.
#header { position:relative; }
#topnav { text-align: right; }
#header #topnav { position:absolute; top: 10px; right: 10px; }
/* (en) Ensuring correct positioning */
#header, #nav, #main, #footer { clear:both; }
#col1 { float: left; width: 200px; }
#col2 { float:right; width: 200px; }
#col3 { width:auto; margin: 0 200px; }
#col1_content, #col2_content, #col3_content { position: relative; }
This fallback means that you never face designing your new screen layout with a completely blank slate: even in the worst case scenario, you can always call up a fully-functioning basic layout.
Flexible Grid Blocks
The base.css also contains the class definitions for the flexible grid blocks, YAML's subtemplates. The functions and structure of the subtemplates is covered thoroughly in Section 4.5.
Specifications for the Print Version
Note: the following CSS rules for the print version are grouped within the media rule @media print.
Float Clearing in the Print Version
Both Firefox and Internet Explorer still have some problems in their current versions with accurate printing of floated elements, even when using the overflow:auto or overflow:hidden properties. A part of the content is arbitrarily cut off. Particularly problematic is the standard class .floatbox. The following bugfix solves this problem. Simultaneously, the display:table property ensures that floating content remains within the surrounding parent containers.
/**
* (en) float clearing for .floatbox and subtemplates.
*
* @bugfix
* @since 3.0
* @affected FF2.0, FF3.0, IE7
* @css-for all browsers
* @valid yes
*/
.subcolumns > div,
.floatbox {
display: table;
overflow:visible;
}
In addition to .floatbox, the bugfix is also applied to the selector .subcolumns > div. This is a preventive measure to ensure that the content of the subtemplates remains within its surrounding column container .cxxl or .cxxr.
Adjusting the print version for specific content
The CSS class .print is defined along with the skip link classes (see Section 2.8) in order to hide elements on screen while leaving them accessible for screen readers and in the print version. The following rule makes elements with the .print class visible.
/* (en) make .print class visible */
/* (de) .print-Klasse sichtbar schalten */
.print { position: static; left: 0; }
In general, you should hide elements from your print version with your print stylesheet and CSS. Yet there is no rule without exceptions, and not every element in a complex, dynamic layout can be reliably reached with CSS selectors. For such cases, we have the CSS class .noprint. This class hides content from the print version, but must be specifically assigned to such content in the markup.
/* (en) generic class to hide elements for print */
/* (de) Allgemeine CSS Klasse, um Elemente in der Druckausgabe auszublenden */
.noprint { display:none !important; }
