Style Guide
Templates need to adhere to WebGUI Template Best Practices.
Browser Support:
We can't support every browser version due to the wide range of hacks necessary to do so. We will support the following browsers.
- IE6 (Supported only in the regards that information should be readable and the browser functions. IE6 support will not be pixel-perfect.)
- IE7
- IE8
- Firefox
- Opera
- Safari
- Chrome
For Internet Explorer support, we will use conditionals in the Style Template. Read more about browser hacks...
Stylesheet Conventions
Styles for an asset can be found in the asset-specific stylesheet, unless it has the "wg-" prefix. In that case it can be found in the "base" stylesheet.
Stylesheet Locations
A folder called "Stylesheets" is located in the import node. Asset stylesheets are located here. Each asset will have it's own stylesheet.
CSS Conventions
Class Naming Conventions
Add naming convention information here
CSS Techniques
- Clear floats with wg-clear (is this set to change?)
- Conditional Styles (See browser hacks)
- Headings (h1, h2...)
General Template Conventions
Asset Style Conventions
Each asset and template has it's own class name. This is used to target a specific asset and template. There will be one CSS file for an asset for maintainability reasons.
Asset Specific Information (Alpha-ordered)
- All Assets (global elements for assets)
- Articles
- Collaboration System
- Navigation
- Syndicated Content
Performance and Organization
Use FilePump to collect css files, compress into gzip instead of huge webgui.css. This provides the ability to organize style sheets without bloating HTTP requests and compression of styles and JavaScript. By default, all styles will be includes so the default web site works out-of-the-box.
Keywords: styleguide how-to