Layout 1.0

Basic parts of layout are: .container - horizontal centering, .grid - negative margin of columns, .col - columns. Layout is vertically divided by .header, .main and .footer.

Colour Palette 1.1

@deprecated See new color palettes in Storybook.

Default styling

Gray accents

#fff

@gray-100
#f2f2f2

@gray-200
#e9e9e9

@gray-300
#dfdfdf

@gray-400
#c9c9c9

@gray-500
#b1b1b1

@gray-600
#8d8d8d

@gray-700
#666

@gray-800
#333

@gray-900
#131212

#000

Colors

@red-light
#dc555f

@red
#b00

@red-dark
#a00914

@blue-light
#e5f4fd

@blue
#0072bc

@blue-dark
#34495e

@green-light
#9befc4

@green
#03be87

@green-dark
#03a984

@orange
#f68b18

@orange-dark
#cf6b01

Brand Colors

@teamio-blue
#0096ee

@teamio-pink
#e61f60

@teamio-dark
#342e40

@brand-jobs
#19325a

@brand-prace
#ca2026

<h2>Gray accents</h2>
<div class="demo__palette">
    <div class="demo__palette__color bg-white">
        #fff
    </div>
    <div class="demo__palette__color bg-gray-100 text-teamio-dark">
        @gray-100<br>
        #f2f2f2
    </div>
    <div class="demo__palette__color bg-gray-200 text-teamio-dark">
        @gray-200<br>
        #e9e9e9
    </div>
    <div class="demo__palette__color bg-gray-300 text-teamio-dark">
        @gray-300<br>
        #dfdfdf
    </div>
    <div class="demo__palette__color bg-gray-400">
        @gray-400<br>
        #c9c9c9
    </div>
    <div class="demo__palette__color bg-gray-500">
        @gray-500<br>
        #b1b1b1
    </div>
    <div class="demo__palette__color bg-gray-600">
        @gray-600<br>
        #8d8d8d
    </div>
    <div class="demo__palette__color bg-gray-700">
        @gray-700<br>
        #666
    </div>
    <div class="demo__palette__color bg-gray-800">
        @gray-800<br>
        #333
    </div>
    <div class="demo__palette__color bg-gray-900">
        @gray-900<br>
        #131212
    </div>
    <div class="demo__palette__color bg-black">
        #000
    </div>
</div>
<h2>Colors</h2>
<div class="demo__palette">
    <div class="demo__palette__color bg-red--light">
        @red-light<br>
        #dc555f
    </div>
    <div class="demo__palette__color bg-red">
        @red<br>
        #b00
    </div>
    <div class="demo__palette__color bg-red--dark">
        @red-dark<br>
        #a00914
    </div>
    <div class="demo__palette__color bg-blue--light">
        @blue-light<br>
        #e5f4fd
    </div>
    <div class="demo__palette__color bg-blue">
        @blue<br>
        #0072bc
    </div>
    <div class="demo__palette__color bg-blue--dark">
        @blue-dark<br>
        #34495e
    </div>
    <div class="demo__palette__color bg-green--light">
        @green-light<br>
        #9befc4
    </div>
    <div class="demo__palette__color bg-green">
        @green<br>
        #03be87
    </div>
    <div class="demo__palette__color bg-green--dark">
        @green-dark<br>
        #03a984
    </div>
    <div class="demo__palette__color bg-orange">
        @orange<br>
        #f68b18
    </div>
    <div class="demo__palette__color bg-orange--dark">
        @orange-dark<br>
        #cf6b01
    </div>
</div>
<h2>Brand Colors</h2>
<div class="demo__palette">
    <div class="demo__palette__color bg-teamio--blue">
        @teamio-blue<br>
        #0096ee
    </div>
    <div class="demo__palette__color bg-teamio--pink">
        @teamio-pink<br>
        #e61f60
    </div>
    <div class="demo__palette__color bg-teamio--dark">
        @teamio-dark<br>
        #342e40
    </div>
    <div class="demo__palette__color bg-brand--jobs">
        @brand-jobs<br>
        #19325a
    </div>
    <div class="demo__palette__color bg-brand--prace">
        @brand-prace<br>
        #ca2026
    </div>
