DimC Documentation layout

Basic layout elements

Header & Footer

The header and footer are prominent elements of the UI, so they may contain any primary piece of information that needs to be conveyed. In order to use them, just place the <header> or <footer> html tags into the <body>.

Then you need to specify the height (essentially vertical paddings) and width of the content. The height is specified by asigning on the element itself, one of these classes: .small .medium .large .xlarge. The width is specified by asigning on a direct <div> child, one of these classes: .content-wide .content-narrow .content-xnarrow. All the content should go inside that <div>.

Header Content

<header class="medium">
    <div class="content-wide">
        Header Content
    </div>
</header>

Equally simply, the footer can be used by placing the <footer> tag into the <body>. The content of both the header and the footer can follow any custom structure, utilizing the grid system or any other custom markup.

<footer class="medium">
    <div class="content-wide">
        Footer Content
    </div>
</footer>

Header/Footer Reset

You can reset the appearance of both the header and footer by adding the class .reset. This will reset their background and content color to their initial states, so that you can customize these elements.

Header Content

<header class="reset medium">
    <div class="content-wide">
        Header Content
    </div>
</header>

Compact Header/Footer

If you need a more minimal header or footer, you can add the class .compact. The compact header/footer will not take full space of the viewport, but leave some margins around.

Compact Header Content

<header class="compact medium">
    <div class="content-wide">
        Compact Header Content
    </div>
</header>
<footer class="compact medium">
    <div class="content-wide">
        Compact Footer Content
    </div>
</footer>

Content area

The main content is divided in sections. Sections are used by simply placing the <section> html tag into the <body> and follow the same content structure as in header/footer. The .small .medium .large .xlarge classes define the height and the .content-wide .content-narrow .content-xnarrow define the width.

You can use the classes bg-color-shade1 or bg-color-shade2 for different section background colors.

Section 1 Content

Section 2 Content

Section 3 Content

<section class="compact medium">
    <div class="content-wide">
        Section 1 Content
    </div>
</section>
<section class="compact medium bg-color-shade1">
    <div class="content-wide">
        Section 2 Content
    </div>
</section>
<section class="compact medium bg-color-shade2">
    <div class="content-wide">
        Section 3 Content
    </div>
</section>

Grid

In order to create a solid layout, the usage of the grid system is strongly encouraged. This 12-column grid system aims to cover the basic layout needs. The columns' class names are chosen so that they semantically suggest the column's width and are easily memorizable.

col-half

col-seven-twelfths

col-five-twelfths

col-two-thirds

col-one-third

col-three-fourths

col-one-fourth

col-five-sixths

col-one-sixth

col-eleven-twelfths

col-one-twelfth

col-whole

<div class="grid-container">
    <div class="col-half"><p>col-half</p></div> 
    <div class="col-half"><p>col-half</p></div>
    <div class="col-seven-twelfths"><p>col-seven-twelfths</p></div>
    <div class="col-five-twelfths"><p>col-five-twelfths</p></div>
    <div class="col-two-thirds"><p>col-two-thirds</p></div>
    <div class="col-one-third"><p>col-one-third</p></div>
    <div class="col-three-fourths"><p>col-three-fourths</p></div>
    <div class="col-one-fourth"><p>col-one-fourth</p></div>
    <div class="col-five-sixths"><p>col-five-sixths</p></div> 
    <div class="col-one-sixth"><p>col-one-sixth</p></div>
    <div class="col-eleven-twelfths"><p>col-eleven-twelfths</p></div>
    <div class="col-one-twelfth"><p>col-one-twelfth</p></div>
    <div class="col-whole"><p>col-whole</p></div>
</div>

Document Structure

Below is an example of the main layout elements into the <body>, used in a webpage.

Header title on the first column of the grid

Section content on the first column of the grid

Section content on the second column of the grid

Section content on the first column

<header class="medium">
    <div class="content-narrow">
        <div class="grid-container">
            <div class="col-seven-twelfths">
                <h2>Header title on the first column of the grid</h2>
            </div> 
            <div class="col-five-twelfths">
                Header content on the second column of the grid
            </div>
        </div>
    </div>
</header>
<section class="medium">
    <div class="content-wide">
        <div class="grid-container">
            <div class="col-half">
                Section content on the first column of the grid
            </div>
            <div class="col-half">
                Section content on the second column of the grid
            </div>
        </div>
    </div>
</section>
<section class="medium bg-color-shade1">
    <div class="content-wide">
        <div class="grid-container">
            <div class="col-one-sixth">
                Section content on the first column
            </div>
            <div class="col-five-twelfths">
                Section content on the middle of the grid
            </div>
            <div class="col-five-twelfths">
                Section content on the second column of the grid
            </div>
        </div>
    </div>
</section>
<footer class="medium">
    <div class="content-narrow ta-c">
        <h3>Footer Content</h3>
        Some more footer content
    </div>
</footer>