Using CSS in eeSiteKit
There are several approaches to integrating CSS and XHTML structure in eeSiteKit.
YAML
eeSiteKit comes fully integrated with YAML’s “Simple Project” template structure based on a standard 3 column layout that can be modified any number of ways with or without the using the YAML Builder app.
Once you create a page layout with the YAML Builder you may import the code from its “basemod.css” and “patch_my_layout.css” directly into eeSiteKit and watch your page take shape. Use the output of those two examples from the YAML Builder and replace “kit_css/yaml_basemod” with “basemod.css” and replace “kit_css/yaml_ie_patch” with “patch_my_layout.css”.
If you’ve added any Sub Templates to your page layout, then you’ll want to import them into the appropriate templates in “kit_display”. eeSiteKit already includes the basic XHTML layout use in the YAML Builder, so adding additional columns goes pretty quickly.
Your hand-coded CSS with YAML’s Simple Project div framework.
If you like to code your CSS by hand, you may consider using YAML’s Simple Project framework as a starting point. It’s already added to all the appropriate templates in the “kit_display” section of eeSiteKit and can help you jump-start your site’s CSS layout. All the YAML code is clearly marked in the “kit_css” template group so you can quickly delete all of it, or keep the parts of it that may be useful to you.
Using Grid 960, Yahoo (YUI CSS) Grids or other popular tools
eeSiteKit 2.0 includes an alternate “kit_display_light” template group that may be used in place of the default “kit_display” group. This new template group allows designers and developers that are working with grid systems, those who hand code their own page structure, and those who are using pre-designed templates a new and faster way to work with eeSiteKit. Nearly all of the default divs are removed, letting you create your own templates using the channel tags included and adding eeSiteKit’s custom embed tags as needed.