</div>

Grid System 1.2

Grid system is based on display: inline-block property. Avoid any whitespace between column tags. Empty comments may be used if line break is desirable because of code clarity. Mobile first: for small (and higher) screen resolution use class col-x--sm, for medium (750 px and higher) screen resolution use class col-x--md for large (1200+) screen use class col-x--lg. It is possible to create this combinations: A - quarter of the full width, B - third of the full width, C - half of the full width, D - full width.

Default styling

A.col .col-6--sm .col-3--md

B.col .col-4--md

C.col .col-6--md

D.col

<div class="grid">
    <div class="col col-6--sm col-3--md">
        <div class="demo__box"><strong>A</strong>.col .col-6--sm  .col-3--md</div>
    </div>
    <div class="col col-6--sm col-3--md">
        <div class="demo__box"><strong>A</strong>.col .col-6--sm  .col-3--md</div>
    </div>
    <div class="col col-6--sm col-3--md">
        <div class="demo__box"><strong>A</strong>.col .col-6--sm  .col-3--md</div>
    </div>
    <div class="col col-6--sm col-3--md">
        <div class="demo__box"><strong>A</strong>.col .col-6--sm  .col-3--md</div>
    </div>
    <div class="col col-4--md">
        <div class="demo__box"><strong>B</strong>.col .col-4--md</div>
    </div>
    <div class="col col-4--md">
        <div class="demo__box"><strong>B</strong>.col .col-4--md</div>
    </div>
    <div class="col col-4--md">
        <div class="demo__box"><strong>B</strong>.col .col-4--md</div>
    </div>
    <div class="col col-6--md">
        <div class="demo__box"><strong>C</strong>.col .col-6--md</div>
    </div>
    <div class="col col-6--md">
        <div class="demo__box"><strong>C</strong>.col .col-6--md</div>
    </div>
    <div class="col">
        <div class="demo__box"><strong>D</strong>.col</div>
    </div>
</div>

Grid Vertical Alignment 1.2.1

Default styling

Grid Top

A.col .col-6--sm

Grid Middle

A.col .col-6--sm

Grid Bottom

A.col .col-6--sm

<h2>Grid Top</h2>
<div class="grid">
    <div class="col col-6--sm">
        <div class="demo__box demo__box--xlarge-font"><strong>A</strong>.col .col-6--sm</div>
    </div>
    <div class="col col-6--sm">
        <div class="demo__box"><strong>A</strong>.col .col-6--sm</div>
    </div>
</div>
<h2>Grid Middle</h2>
<div class="grid grid--middle">
    <div class="col col-6--sm">
        <div class="demo__box demo__box--xlarge-font"><strong>A</strong>.col .col-6--sm</div>
    </div>
    <div class="col col-6--sm">
        <div class="demo__box"><strong>A</strong>.col .col-6--sm</div>
    </div>
</div>
<h2>Grid Bottom</h2>
<div class="grid grid--bottom">
    <div class="col col-6--sm">
        <div class="demo__box demo__box--xlarge-font"><strong>A</strong>.col .col-6--sm</div>
    </div>
    <div class="col col-6--sm">
        <div class="demo__box"><strong>A</strong>.col .col-6--sm</div>
    </div>
</div>

Fluid Grid 1.2.2

Fluid grid behaves as a table element with variable cell width. Back to the roots.

Default styling

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras magna enim, rhoncus vel tortor ac, efficitur tincidunt ligula. Etiam at congue quam, in sollicitudin tortor. Cras eu viverra nibh, vel pharetra eros. Phasellus ac luctus quam. Sed sed neque ex. Sed a neque nec ligula viverra congue consectetur quis diam.

Sed semper nec risus sit amet facilisis. Morbi id placerat justo, ut ultricies orci. Sed placerat hendrerit lectus. Quisque et ex laoreet, suscipit justo et, facilisis nunc. Ut non felis nisi.

