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

#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

<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

.float--right Floated right with left margin

<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

spacing-classes.hbs NOT FOUND!

spacing-classes.hbs NOT FOUND!

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

Go to homepage

<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

A výkyvy proslulou začali

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.

Jejíž z rodin

Výzev vysocí

A výkyvy proslulou začali pomoci kvalitního

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.

Jejíž z rodin

Výzev vysocí

<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>