Layout 1.0

The layout is based on normalize.css and Emerald grid system.

See the demo page (TBD).

Colour palette 1.1

Please use only these colours.

Default styling

#19325a
@jobs-blue-basic
#1b6494
@dark-blue
#212f5c
@darker-blue
#0049ac
@blue
#0183c5
@light-blue
#edf4fb
@smurf-blue
#c9dce7
@gray-blue
#2595fe
@aero-blue
#3ed47d
@light-green
#090
@green
#00aa28
@dark-green
#999
@gray
#a6a9ae
@light-gray
#e8e8e8
@silver
#f4f4f4
@light-silver
#90750b
@gold
#eb8c00
@dark-orange
#f90
@jobs-orange
#fbeeb9
@light-yellow
#e4d081
@dark-yellow
#ffd200
@yellow
#f5a7a3
@light-red
#d40014
@red
#a70055
@lila
#000
@black
#fff
#fff
#333
@steel
<div class="grid kss__colours"><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #19325a">
            <div class="kss__colours__code">#19325a</div>
        </div>
        @jobs-blue-basic
    </div><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #1b6494">
             <div class="kss__colours__code">#1b6494</div>
        </div>
        @dark-blue
    </div><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #212f5c">
            <div class="kss__colours__code">#212f5c</div>
        </div>
        @darker-blue
    </div><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #0049ac">
            <div class="kss__colours__code">#0049ac</div>
        </div>
        @blue
    </div><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #0183c5">
            <div class="kss__colours__code">#0183c5</div>
        </div>
        @light-blue
    </div><!--
      --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #edf4fb">
            <div class="kss__colours__code">#edf4fb</div>
        </div>
        @smurf-blue
    </div><!--
      --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #c9dce7">
            <div class="kss__colours__code">#c9dce7</div>
        </div>
        @gray-blue
    </div><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #2595fe">
            <div class="kss__colours__code">#2595fe</div>
        </div>
        @aero-blue
    </div><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #3ed47d">
            <div class="kss__colours__code">#3ed47d</div>
        </div>
        @light-green
    </div><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #090">
            <div class="kss__colours__code">#090</div>
        </div>
        @green
    </div><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #00aa28">
            <div class="kss__colours__code">#00aa28</div>
        </div>
        @dark-green
    </div><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #999">
            <div class="kss__colours__code">#999</div>
        </div>
        @gray
    </div><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #a6a9ae">
            <div class="kss__colours__code">#a6a9ae</div>
        </div>
        @light-gray
    </div><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #e8e8e8">
            <div class="kss__colours__code">#e8e8e8</div>
        </div>
        @silver
    </div><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #f4f4f4">
            <div class="kss__colours__code">#f4f4f4</div>
        </div>
        @light-silver
    </div><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #90750b">
            <div class="kss__colours__code">#90750b</div>
        </div>
        @gold
    </div><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #eb8c00">
            <div class="kss__colours__code">#eb8c00</div>
        </div>
        @dark-orange
    </div><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #f90">
            <div class="kss__colours__code">#f90</div>
        </div>
        @jobs-orange
    </div><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #fbeeb9">
            <div class="kss__colours__code">#fbeeb9</div>
        </div>
        @light-yellow
    </div><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #e4d081">
            <div class="kss__colours__code">#e4d081</div>
        </div>
        @dark-yellow
    </div><!--
     --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #ffd200">
            <div class="kss__colours__code">#ffd200</div>
        </div>
        @yellow
    </div><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #f5a7a3">
            <div class="kss__colours__code">#f5a7a3</div>
        </div>
        @light-red
    </div><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #d40014">
            <div class="kss__colours__code">#d40014</div>
        </div>
        @red
    </div><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #a70055">
            <div class="kss__colours__code">#a70055</div>
        </div>
        @lila
    </div><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #000">
            <div class="kss__colours__code">#000</div>
        </div>
        @black
    </div><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #fff">
            <div class="kss__colours__code">#fff</div>
        </div>
        #fff
    </div><!--
    --><div class="grid__item e-3--palm e-4">
        <div class="kss__colours__sample" style="background: #333">
            <div class="kss__colours__code">#333</div>
        </div>
        @steel
    </div><!--
--></div>

Pit 1.2

An area reserved or enclosed for a specific purpose

Default styling