Quisque et ex laoreet, suscipit justo et, facilisis nunc. Sed semper nec risus sit amet facilisis. Morbi id placerat justo, ut ultricies orci. Sed placerat hendrerit lectus. Quisque et ex laoreet, suscipit justo et, facilisis nunc. Ut non felis nisi.

<div class="grid grid--fluid">
    <div class="col col--fluid">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras magna enim, rhoncus vel tortor ac, efficitur tincidunt ligula. Etiam at congue quam, in sollicitudin tortor. Cras eu viverra nibh, vel pharetra eros. Phasellus ac luctus quam. Sed sed neque ex. Sed a neque nec ligula viverra congue consectetur quis diam.</p>
    </div>
    <div class="col col--fluid">
        <p>Sed semper nec risus sit amet facilisis. Morbi id placerat justo, ut ultricies orci. Sed placerat hendrerit lectus. Quisque et ex laoreet, suscipit justo et, facilisis nunc. Ut non felis nisi.</p>
    </div>
    <div class="col col--fluid">
        <p>Quisque et ex laoreet, suscipit justo et, facilisis nunc. Sed semper nec risus sit amet facilisis. Morbi id placerat justo, ut ultricies orci. Sed placerat hendrerit lectus. Quisque et ex laoreet, suscipit justo et, facilisis nunc. Ut non felis nisi.</p>
    </div>
</div>

Compact Grid 1.2.3

Compact grid with narrower column gutters.

Default styling

A.col .col-6--sm .col-3--md

B.col .col-4--md

B.col .col-8--md

D.col

<div class="grid grid--compact">
    <div class="col col-6--sm col-3--md">
        <div class="demo__box"><strong>A</strong>.col .col-6--sm .col-3--md</div>
    </div>
    <div class="col col-6--sm col-3--md">
        <div class="demo__box"><strong>A</strong>.col .col-6--sm .col-3--md</div>
    </div>
    <div class="col col-6--sm col-3--md">
        <div class="demo__box"><strong>A</strong>.col .col-6--sm .col-3--md</div>
    </div>
    <div class="col col-6--sm col-3--md">
        <div class="demo__box"><strong>A</strong>.col .col-6--sm .col-3--md</div>
    </div>
    <div class="col col-4--md">
        <div class="demo__box"><strong>B</strong>.col .col-4--md</div>
    </div>
    <div class="col col-8--md">
        <div class="demo__box"><strong>B</strong>.col .col-8--md</div>
    </div>
    <div class="col">
        <div class="demo__box"><strong>D</strong>.col</div>
    </div>
</div>

Space Sizing - Fibonacci Sequence 1.3

Variables for specify dimmensions. Sequence is defined up to @u-15.

Default styling

Sequence @u-1

Sequence @u-2

Sequence @u-3

Sequence @u-4

Sequence @u-5

Sequence @u-6

Sequence @u-7

Sequence @u-8

Sequence @u-9

Sequence @u-10

<div class="grid">
   <div class="col col-3--sm">
        <h3>Sequence @u-1</h3>
        <p class="demo__box sequence--1"></p>
        <h3>Sequence @u-2</h3>
        <p class="demo__box sequence--2"></p>
        <h3>Sequence @u-3</h3>
        <p class="demo__box sequence--3"></p>
        <h3>Sequence @u-4</h3>
        <p class="demo__box sequence--4"></p>
        <h3>Sequence @u-5</h3>
        <p class="demo__box sequence--5"></p>
        <h3>Sequence @u-6</h3>
        <p class="demo__box sequence--6"></p>
        <h3>Sequence @u-7</h3>
        <p class="demo__box sequence--7"></p>
        <h3>Sequence @u-8</h3>
        <p class="demo__box sequence--8"></p>
        <h3>Sequence @u-9</h3>
        <p class="demo__box sequence--9"></p>
        <h3>Sequence @u-10</h3>
        <p class="demo__box sequence--10"></p>
    </div>
</div>

Accessibility 1.4

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

Visually Hidden 1.4.1

Hide only visually, but have it available for screenreaders. Inspired by HTML5 Boilerplate.

Default styling

<a href="#" title="help">
    <span class="icon icon--help" aria-hidden="true"></span>
    <span class="visually-hidden">Help</span>
</a>