Developing child themes on top of Tales is straight forward once you understand the basic HTML structure.

Let’s start by stripping back content and extra markup to see the foundations of Tales. Inside the <body> element follows this hierarchy:

<div class="wrapper">
    <header class="block header">
        <!-- header content -->
    </header>
    <main class="main">
        <!-- main blocks -->
    </main>
    <footer class="block footer">
        <!-- footer content -->
    </footer>
</div>
<div id="search"></div>
<nav id="nav"></nav>

The #search and #nav components are unique and exist outside of the .wrapper — #search is a modal overlay and #nav is the primary menu.

Building Blocks

The .block class represents a single horizontal container. The global header and footer both use this class and the main element contains one or more .block children. For example, the single post template follows this order:

<main class="main">
    <div class="block banner"/>
    <div class="block article"/>
    <div class="block bio"/>
    <div class="block comments"/>
</main>

Blocks have top and bottom padding of 1.75em — that’s 28px by default browser settings. This is the height of the baseline grid and the line-height for normal paragraphs (In fact, all sizes are multiples of 7).

Most blocks wrap their content with .block__align:

<div class="block">
    <div class="block__align"/>
</div>

This wrapper centres the block’s content using the standard max-width and outside padding to match the design. From here you’re free to define your own blocks by using a second class for specific layout and style. Below are two you might find useful.

It’s worth noting that for class names I’m using a BEM-like naming convention (see MindBEMding by Harry Roberts).

Article Block

The single post template uses this format:

<div class="block article">
    <div class="block__align">
        <div class="block__body prose">
            <!-- post content -->
        </div>
    </div>
</div>

Inside the .article block the .block__body provides further padding to maintain a readable line length in this one-column layout. The .prose class is used on all text editor output.

Sidebar Block

The home page template uses this format:

<div class="block sidebar">
    <div class="block__align">
        <div class="block__body prose">
            <!-- page content -->
        </div>
        <div class="block__aside">
            <!-- latest articles -->
        </div>
    </div>
</div>

Inside the .sidebar block the .block__body and .block__aside align to a two-column layout (on large screens). The .block__aside will float left or right depending on source order (see the page template).

For an example of how Tales can be extended look no further than this website’s home page.