Documentation

This CSS and boilerplate will be updated and heavily modified as soon as we have a new layout for the website or the working group Corporate identity has produced something useful. Currently, I am thinking to replace it something heavily based on Boostrap 4. Therefore, it is advised not to use features that will be deprecated in Bootstrap 4.

Note that this framework is built to suit some specific needs and not to be a complete solution for everything one may encounter while deloping a web page for Cover. If you have created or want to create a solution for a specific problem, please contact me so we can discuss the preferred style for it and include it in future versions of CDL.

Navbar

To get a responsive navbar like the one on this page, use the code below. The implementation is quite based on the navbar of Bootstrap. Instead of .navbar.navbar-default or .navbar.navbar-inverse, use .navbar.navbar-cover. The following things are implemented diferrently.

Brand image	Wrap the `img` with the Cover logo in a `.navbar-logo`.
Responsive Navbar Toggle	We use the navicon transformicon instead of the Bootstrap navicon
Navigation ul	Because of laziness, the ul containing the actual navigation does not have `.nav.navbar`. I'm sorry, just deal with it. Or make implement it in such a way that is does not break (and send me your implementation).

Only the Bootstrap features used in the navbar on this page are tested. If you want to implement another feature, please contact me so we can discuss the preferred style for it.

<nav class="navbar navbar-cover">
    <div class="container-fluid">
        <!-- Header with brand and toggle for mobile display -->
        <div class="navbar-header">
            <button class="navbar-toggle collapsed navicon-button" href="#navbar-demo-collapse" data-toggle="collapse" aria-expanded="false" aria-controls="navbar-demo-collapse">
                <span class="navicon navicon-white"></span>
            </button>
            <a href="//www.svcover.nl/" class="navbar-logo"><img src="img/cover.png" alt="Cover"></a>
            <a href="#" class="navbar-brand">App Name</a>
        </div>
        <!-- Toggleable content -->
        <div class="collapse navbar-collapse" id="navbar-demo-collapse">
            <ul class="navbar-right">
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <!-- Dropdown menu -->
                <li class="dropdown">
                    <a href="#"  class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-angle-down"></i>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-header">Dropdown links</li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="dropdown-header">Separated links</li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

Pages

Simple pages

For simple pages the default Bootstrap .container can be used to wrap the content. In some cases, like this page, it may however be desirable to have a narrower container. For this, a .container-narrow can be used, which will render a container that won't grow wider than 750px.

<div class="container-narrow">...</div>

Other pages may require a full-width container, unless the screen is really large. For this, a .container-wide can be used, which behaves just the same as Bootstrap's .container-fluid, unless the screen is wider than 1170px, which is when the container will stop growing.

Complex pages

For complex pages, please refer to the Bootstrap grid system. As an alternative, the powerful CSS Flexbox can be used. For this, the flexbox container is added. Just add .container-flex to a container of any kind (.container, .container-fluid, .container-narrow or .container-wide). Please note that there is no need for using .rows now and you have to implement the flex properties of the columns yourself.

<div class="container container-flex">
    <div class="your-column">...</div>
    <div class="your-other-column">...</div>
    ...
</div>

Subnavigation

In some cases, subnavigation may be desired, which can be provided by the responsible subnavigation layout, as demonstrated below. The subnavigation layout works just fine with the Bootstrap grid system, as long as you don't forget to define the column sizes with the appropriate bootstrap .col-*-* classes.

Content title

Option

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="container">
    <div class="row">
        <!-- Navigation sidebar, full width on small screens -->
        <div class="side-nav col-md-2 col-xs-12">
            <div class="side-nav-header">
                <h2>Title</h2>
            </div>
            <nav>
                <ul>
                    <li class="active"><a href="#">Link</a></li>
                    <li class=""><a href="#">Link</a></li>
                </ul>
            </nav>
        </div>
        <!-- Content, full width on small screens -->
        <div class="content col-md-10 col-xs-12">
            <div class="content-header">
                <h2>Content title</h2>
                <div class="content-controls">
                    <a href="#" class="btn btn-primary">Option</a>
                </div>
            </div>
            ...
        </div>
    </div>
</div>

For the headings in both .side-nav-header and .content-header, every heading (<h1>-<h6>) can be used. But please keep accessibility in mind, so that screen readers can make sense of your pages and know what is important and what not.

If desired, the .conten-controls and the .side-nav-header can be left out, as demonstrated below. To properly align the .side-nav when no .side-nav-header is provided, use a .side-nav.no-header.

Instead of using the Bootstrap grid system, the CSS Flexbox can also be used for the subnavigation layout. In this case, there is no need to use .rows or .col-*-*s. The width of the side-nav is set to a fixed 200px in the Flexbox layout (note: in the example, it is set to 120px, as the space here is quite narrow).

Content title

<div class="container container-flex">
    <!-- Navigation sidebar, no header for demonstration purposes -->
    <div class="side-nav no-header">
        <nav>
            <ul>
                <li class="active"><a href="#">Link</a></li>
                <li class=""><a href="#">Link</a></li>
            </ul>
        </nav>
    </div>
    <!-- Content, no controlls for demonstration purposes -->
    <div class="content">
        <div class="content-header">
            <h2>Content title</h2>
        </div>
        ...
    </div>
</div>

Icons

Font Awesome

For icons, preferably use Font Awesome. As for now, Glyphicons are available in Bootstrap, but will be deprecated in Bootstrap 4, so please consider using alternatives.

Navicon Transformicons

The css also contains a modified version of the Navicon Transformicons by Bennet Feely. For demonstration purposes, these are added to bootstrap buttons. However, it is possible to place them inside a container of any kind.

Placing the navicon <span class="navicon"></span> within a .navicon-button, will animate the icon. The navicon can be transformed into different shapes: minus (default), plus (.navicon-plus), times (.navicon-times) and arrows in 4 directions (e.g. .navicon-arrow (default: left) or .navicon-arrow.navicon-arrow-up). The transformed state of the navicon will be activated in an .navicon-button[aria-expanded=true] (default to Bootstrap's Collapse jQuery plugin) or .navicon-button.open.

<!-- Arrow left -->
<button class="btn btn-default navicon-button">
    <span class="navicon navicon-arrow"></span>
</button>
<!-- Arrow up -->
<button class="btn btn-default navicon-button">
    <span class="navicon navicon-arrow navicon-arrow-up"></span>
</button>
<!-- Arrow right -->
<button class="btn btn-default navicon-button">
    <span class="navicon navicon-arrow navicon-arrow-right"></span>
</button>
<!-- Arrow down -->
<button class="btn btn-default navicon-button">
    <span class="navicon navicon-arrow navicon-arrow-down"></span>
</button>
<!-- Times -->
<button class="btn btn-default navicon-button">
    <span class="navicon navicon-times"></span>
</button>
<!-- Plus -->
<button class="btn btn-default navicon-button">
    <span class="navicon navicon-plus"></span>
</button>
<!-- Minus -->
<button class="btn btn-default navicon-button">
    <span class="navicon"></span>
</button>
<!-- Unanimated white -->
<button class="btn btn-primary">
    <span class="navicon navicon-white"></span>
</button>
<!-- Minus white  -->
<button class="btn btn-success navicon-button">
    <span class="navicon navicon-white"></span>
</button>
<!-- Minus red  -->
<button class="btn btn-link navicon-button">
    <span class="navicon navicon-red"></span>
</button>