Warp6 CSS Framework – A modular and flexible CSS tool set
In addition to our last blog post about the HTML5 template and system markup we now talk about our new CSS framework. We will explain how it works and how you use it.
The CSS Framework
So what is a CSS framework? A CSS framework is a rich tool set of useful CSS classes to style HTML markup. It provides cross-browser support and enables you to build robust and future-proof websites. For Warp6 we created our own CSS tool set. It is a collection of best practices we learned in the last 5+ years of theme development. Of course, we also kept track with the major CSS and grid frameworks which popped up in the last years and what we can learn from them to improve our code.
One of our major goals was to keep the CSS as modular as possible. Sometimes you just need a specific part of the tool set, and you don't want to load unnecessary CSS files. That's why we keep them in separated files and each one has its own file specific purpose like the layout, menus, etc. These framework CSS files are located in the Warp6 CSS folder. A theme itself has its own CSS files, and you have full control which parts of the framework CSS you want to load and which not.
The complete framework CSS uses 12 different files which are well documented with comments. Each file is stripped down to the essential, no duplicate code, and we utilized the full power of CSS 2.1 selectors. The build-in compression feature of Warp6 automatically combines the style sheets into one file, minifies the code, compresses the final CSS file on-the-fly using the GZIP data stream compression and caches it. No need to worry about loading times. We promise that Warp6 is fast - very fast!
Now a closer look at the CSS framework followed by a short description of the different framework CSS files.
No Overflow Hidden!
We didn't use any overflow:hidden in the whole CSS, not even for clearing. This is because overflow:hidden has a major drawback. It will clip elements that you're trying to position outside it. But even worse is that it also clips new CSS3 properties like box shadow. By not using any overflow:hidden you have more possibilities to use CSS3 properties and position elements where you want.
The Grid System
Another really important part of our CSS framework is the grid system. We don't want to dive that deep into the different types of grid systems. Just a short round up what we have done and why we feel it is a good approach.
Most grid systems like 960 Grid System, Blueprint or 1KB CSS Grid use a fixed template width and a pixel based grid unit. It is possible to integrate one of these systems into a theme framework but if you want to keep flexibility it feels like making things a bit too complex. This doesn't mean using one of these grid systems is a bad idea. So we come up with an own grid solution which is simple and flexible.
In Warp6 you also set a fixed template width, but we choose a percent based grid. This has some big advantages: the grid is very re-usable, you don't have to generate the CSS dynamically, and it can easily be nested. The main reason why other grid systems are not using a percent based grid is the sub-pixel problem when browsers have to round percent units. To learn more about this issue take a look at this article by John Resig. This has the result that some grid layouts may not take the whole width and there may be up to 4 pixels space on the right side. However, this issue rarely happens only in some browsers. We solved this by matching the widths using simple JavaScript. We think this grid solution is great because it has the smallest possible size in code and renders great in all browsers.
Framework Files
Here is a brief description of the different CSS files provided by the framework.
base.css
Yes, that's right! We have no Reset CSS. We take a different approach: To avoid redundant code we set new default values instead of baseline defaults and re-resetting them later.
layout.css
The layout style sheet provides a fluid grid and helper classes to create any layout and some layout defaults.
menus.css
The menus style sheet defines base styles for various menus. Currently, we support our famous Mega Drop-Down Menu, the Accordion Menu and the Line Menu for the top and footer positions.
modules.css
The modules style sheet defines general module defaults, headings, badges and icons.
tools.css
The tools style sheet provides a useful set of CSS classes to style your content. For example this includes read more buttons, different list, table and form styles, info boxes and more.
system.css
The system style sheet defines a base style for the WordPress, Joomla 1.5 and 1.6 system HTML markup.
rtl.css
The RTL style sheet is used for right-to-left language localizations. We are proud that Warp6 has full RTL support.
print.css
The print style sheet which is only used when printing.
mobile.css
The mobile style sheet which styles the template for mobile phones.
ie.css, ie7.css, ie8.css
We provide different IE style sheets which are only loaded by the specific Internet Explorer version.
style.css
The style sheet defines the main look like colors and backgrounds which may change for different theme styles. Having all style related CSS in one place makes creating style variations very easy.
custom.css
The custom style sheet should be used to style your content. It is blank by default.
Conclusion
Warp6 provides a flexible CSS framework which is divided into different files and for each purpose. A Warp6 theme itself has its own CSS and you have full control which part of the framework CSS you want to load and which not. For example if you want to use the 960 Grid System instead of the provided one you are free to do so. The provided grid system is very flexible, the smallest in size and didn't make use of any overflow: hidden. We love it!
Our upcoming blog post we will talk about the new administration user interface!