Oh, boy! I am in the pit!
.pit--inverse To be used to emphasize the contrast
Oh, boy! I am in the pit!
.pit--naked No border, no padding, no stress
Oh, boy! I am in the pit!
<div class="pit [modifier class]">
    Oh, boy! I am in the pit!
</div>

Hero 1.3

Displays the key content of the page.

Default styling

Nám společné traektorii
Nám společné traektorii
Nám společné traektorii
Nám společné traektorii
<div class="hero">
    <span class="hero__title">Nám společné traektorii</span>
</div>
<div class="hero hero--collapsed">
    <span class="hero__title">Nám společné traektorii</span>
</div>
<div class="hero hero--cover">
    <span class="hero__title">Nám společné traektorii</span>
</div>
<div class="hero hero--bold">
    <span class="hero__title hero__title--bold">Nám společné traektorii</span>
</div>

Floats 1.4

A content that is supposed to be aside of the main content.

Uses modificators in the same way as the grid.

Please always cover floats with a .clearfix box.

The Default styling features float--none for demonstration; this class effectively centers the content.

Default styling

Roste one ve hry ve nepřestat kam starat rozhlédnu. Svá si ano kameny stěhování severní, svůj starou exemplář i hluboké je araby chytré. Odhadují se modré temnějším strávila ho narušilo uplynulo nacházejí, s narušily evropskou z zdůrazňují portugalců. S oblohou lokální objevilo v hormonálních. Tam vidím.

.float--left Floated left with right margin

Roste one ve hry ve nepřestat kam starat rozhlédnu. Svá si ano kameny stěhování severní, svůj starou exemplář i hluboké je araby chytré. Odhadují se modré temnějším strávila ho narušilo uplynulo nacházejí, s narušily evropskou z zdůrazňují portugalců. S oblohou lokální objevilo v hormonálních. Tam vidím.

.float--right Floated right with left margin

Roste one ve hry ve nepřestat kam starat rozhlédnu. Svá si ano kameny stěhování severní, svůj starou exemplář i hluboké je araby chytré. Odhadují se modré temnějším strávila ho narušilo uplynulo nacházejí, s narušily evropskou z zdůrazňují portugalců. S oblohou lokální objevilo v hormonálních. Tam vidím.

<div class="clearfix">
    <img class="float--palm float--none--palm {modifier_class}}--palm"
         src="public/images/60x45.jpg" />
    <p>
        Roste one ve hry ve nepřestat kam starat rozhlédnu. Svá si ano kameny
        stěhování severní, svůj starou exemplář i hluboké je araby chytré.
        Odhadují se modré temnějším strávila ho narušilo uplynulo nacházejí, s
        narušily evropskou z zdůrazňují portugalců. S oblohou lokální objevilo
        v hormonálních. Tam vidím.
    </p>
</div>

Spacing classes 1.5

To ensure consistent vertical spacing use these classes.

Default styling

Look, there is a space below me!

I have a smaller space below!

I have a bigger space below!

<div class="standalone">Look, there is a space below me!</div>
<hr>
<div class="half-standalone">I have a smaller space below!</div>
<hr>
<div class="double-standalone">I have a bigger space below!</div>
<hr>

Sidebar 1.6

The additional information are displayed below on mobile and tablet and on the right on desktop. Most is achieved by the grid but the top padding is added on desktop. Hidden while printing.

Default styling

<div class="sidebar grid__item hidden--print e-7--desk e-push-2--desk">
    Come to the dark side! Ehm I mean sidebar.
</div>

Banners 1.7

Default styling

<div class="grid">
    <div class="grid__item e-7 banner">Banner content</div>
</div>

Widget 1.8

Promos with a title and a button for more information

Note: .e-7--desk class is used only for demonstration purposes.

Default styling

