{% extends "layout.html" %} {% load currency_filters %} {% load i18n %} {% block headertext %} {{ flatpage.title }} {% endblock %} {% block flatpage %}
{{ flatpage.content }}

{% trans 'Colours' %}

{% trans 'Hyperlinks' %}

@linkColor #08c Default link text color
@linkColorHover darken(@linkColor, 15%) Default link text hover color

Grayscale colors

@black #000
@grayDarker #222
@grayDark #333
@gray #555
@grayLight #999
@grayLighter #eee
@white #fff

Accent colors

@blue #049cdb
@green #46a546
@red #9d261d
@yellow #ffc40d
@orange #f89406
@pink #c3325f
@purple #7a43b6

Form states, alerts and wells

@warningText #c09853
@warningBackground #f3edd2
@errorText #b94a48
@errorBackground #f2dede
@successText #468847
@successBackground #dff0d8
@infoText #3a87ad
@infoBackground #d9edf7

Forms

@placeholderText @grayLight

Navbar

@navbarHeight 40px
@navbarBackground @grayDarker
@navbarBackgroundHighlight @grayDark
@navbarText @grayLight
@navbarLinkColor @grayLight
@navbarLinkColorHover @white

Typography

Base Fonts

@baseFontSize 13px
@baseFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@baseLineHeight 18px
@textColor @grayDark

Headings

h1 font-size: 30px
line-height: @baseLineHeight * 2

Heading

h2 font-size: 24px
line-height: @baseLineHeight * 2

Heading

h3 font-size: 18px
line-height: @baseLineHeight * 1.5

Heading

h4 14px

Heading

h5 12px
Heading
h6 11px
color: @grayLight
text-transform: uppercase
Heading
<div class="page-header"> background:lighten(@grayLighter, 4.5%)
padding:@gridGutterWidth
margin-bottom: @baseLineHeight
border-bottom: 1px solid darken(@grayLighter, 5.5%)
<div class="sub-header"> margin-bottom: @baseLineHeight
border-bottom: 1px solid darken(@grayLighter, 5.5%)

Sub Header

Unordered List <ul>
  • List item 1
  • List item 2
  • List item 3
Ustyled List <ul class="unstyled">
  • List item 1
  • List item 2
  • List item 3
Ordered List <ol>
  1. List item 1
  2. List item 2
  3. List item 3
Description List <dl>
Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Buttons

.btn
.btn .btn-primary @primaryButtonBackground @linkColor
.btn .btn-success .buttonBackground(lighten(@green, 15%), @green) @green

Mixins

Utilities

Mixin Parameters Usage Example
.clearfix() none Add to any parent to clear floats within
.tab-focus() none Apply the Webkit focus style and round Firefox outline
.center-block() none .test-center { .center-block() }
.ie7-inline-block() none Use in addition to regular display: inline-block to get IE7 support
.size() @height: 5px, @width: 5px .test-size { .size(25px, 7px) }
.square() @size: 5px .test-square { .square(25px) }
.opacity() @opacity: 100 .test-opacity { .opacity(50) }

CSS3 properties

Mixin Parameters Usage Example
.border-radius() @radius: 5px .test-radius { .border-radius(10px) }
.box-shadow() @shadow: 0 1px 3px rgba(0,0,0,.25) .test-shadow { .box-shadow(2px 2px 3px rgba(0,0,0,.5)) }
.transition() @transition .test-transition { .transition(all 1s ease-in-out); &:hover{background:@green} }
  • transition:
    1. transition-property
    2. transition-duration
    3. transition-timing-function
    4. transition-delay
hover
.rotate() @degrees .test-rotation { .rotate(50deg) }
.scale() @ratio .test-scale { .scale(0.5) }
.translate() @x: 0, @y: 0 .test-translate { .translate(15px, 5px) }
.background-clip() @clip .test-clip { border: 5px solid @yellow;padding:5px;.background-clip(content); }
  • border
  • padding-box
  • content
Content
.background-size() @size .test-bgsize { background:url('http://placehold.it/260x180') no-repeat 0 0 @green;.background-size(10px auto) }
.box-sizing() @boxmodel .test-sizing { border:3px solid @red;padding:2px;.box-sizing(border-box) }
.user-select() @select .test-select { .user-select(none) }
  • auto
  • none
  • text
select text
.resizable() @direction: both .test-resizable { .resizable(both);max-width:40px;max-height:40px;}
  • horizontal
  • vertical
  • both
.content-columns() @columnCount, @columnGap: @gridColumnGutter .test-column { .content-columns(3,10) }

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam condimentum. Praesent euismod auctor dui. Nunc ut leo vel magna adipiscing tempor. Donec pretium, ligula et hendrerit faucibus, sem velit accumsan tortor, sodales tempor est ligula non velit. Nulla sagittis, odio quis porta nonummy, mauris arcu gravida odio, quis aliquam lacus elit non

Backgrounds and gradients

Mixin Parameters Usage
#translucent > .background() .test-transback { #translucent > .background(@green,0.5) }
#translucent > .border() .test-transborder { border:3px solid @black;#translucent > .border(@red,0.5) }
#gradient > .vertical() .test-gradvert { #gradient > .vertical(@green, @yellow) }
#gradient > .horizontal() .test-gradhoriz { #gradient > .horizontal(@green, @yellow) }
#gradient > .directional() .test-graddirect{ #gradient > .directional(@green, @yellow, 45deg) }
#gradient > .vertical-three-colors() .test-gradthreecolors { #gradient > .vertical-three-colors(@black, @white, 50%, @grayDark) }
#gradient > .radial() .test-gradradial { #gradient > .radial(@yellow, @blue) }
#gradient > .striped() .test-gradstriped { #gradient > .striped(@blue, 45deg) }
.gradientBar() .test-gradbar { .gradientBar(@blue, @green) }
{% endblock %}