The best CSS strikes the right balance between structure and semantics. Web Cube provides base-css that helps you get your job done, but stays out of the way when it’s time to get your styles right. Web Cube has several built-in CSS rules for structural markup. Knowing these rules before you start writing templates will let you take advantage of our in-built functionality. Since Web Cube is designed to let you built just about any application imaginable, our base CSS contains just the basics: structural classes and content wrappers to get the skeleton of your app up and running.
Out-of-the-box, Web Cube supports a flowing, fixed layout. From the Web Cube demo site:
<section id="content_wrap" role="main" class=""> <div class="position"> <div id="content_container" class="container"> <div id="content" class=""> <section id="hero"> <-- ... more html below ... -->
Web Cube has a built-in grid-like layout so you can structure your documents before you finalize the style. Use the .column2, .column3, .column4, .column5 classes to determine the total width of a container, then use the .column and .column-last styles to add elements to the column. For instance:
<div class="column5"> <div class="column"> column </div> <div class="column"> column </div> <div class="column"> column </div> <div class="column"> column </div> <div class="column column_last"> column </div> </div>
<div class="column2"> <div class="column"> This is on the left </div> <div class="column column_last"> This is on the right </div> </div>
Would yield structures like these:
Each column can contain as much layout specific information as you need.
Use .block to make a block relatively positioned and floated to the left:
<div class="block"> Content goes in here. </div>
Use .accent_block to put a blog in a well (with a slightly darker background):
<div class="accent_block"> Accent block </div>
Use .twitter and .facebook for their respective logos:
<span class="twitter">Twitter</span> <span class="facebook">Facebook</span>
The above text will be replaced with the right logo.
Use .accent_button to great a button, put a span inside it to add text:
<a class="accent_button"> <span class="text"> <span>This is a button</span> <span class="accent_graphic">Arrow</span> </span> </a>
In the example above, the button also has a little arrow. If you don’t want an arrow, or want to change the accent graphic, you can either change the markup by removing the span.accent_graphic element, or you can change the sprite that is loaded in the CSS to update the graphic’s images.
Web Cube comes with a default sprite. You can find it at webcube/webcubecore/static/img/elements.png. For more information about using CSS sprite, please see this link.