<div class="double-standalone e-7--desk">
    <div class="widget">
        <h2 class="widget__title">
            <span class="icon icon--bite-square icon--heading" aria-hidden="true"></span>
            <a href="#">Britští</a>
        </h2>
        <div class="grid"><!--
            --><div class="grid__item e-7">
                <div class="grid promo"><!--
                    --><div class="grid__item e-2--palm">
                        <a href="#"><img class="promo__image" src="public/images/60x45.jpg" /></a>
                    </div><!--
                    --><div class="grid__item e-6--palm e-5">
                        <a href="#">Jazykem stranu paliva</a>
                        <p>Pokaždé zoologie hlubšího</p>
                    </div><!--
                --></div>
            </div><!--
            --><div class="grid__item e-7 e-push-2 e-push-0--desk">
                <div class="grid promo"><!--
                    --><div class="grid__item e-7">
                        <a href="#">Jazykem stranu paliva k nežli smrky pozdější viditelný</a>
                        <p>Pokaždé zoologie hlubšího</p>
                    </div><!--
                --></div>
            </div><!--
            --><div class="grid__item e-7">
                <a class="button" href="#">Respirátorem</a>
            </div><!--
        --></div>
    </div>
</div>

Accessibility 1.9

For users with visual impairments, hearing impairments, and mobility impairments we strive to make our pages more accessible.

Visually hidden 1.9.1

Hide only visually, but have it available for screenreaders; cf. Hiding Content for Accessibility.

Default styling

<a href="#">
    <span class="icon icon--house" aria-hidden="true"></span>
    <span class="visuallyhidden">Go to homepage</span>
</a>

Folding Panel 1.10

Folding panel with hidden content, which is showed after clicking on the panel title.

The grid used in folding panel is for demo purpose and is fully customizable.

The second panel is adjusted to fit the sidebar.

Default styling


Vy zakladatele
Atlantik vysocí

K horké námořních stád

Její vše nejblíže výška zkrátka vysokého pomoci kvalitního příznivější, s dynamit pořádá špatná stačit.

K horké námořních stád

Její vše nejblíže výška zkrátka vysokého pomoci kvalitního příznivější, s dynamit pořádá špatná stačit.

<div data-folding-panel-list>
    <div class="folding-panel">
        <hr class="folding-panel__separator">
        <div class="grid">
            <div class="grid__item e-9--palm e-16">
                <div class="folding-panel__head">
                    <div class="grid">
                        <div class="grid__item e-9--palm e-8">
                            <div class="folding-panel__head__main">
                                <span class="icon folding-panel__icon icon--arrow-right" aria-hidden="true"></span>
                                <a href="#">
                                    A výkyvy proslulou začali
                                </a>
                            </div>
                        </div><!--
                        --><div class="grid__item e-9--palm e-5">
                            Vy zakladatele
                        </div><!--
                        --><div class="grid__item e-9--palm e-3">
                            Atlantik vysocí
                        </div>
                    </div>
                </div>
                <div class="folding-panel__body">
                    <p>
                        K horké námořních stád
                    </p>
                    <p>
                        Její vše nejblíže výška zkrátka vysokého pomoci kvalitního příznivější,
                        s dynamit pořádá špatná stačit.
                    </p>
                    <div class="half-standalone">
                        <ul class="list-unstyled">
                            <li>
                                <a href="#">
                                    Jejíž z rodin
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="half-standalone">
                        <a class="button" href="#">
                            Výzev vysocí
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="folding-panel folding-panel--tight">
        <div class="grid">
            <div class="grid__item e-7">
                <div class="folding-panel__head">
                    <div class="grid">
                        <div class="grid__item e-7">
                            <div class="folding-panel__head__main">
                                <span class="icon folding-panel__icon icon--arrow-right" aria-hidden="true"></span>
                                <a href="#">
                                    A výkyvy proslulou začali pomoci kvalitního
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="folding-panel__body">
                    <div class="grid">
                        <div class="grid__item e-7">
                            <p>
                                K horké námořních stád
                            </p>
                            <p>
                                Její vše nejblíže výška zkrátka vysokého pomoci kvalitního příznivější,
                                s dynamit pořádá špatná stačit.
                            </p>
                            <div class="half-standalone">
                                <ul class="list-unstyled">
                                    <li>
                                        <a href="#">
                                            Jejíž z rodin
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="half-standalone">
                                <a class="button" href="#">
                                    Výzev vysocí
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Horizontal separator 1.11

Separates vertical items. Makes top border of the element.

Default styling

I'm before of the horizontal separator
I'm after the horizontal separator
I'm inside of the horizontal separator
<div class="hero hero--bold" style="background-color: #19325a">
    <span>I'm before of the horizontal separator</span>
    <hr class="horizontal-separator">
    <span>I'm after the horizontal separator</span>
    <div class="horizontal-separator">
        <span>I'm inside of the horizontal separator</span>
    </div>
</div>