Web Cube CSS Reference

Overview

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 ... -->

Structural CSS

Columns

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>

And:

<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:

../../_images/agency-developer-css.png

Each column can contain as much layout specific information as you need.

Blocks

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>

Graphics

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.

Buttons

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.

Sprite

Web Cube comes with a default sprite. You can find it atwebcube/webcubecore/static/img/elements.png. For more information about using CSS sprite, please see this link.

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk