KlokanTech Base CSS

This is the repository for the base cascading styles.

Typography

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dignissim molestie turpis, vitae faucibus sem consectetur ut. Vestibulum vitae tellus tellus. Nullam mollis, ligula non porttitor laoreet, sem metus semper neque, nec condimentum magna velit id risus. Nam cursus laoreet luctus. Aliquam ex tortor, congue nec interdum sit amet, euismod pellentesque arcu. Vivamus mi mauris, volutpat a orci ut, sodales rhoncus magna. Pellentesque posuere vel nulla ut accumsan. Aenean at ligula odio. Pellentesque pulvinar augue neque, sed ultricies enim viverra in. Ut quis nibh orci.

In vel convallis massa. Duis ultrices libero id augue ullamcorper vehicula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce id felis vel metus efficitur faucibus ut at nisi. Proin eros nisl, ultricies quis porta sed, mollis a erat. Duis ex nisl, pharetra maximus lacus nec, porttitor interdum diam. Nulla mattis eu risus sed imperdiet.

smaller 65%
small 85%
normal
big 115%
bigger 135%

hyperlink
defining
abbreviation
strong
bold
offset text typically styled in italic
cited title of a work
emphatic
inserted text
deleted text
marked (highlighted) text

Heading

Heading

Heading

Heading

Heading

List ul

List ol

  1. Mercator
  2. WGS84
  3. ETRS
  4. UTM

Buttons

.btn-*

Download Give me a map! Give me a map! Gray dark Gray light

.btn-small-*

Download Give me a map! Give me a map! Gray dark Gray light

.btn-stroke-*

Download Give me a map! Give me a map! Gray dark Gray light

.btn-large

Download

Download MapTiler

Buttons collection

Borders

border-*
bordertop-*
borderright-*
borderbottom-*

hr


Colors

primary

secondary

gray-light

gray-dark

warning

success

danger

white

black

primary

secondary

gray-light

gray-dark

warning

success

danger

white

black

Helpers

.round

.round-left-top

.round-right-bottom

.circle

Other:
.clearfix
.hidden

.center
.clip
.contain

Grid system

12 columns

col12
col6
col6
col3
col3
col3
col3
col2
col2
col2
col2
col2
col2
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1

Grid offset

offset2
offset4
offset6
offset8
offset10

Vertical grid

row1

row2

row3

row4

Image grid

Tables

Usage:

<table>
  <thead>
    <tr><td>Header</td></tr>
  </thead>
  <tbody>
    <tr><td>Content</td></tr>
  </tbody>
</table>

Ticket Name Milestone Created
#5Report 122014.02.13
#1Report 232014.02.13
#2Report 332014.02.13
#3Report 412014.02.13
Sum 4 3

Striped & hover

Usage: <table class="striped hover"> ... </table>

Ticket Name Milestone Created
#5Report 122014.02.13
#1Report 232014.02.13
#2Report 332014.02.13
#3Report 412014.02.13
Sum 4 3

Forms







Stretched:

Radio, checkbox





Messages

You cen use hideMessages(seconds); (def. 2 sec.) for hidden all messages via javascript.

class="message"
class="message success"
class="message warning"
class="message error"

Progress bars

0
40
104
280
0
50
100