MCS:HTML:CSS

CSS

Mozilla Community Theme example implementation is heavily relying on CSS to present the theme.

While HTML markup is focused on semantics, CSS is focused on polished implementation of the design and flexibility to adjust the theme to users needs and preferences.

In result CSS in Mozilla Community theme is made of multiply files that contain separate elements of CSS theme. In order to avoid cost of such approach in form of slower website loading (because of multiply HTTP requests for CSS files), we provide small PHP libraries that produces small, combined and optimized CSS code out of large amount of CSS files.

• CSSLib
• Style class

You don't need those to use the theme, but it may help you keeping clean CSS design and minimize page loading time.

Elements

• css/core.css: core style properties how to style basic elements, definitions for HTML5 elements in form of classes (.aside, .nav, .article etc.)
• css/skeleton.css: basic layout of the theme. Where is header, where is left menu, footer, right menu and content.
• css/layout.css: imports set of css files describing the specific layout of elements - how to style menu boxes, footer etc.
• css/color/color.css: color theme for the website
• css/custom.css: custom elements that override default settings or set up customizable elements (header background, header-bar style, etc.)
• css/product.css: css files specific to the product (wordpress.css etc.)
• css/browser.css: files needed to fix specific browsers (ie7.css)

Patterns

• anchors leading to documents or external websites are underscored, anchors that are links to sections of the website, that manipulate settings etc. are not underscored.