Theme Engine Documentation

What CSS frameworks are used?

From the HTML structure and CSS classes naming perspective ContentAir does not impose any CSS frameworks to use in your layouts. So you can freely decide to go with no framework or choose whichever you like (960.gs YAML, Blueprint, etc.). But have in mind that any CSS framework created additional workload for visitors' browsers, which slows down page rendering. So prefer light-weight CSS frameworks that do the job you need and nothing more.

Files Structure

ContentAir compiles a single CSS file for every visitor type (screen, mobile, etc.) to reduce the number of page assets. This improves page loading time significantly, but also imposes a fixed CSS files structure on you. The only file included into all CSS versions is Global, so you should put your framework base there. There is now way to include separate additional CSS files to the website.

Browser Reset

Our system CSS file normalizes browser default settings using Normalize.css. Compared to browser reset frameworks, it does not reset standard CSS settings, so it has little impact to your development. It also does not overload visitors' browsers with tons of rewrites of user-agent defaults, which means there is little impact on page rendering time.

We highly recommend NOT TO reset default browser values for all elements. First, resetting everything that you do not use increases CSS file size, which makes your website load slower. Second, it creates many useless rules for the browser to process, so page rendering slows down. Third, and most important, it will break down our cms.css and admin area CSS styles.

ContentAir has several drag&drop functions that compile HTML code, for example a database builder. Various positioning settings are taken from our system CSS, so resetting them would make your website break down. On the other hand, if you leave them, normally they should not interfere with your CSS code. To understand better what it does you can view CSS source of any site hosted on ContentAir.

Grid System

We suggest using 960 Grid System in your design. It makes your website look cleaner and improves user experience. In our database builder we provide positioning guidelines for 12 (recommended) and 16 columns. We recommend 12 columns, because they are more flexible and allow having 3-column pages. But 16 columns are also fully supported. In the future more and more modules on ContentAir will adopt this grid standard to help you perfectly position elements on a page. You can also go with any other grid system or no grid and still position everything in 1 pixel precision. However, then you will lose the convenience of sticky guidelines.