Styling with CSS

While this is a functioning CSS framework for Treesaver it is built with pre-determined values assumed from the Sass branch. If you are content with these measurements and feel like testing the waters of Treesaver without diving into Sass just yet then this is a great starting point. If you are looking at doing somthing more, try the Sass branch out. That said, lets get to the CSS!

Keeping things simple and organized

To keep things simple, all the grid calculation and basic features get nailed down in the core stylesheets where you need not bother to go. All of the styling choices you need are up front and as clean as possible in the skin, and chrome. This leaves you with a blank slate for you to do anything you want with a core framework to make it happen fast.

Skin

The skin.css file will get you started styling the pages themselves. Style content just as you would on any other project, but it is recommended that you keep styles strictly to elements on the pages themselves so things don't get too cluttered.

There are a few things to keep in mind when styling.

• Everything within text columns should be a multiple of the text columns line-height.
• .column needs to be the same width across all the grids in a set. If you have a different column width try defining it attached to your grid set definitions like so: .department.grid.column {width: 200px}

Chrome

The user interface is all styled with chrome.css. Really, you can do what ever you want to style this. It is recommended you absolute position various elements around the screen but the interface is really up to you to create.