CSS Components and Styleguide

Layout

Header

Example
Thundercat House Rules
Markup: layout/layout-header.html
                    <div class="layout" style="height: 100%">
    <header class="layout__header">
        <section>Thundercat House Rules</section>
    </header>
</div>
                  
Source: layout/_layout.scss, line 173

Nav

Example

Add the layout__nav-link--active class to a layout__nav-link to indicate it is the active nav item.

Add the layout__nav-child-menu to a nested UL or OL so the user can distinguish between top level nav items and child menu nav items.

Markup: layout/layout-nav.html
                    <p>
    Add the <strong>layout__nav-link--active</strong> class to a 
    <strong>layout__nav-link</strong> to indicate it is the active nav item.
<p>
<p>
    Add the <strong>layout__nav-child-menu</strong> to a nested UL or OL
    so the user can distinguish between top level nav items and
    child menu nav items.
</p>

<div class="layout" style="height: 100%">
    <nav class="layout__nav">
        <ul class="layout__nav-menu">
            <li class="layout__nav-item">
                <a class="layout__nav-link" href="#">
                    No Scratching
                </a>
            </li>
            <li class="layout__nav-item">
                <a class="layout__nav-link" href="#">
                    No Shedding
                </a>
            </li>
            <li class="layout__nav-item">
                <a class="layout__nav-link layout__nav-link--active" href="#">
                    Kitty Litter Is Mandantory
                </a>
                <ul class="layout__nav-menu layout__nav-child-menu">
                    <li class="layout__nav-item">
                        <a class="layout__nav-link" href="#">
                            Yes I'm Serious
                        </a>
                    </li>
                    <li class="layout__nav-item">
                        <a class="layout__nav-link" href="#">
                            There's Always Outside
                        </a>
                    </li>
                </ul>
                <li class="layout__nav-item">
                    <a class="layout__nav-link" href="#">
                        Lion 'O Don't Play That
                    </a>
                </li>
            </li>
        </ul>
    </nav>
</div>
                  
Source: layout/_layout.scss, line 179

Main

Example

Thundercats... HO!!!!!!

Markup: layout/layout-main.html
                    <div class="layout" style="height: 100%">
    <div class="layout__main">
        <h2>Thundercats... HO!!!!!!</h2>
    </div>
</div>
                  
Source: layout/_layout.scss, line 185

Footer

Example
Markup: layout/layout-footer.html
                    <div class="layout" style="height: 100%">
    <footer class="layout__footer">
        <div class="layout__footer-left-item">Important footer stuff</div>
        <div class="layout__footer-right-item">Not as important footer stuff</div>
    </footer>
</div>
                  
Source: layout/_layout.scss, line 191

Full

Example
Thundercat House Rules

Thundercats... HO!!!!!!

Markup: layout/layout-full.html
                    <div class="layout">
    <header class="layout__header">
        <section>Thundercat House Rules</section>
    </header>
    <nav class="layout__nav">
        <ul class="layout__nav-menu">
            <li class="layout__nav-item">
                <a class="layout__nav-link" href="#">
                    No Scratching
                </a>
            </li>
            <li class="layout__nav-item">
                <a class="layout__nav-link" href="#">
                    No Shedding
                </a>
            </li>
            <li class="layout__nav-item">
                <a class="layout__nav-link layout__nav-link--active" href="#">
                    Kitty Litter Is Mandantory
                </a>
                <ul class="layout__nav-menu layout__nav-child-menu">
                    <li class="layout__nav-item">
                        <a class="layout__nav-link" href="#">
                            Yes I'm Serious
                        </a>
                    </li>
                    <li class="layout__nav-item">
                        <a class="layout__nav-link" href="#">
                            There's Always Outside
                        </a>
                    </li>
                </ul>
                <li class="layout__nav-item">
                    <a class="layout__nav-link" href="#">
                        Lion 'O Don't Play That
                    </a>
                </li>
            </li>
        </ul>
    </nav>
    <div class="layout__main">
        <h2>Thundercats... HO!!!!!!</h2>
    </div>
    <footer class="layout__footer">
        <div class="layout__footer-left-item">Important footer stuff</div>
        <div class="layout__footer-right-item">Not as important footer stuff</div>
    </footer>
</div>
                  
Source: layout/_layout.scss, line 197