Transitions
transition-none
No transition
Hover over me!
<a href="#" class="btn btn-default transition-none">Hover over me!></a>
transition-third
0.35 second transition
Hover over me!
<a href="#" class="btn btn-default transition-third">Hover over me!></a>
transition-half
0.5 seconds transition
Hover over me!
<a href="#" class="btn btn-default transition-half">Hover over me!></a>
Border Radiuses
border-radius-two
2px border radius
<img class="border-radius-two" src="http://www.placehold.it/120x120">
border-radius-three
3px border radius
<img class="border-radius-three" src="http://www.placehold.it/120x120">
border-radius-four
4px border radius
<img class="border-radius-four" src="http://www.placehold.it/120x120">
border-radius-five
5px border radius
<img class="border-radius-five" src="http://www.placehold.it/120x120">
border-radius-six
6px border radius
<img class="border-radius-six" src="http://www.placehold.it/120x120">
border-radius-top-none
0px border radius on top of item
<img class="border-radius-six border-radius-top-none" src="http://www.placehold.it/120x120">
border-radius-bottom-none
0px border radius on bottom of item
<img class="border-radius-six border-radius-bottom-none" src="http://www.placehold.it/120x120">
Colors
BuildFire Theme Colors
Add 'btn' and 'btn-(type)' classes to an a link
btn-primary btn-success btn-info btn-warning btn-danger
// Primary
<a href="#" class="btn btn-primary transition-half">Text></a>
// Success
<a href="#" class="btn btn-success transition-half">Text></a>
// Info
<a href="#" class="btn btn-info transition-half">Text></a>
// Warning
<a href="#" class="btn btn-warning transition-half">Text></a>
// Danger
<a href="#" class="btn btn-danger transition-half">Text></a>
Add 'alert' and 'alert-(type)' classes to a div
// Primary
<div class="alert alert-primary transition-half">Text</div>
// Success
<div class="alert alert-success transition-half">Text</div>
// Info
<div class="alert alert-info transition-half">Text</div>
// Warning
<div class="alert alert-warning transition-half">Text</div>
// Danger
<div class="alert alert-danger transition-half">Text</div>
default-color
This is the default color (#f5f5f5)
<p class="default-color">Text</p>
default-background
Default background (#eef0f0)
<a href="#" class="btn btn-default transition-half default-background">Link</a>
default-background-hover
Default background on hover (#eef0f0)
<a href="#" class="btn btn-default default-background-hover transition-half">Link</a>
primary-color
This is the primary color (#09a3ee)
<a href="#" class="transition-half primary-color">Link</a>
primary-color-hover
Hover to see primary color
<a href="#" class="btn btn-default transition-half primary-color-hover">Link</a>
primary-background-hover
Hover to see primary background
<a href="#" class="btn btn-default transition-half primary-background-hover">Link</a>
no-background
This is element with no background
<a href="#" class="btn btn-default transition-half no-background">Link</a>
no-background-hover
Hover to see no background on an element
<a href="#" class="btn btn-default transition-half no-background no-background-hover">Link</a>
Margins
margin-zero
No margin on all 4 sides
<img src="http://www.placehold.it/80x80" class="margin-zero">
margin-top-zero
No margin on top
<img src="http://www.placehold.it/80x80" class="margin-top-zero">
margin-bottom-zero
No margin on bottom
<img src="http://www.placehold.it/80x80" class="margin-bottom-zero">
margin-left-zero
No margin on left
<img src="http://www.placehold.it/80x80" class="margin-left-zero">
margin-right-zero
No margin on right
<img src="http://www.placehold.it/80x80" class="margin-right-zero">
margin-top-five
5px margin on top
<img src="http://www.placehold.it/80x80" class="margin-top-five">
margin-bottom-five
5px margin on bottom
<img src="http://www.placehold.it/80x80" class="margin-bottom-five">
margin-left-five
5px margin on left
<img src="http://www.placehold.it/80x80" class="margin-left-five">
margin-right-five
5px margin on right
<img src="http://www.placehold.it/80x80" class="margin-right-five">
margin-top-ten
10px margin on top
<img src="http://www.placehold.it/80x80" class="margin-top-ten">
margin-bottom-ten
10px margin on bottom
<img src="http://www.placehold.it/80x80" class="margin-bottom-ten">
margin-left-ten
10px margin on left
<img src="http://www.placehold.it/80x80" class="margin-left-ten">
margin-right-ten
10px margin on right
<img src="http://www.placehold.it/80x80" class="margin-right-ten">
margin-top-fifteen
15px margin on top
<img src="http://www.placehold.it/80x80" class="margin-top-fifteen">
margin-bottom-fifteen
15px margin on bottom
<img src="http://www.placehold.it/80x80" class="margin-bottom-fifteen">
margin-left-fifteen
15px margin on left
<img src="http://www.placehold.it/80x80" class="margin-left-fifteen">
margin-right-fifteen
15px margin on right
<img src="http://www.placehold.it/80x80" class="margin-right-fifteen">
margin-top-twenty
20px margin on top
<img src="http://www.placehold.it/80x80" class="margin-top-twenty">
margin-bottom-twenty
20px margin on bottom
<img src="http://www.placehold.it/80x80" class="margin-bottom-twenty">
margin-left-twenty
20px margin on left
<img src="http://www.placehold.it/80x80" class="margin-left-twenty">
margin-right-twenty
20px margin on right
<img src="http://www.placehold.it/80x80" class="margin-right-twenty">
margin-top-thirty
30px margin on top
<img src="http://www.placehold.it/80x80" class="margin-top-thirty">
margin-bottom-thirty
30px margin on bottom
<img src="http://www.placehold.it/80x80" class="margin-bottom-thirty">
margin-left-thirty
30px margin on left
<img src="http://www.placehold.it/80x80" class="margin-left-thirty">
margin-right-thirty
30px margin on right
<img src="http://www.placehold.it/80x80" class="margin-right-thirty">
Padding
padding-zero
No padding on all 4 sides
<img src="http://www.placehold.it/80x80" class="padding-zero">
padding-top-zero
No padding on top
<img src="http://www.placehold.it/80x80" class="padding-top-zero">
padding-bottom-zero
No padding on bottom
<img src="http://www.placehold.it/80x80" class="padding-bottom-zero">
padding-left-zero
No padding on left
<img src="http://www.placehold.it/80x80" class="padding-left-zero">
padding-right-zero
No padding on right
<img src="http://www.placehold.it/80x80" class="padding-right-zero">
padding-top-five
5px padding on top
<img src="http://www.placehold.it/80x80" class="padding-top-five">
padding-bottom-five
5px padding on bottom
<img src="http://www.placehold.it/80x80" class="padding-bottom-five">
padding-left-five
5px padding on left
<img src="http://www.placehold.it/80x80" class="padding-left-five">
padding-right-five
5px padding on right
<img src="http://www.placehold.it/80x80" class="padding-right-five">
padding-top-ten
10px padding on top
<img src="http://www.placehold.it/80x80" class="padding-top-ten">
padding-bottom-ten
10px padding on bottom
<img src="http://www.placehold.it/80x80" class="padding-bottom-ten">
padding-left-ten
10px padding on left
<img src="http://www.placehold.it/80x80" class="padding-left-ten">
padding-right-ten
10px padding on right
<img src="http://www.placehold.it/80x80" class="padding-right-ten">
padding-top-fifteen
15px padding on top
<img src="http://www.placehold.it/80x80" class="padding-top-fifteen">
padding-bottom-fifteen
15px padding on bottom
<img src="http://www.placehold.it/80x80" class="padding-bottom-fifteen">
padding-left-fifteen
15px padding on left
<img src="http://www.placehold.it/80x80" class="padding-left-fifteen">
padding-right-fifteen
15px padding on right
<img src="http://www.placehold.it/80x80" class="padding-right-fifteen">
padding-top-twenty
20px padding on top
<img src="http://www.placehold.it/80x80" class="padding-top-twenty">
padding-bottom-twenty
20px padding on bottom
<img src="http://www.placehold.it/80x80" class="padding-bottom-twenty">
padding-left-twenty
20px padding on left
<img src="http://www.placehold.it/80x80" class="padding-left-twenty">
padding-right-twenty
20px padding on right
<img src="http://www.placehold.it/80x80" class="padding-right-twenty">
padding-top-thirty
30px padding on top
<img src="http://www.placehold.it/80x80" class="padding-top-thirty">
padding-bottom-thirty
30px padding on bottom
<img src="http://www.placehold.it/80x80" class="padding-bottom-thirty">
padding-left-thirty
30px padding on left
<img src="http://www.placehold.it/80x80" class="padding-left-thirty">
padding-right-thirty
30px padding on right
<img src="http://www.placehold.it/80x80" class="padding-right-thirty">
Ellipsis
ellipsis
Makes sentences/words on 1 line go to ...
Must be applied on a display:inline-block or block element with a max-width defined.
This sentence does not have ellipsis, so it will keep going.
This sentence does have ellipsis, so it will keep going.
<p class="ellipsis" style="max-width:50%;">Text.</p>
Borders
border-grey
1px border grey on 4 sides
Border Grey
<a href="#" class="border-grey btn transition-third">Link</a>
border-top-grey
1px border grey on top
Border Top Grey
<a href="#" class="border-top-grey btn transition-third">Link</a>
border-left-grey
1px border grey on left
Border Left Grey
<a href="#" class="border-left-grey btn transition-third">Link</a>
border-right-grey
1px border grey on right
Border Right Grey
<a href="#" class="border-right-grey btn transition-third">Link</a>
border-bottom-grey
1px border grey on bottom
Border Bottom Grey
<a href="#" class="border-bottom-grey btn transition-third">Link</a>
border-none
0px border on item
Border None
<a href="#" class="border-none btn transition-third">Link</a>
Opacity
opacity-ten
Make an element 10% opacity.
<img src="http://www.placehold.it/80x80" class="opacity-ten">
opacity-twenty
Make an element 20% opacity.
<img src="http://www.placehold.it/80x80" class="opacity-twenty">
opacity-thirty
Make an element 30% opacity.
<img src="http://www.placehold.it/80x80" class="opacity-thirty">
opacity-forty
Make an element 40% opacity.
<img src="http://www.placehold.it/80x80" class="opacity-forty">
opacity-fifty
Make an element 50% opacity.
<img src="http://www.placehold.it/80x80" class="opacity-fifty">
opacity-sixty
Make an element 60% opacity.
<img src="http://www.placehold.it/80x80" class="opacity-sixty">
opacity-seventy
Make an element 70% opacity.
<img src="http://www.placehold.it/80x80" class="opacity-seventy">
opacity-eighty
Make an element 80% opacity.
<img src="http://www.placehold.it/80x80" class="opacity-eighty">
opacity-ninety
Make an element 90% opacity.
<img src="http://www.placehold.it/80x80" class="opacity-ninety">
Rotate
rotate-90
Rotate an element 90 degrees.
1 2 3 1 2 3
<span class="rotate-90">Text</span>
rotate-180
Rotate an element 180 degrees.
1 2 3 1 2 3
<span class="rotate-180">Text</span>
rotate-270
Rotate an element 270 degrees.
1 2 3 1 2 3
<span class="rotate-270">Text</span>
rotate-360
Rotate an element 360 degrees.
1 2 3 1 2 3
<span class="rotate-360">Text</span>
Form Inputs
form-group and form-control
Applies bootstrap theme to form inputs.
Use only for input type text or password. Scroll down to see other input types.
<input type="text" value="standard input">
<input type="password" value="standard input">
Adding class="form-control", automatically styles the input to this.
<input type="text" value="form-control" class="form-control">
<input type="password" value="form-control" class="form-control">
If you want to stack and add space in-between the inputs, style using margin classes above. Example add class="margin-bottom-fifteen"
<input type="text" value="form-control" class="form-control margin-bottom-fifteen">
<input type="password" value="form-control" class="form-control">
dropdown
We will not be using any selects. We will be using bootstraps dropdown instead.
Whether you use jQuery or Angular, you will need to follow the steps below to make the dropdown functional.
jQuery
Step 1. Load jQuery library and /jquery/bootstrap.min.js file.
Step 2. Load /styles/siteIcons.css for the chevron icon to load.
Note: Bootstrap requires jQuery 1.9.1 or higher.
Angular
Step 1. Load /angular/angular.min.js and /angular/ui-bootstrap.min.js files.
Step 2. Add ng-app="appName" to your html tag.
Step 3. With JS, you will need to set up ui.bootstrap as a dependency for your app.
Ex. angular.module('appName', ['ui.bootstrap']);
Step 4. Load /styles/siteIcons.css for the chevron icon to load.
<div class="dropdown" dropdown>
<button class="btn btn-default text-left transition-half dropdown-toggle border-grey default-color" data-toggle="dropdown" dropdown-toggle aria-expanded="true">
<span class="pull-left">Options</span>
<span class="chevron transition-third icon-chevron-down pull-right"></span>
</button>
<ul class="dropdown-menu border-grey extended" role="menu">
<li>< tabindex="-1" class="transition-third">Option 1</a></li>
<li>< tabindex="-1" class="transition-third">Option 2</a></li>
<li>< tabindex="-1" class="transition-third">Option 3</a></li>
</ul>
checkbox
We will be using a styled checkbox instead of the default browser checkbox.
Note: Add checked="" to the input if you want it to be checked by default.
checkboxid is just a placeholder.
// Primary
<div class="checkbox checkbox-primary">
<input id="checkboxid" type="checkbox">
<label for="checkboxid">Label</label>
</div>
// Success
<div class="checkbox checkbox-success">
<input id="checkboxid" type="checkbox">
<label for="checkboxid">Label</label>
</div>
// Info
<div class="checkbox checkbox-info">
<input id="checkboxid" type="checkbox">
<label for="checkboxid">Label</label>
</div>
// Warning
<div class="checkbox checkbox-warning">
<input id="checkboxid" type="checkbox">
<label for="checkboxid">Label</label>
</div>
// Danger
<div class="checkbox checkbox-danger">
<input id="checkboxid" type="checkbox">
<label for="checkboxid">Label</label>
</div>
If you don't want to have a label for the checkbox.
// Primary
<div class="checkbox checkbox-primary no-label">
<input id="checkboxid" type="checkbox">
<label for="checkboxid"></label>
</div>
// Success
<div class="checkbox checkbox-success no-label">
<input id="checkboxid" type="checkbox">
<label for="checkboxid"></label>
</div>
// Info
<div class="checkbox checkbox-info no-label">
<input id="checkboxid" type="checkbox">
<label for="checkboxid"></label>
</div>
// Warning
<div class="checkbox checkbox-warning no-label">
<input id="checkboxid" type="checkbox">
<label for="checkboxid"></label>
</div>
// Danger
<div class="checkbox checkbox-danger no-label">
<input id="checkboxid" type="checkbox">
<label for="checkboxid"></label>
</div>
radio buttons
We will be using a styled radio buttons instead of the default browser radio buttons.
Note: Add checked="" to the input if you want it to be checked by default.
radioid is just a placeholder.
// Primary
<div>
<div class="radio radio-primary radio-inline">
<input id="radioid" type="radio" name="radioPrimary" checked="">
<label for="radioid">Option</label>
</div>
<div class="radio radio-primary radio-inline">
<input id="radioid2" type="radio" name="radioPrimary">
<label for="radioid2">Option 2</label>
</div>
</div>
// Success
<div>
<div class="radio radio-success radio-inline">
<input id="radioid" type="radio" name="radioSuccess" checked="">
<label for="radioid">Option</label>
</div>
<div class="radio radio-success radio-inline">
<input id="radioid2" type="radio" name="radioSuccess">
<label for="radioid2">Option 2</label>
</div>
</div>
// Info
<div>
<div class="radio radio-info radio-inline">
<input id="radioid" type="radio" name="radioInfo" checked="">
<label for="radioid">Option</label>
</div>
<div class="radio radio-info radio-inline">
<input id="radioid2" type="radio" name="radioInfo">
<label for="radioid2">Option 2</label>
</div>
</div>
// Warning
<div>
<div class="radio radio-warning radio-inline">
<input id="radioid" type="radio" name="radioPrimary" checked="">
<label for="radioid">Option</label>
</div>
<div class="radio radio-warning radio-inline">
<input id="radioid2" type="radio" name="radioPrimary">
<label for="radioid2">Option 2</label>
</div>
</div>
// Danger
<div>
<div class="radio radio-danger radio-inline">
<input id="radioid" type="radio" name="radioDanger" checked="">
<label for="radioid">Option</label>
</div>
<div class="radio radio-danger radio-inline">
<input id="radioid2" type="radio" name="radioDanger">
<label for="radioid2">Option 2</label>
</div>
</div>
Note: Add checked="" to the input if you want it to be checked by default.
<div>
<div class="radio radio-primary">
<input id="radioid" type="radio" name="radioPrimary">
<label for="radioid">Option</label>
</div>
<div class="radio radio-primary">
<input id="radioid2" type="radio" name="radioPrimary">
<label for="radioid2">Option 2</label>
</div>
</div>
Extras
hide-empty
Hide an element if it has no content.
Note: Must be 100% empty, even spaces must be removed.
Default
With hide-empty class
<div class="border-grey hide-empty"></div>
break-word
Break word if it is too long and doesn't fit.
Default
Using break-word
<a class="break-word">http://www.thisisalonglinkthatwillnotfitinthisbox.com></a>