{% 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%) |
Page Header |
<div class="sub-header"> | margin-bottom: @baseLineHeight border-bottom: 1px solid darken(@grayLighter, 5.5%) |
Sub Header |
Unordered List | <ul> |
|
Ustyled List | <ul class="unstyled"> |
|
Ordered List | <ol> |
|
Description List | <dl> |
|
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} }
|
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); }
|
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) }
|
select text |
.resizable() |
@direction: both |
.test-resizable { .resizable(both);max-width:40px;max-height:40px;}
|
|
.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) } |