2. Layout

2.1 — Aligner

Vertical centering solved by flexbox.

Example

Centered!
<div class="aligner">
    <div class="aligner-item">Centered!</div>
</div>

2.2 — Footer

Page footer with links and logo.

Example

<footer role="contentinfo" class="footer">
    <div class="container">
       <div class="row">
           <div class="col-md-6">
               © VisionApps, s.r.o. 2016
               <span class="footer-divider">|</span>
               <a href="#" target="_blank">Contact</a>
           </div>
           <div class="col-md-6">
               <a href="http://www.visionapps.cz" target="_blank" class="footer-author" title="Created by VisionApps">
                   <img src="assets/images/visionapps.svg" width="90" height="16" alt="VisionApps" />
               </a>
           </div>
       </div><!-- .row -->
    </div><!-- .container -->
</footer>

2.3 — Layout

Bootstrap grid is used. For easier development, there are .content and .sidebar shortcuts for the most common layout components so you do not have to remember the exact classes (.col-md-9 and .col-md-3).

Example

Right sidebar:

This is the content.

Left sidebar:

This is the content.

Reverse column order:

This is the content.

<p><strong>Right sidebar:</strong></p>
<div class="row">
    <div class="content">
        <p class="kss__example-box">This is the content.</p>
    </div>
    <div class="sidebar">
        <p class="kss__example-box">And I am sidebar!</p>
    </div>
</div><!-- .row -->
<p><strong>Left sidebar:</strong></p>
<div class="row">
    <div class="sidebar">
        <p class="kss__example-box">I am sidebar!</p>
    </div>
    <div class="content">
        <p class="kss__example-box">This is the content.</p>
    </div>
</div><!-- .row -->
<p><strong>Reverse column order:</strong></p>
<div class="row row-reverse">
    <div class="sidebar">
        <p class="kss__example-box">I am sidebar that is (on the) right and goes mobile first!</p>
    </div>
    <div class="content">
        <p class="kss__example-box">This is the content.</p>
    </div>
</div><!-- .row -->

2.4 — Offset

Simple helper for providing additional margin.

Example

Left Offset

There is a gap between me and the icon.

This gap is a bit larger.

Right Offset

There is a gap between me and the icon.

This gap is a bit larger.

Top Offset

I have small top spacing.
I have some regular top spacing.
I have big top spacing!
I have HUGE top spacing!

I have no top spacing :/.

Bottom Offset

I have small bottom spacing.
I have some regular bottom spacing. Just like a real paragraph, weehoo!
I have big bottom spacing!
I have HUGE bottom spacing!

I have no bottom spacing :/.

<div class="row offset-bottom">
    <div class="col-sm-6">
        <h4>Left Offset</h4>
        <p>
            There is a gap between me and the icon.
            <span class="glyphicon glyphicon-tree-conifer offset-left" aria-hidden="true"></span>
        </p>
        <p>
            This gap is a bit larger.
            <span class="glyphicon glyphicon-tree-conifer offset-left-large" aria-hidden="true"></span>
        </p>
    </div>
    <div class="col-sm-6">
        <h4>Right Offset</h4>
        <p>
            <span class="glyphicon glyphicon-tree-deciduous offset-right" aria-hidden="true"></span>
            There is a gap between me and the icon.
        </p>
        <p>
            <span class="glyphicon glyphicon-tree-deciduous offset-right-large" aria-hidden="true"></span>
            This gap is a bit larger.
        </p>
    </div>
</div>
<div class="row">
    <div class="col-sm-6">
        <h4>Top Offset</h4>
        <div class="offset-top-small">I have small top spacing.</div>
        <div class="offset-top">I have some regular top spacing.</div>
        <div class="offset-top-large">I have big top spacing!</div>
        <div class="offset-top-larger">I have HUGE top spacing!</div>
        <p class="offset-top-none">I have no top spacing :/.</p>
    </div>
    <div class="col-sm-6">
        <h4>Bottom Offset</h4>
        <div class="offset-bottom-small">I have small bottom spacing.</div>
        <div class="offset-bottom">I have some regular bottom spacing. Just like a real paragraph, weehoo!</div>
        <div class="offset-bottom-large">I have big bottom spacing!</div>
        <div class="offset-bottom-larger">I have HUGE bottom spacing!</div>
        <p class="offset-bottom-none">I have no bottom spacing :/.</p>
    </div>
</div>

2.4.1 — Responsive Offset

Offset that only applies in a linear layout.

Example

I have extra bottom spacing on extra small screens (xs).
I have extra bottom spacing on small screens (sm).
I have big bottom spacing on extra small screens (xs).
I have big bottom spacing on small screens (sm).
I have HUGE bottom spacing on extra small screens (xs).
I have HUGE bottom spacing on small screens (sm).
<div class="offset-bottom-xs-max">I have extra bottom spacing on extra small screens (xs).</div>
<div class="offset-bottom-sm-max">I have extra bottom spacing on small screens (sm).</div>
<div class="offset-bottom-large-xs-max">I have big bottom spacing on extra small screens (xs).</div>
<div class="offset-bottom-large-sm-max">I have big bottom spacing on small screens (sm).</div>
<div class="offset-bottom-larger-xs-max">I have HUGE bottom spacing on extra small screens (xs).</div>
<div class="offset-bottom-larger-sm-max">I have HUGE bottom spacing on small screens (sm).</div>

2.5 — Sections

Sections are used to structure the page content.

Example

Page Title

Subtitle

Condensed Header Section

This is the content of the page.

Primary Section

This will recolor section to primary color. Works both with header and content sections.

<section class="section-header">
    <div class="container">
        <h1 class="section-header-title">Page Title</h1>
        <h2 class="section-header-subtitle">Subtitle</h2>
    </div><!-- .container -->
</section>
<section class="section-header section-header-condensed">
    <div class="container">
        <h1 class="section-header-title">Condensed Header Section</h1>
    </div><!-- .container -->
</section>
<section class="section-content">
    <div class="container">
        <p>This is the content of the page.</p>
    </div><!-- .container -->
</section>
<section class="section-primary">
    <div class="container">
        <h1>Primary Section</h1>
        <p>This will recolor section to primary color. Works both with header and content sections.</p>
    </div><!-- .container -->
</section>

2.6 — Site

Use the following markup to turn the site into fluid flexbox layout with sticky footer. Credits for cross-browser solution go to Philip Walton.

Example

Main Content
Sticky Footer
<body class="site">
    <header role="banner" class="site-header">
        <div class="kss__example-box">Header</div>
    </header>
    <main role="main" class="site-content">
        <div class="kss__example-box">Main Content</div>
    </main>
    <footer role="contentinfo" class="site-footer">
        <div class="kss__example-box">Sticky Footer</div>
    </footer>
</body>