// clone github repo to your locally directory
git clone https://github.com/iKreativ/Workless.git

This will download the entire source for the framework including this sites HTML file as an example.

Next, either start with the base HTML file included with the download or include the files directly into your project.


// example usage
<div class="one_full">your content in here...</div>
<div class="one_half">your content in here...</div>
<div class="one_third">your content in here...</div>
<div class="two_third">your content in here...</div>
<div class="one_quarter">your content in here...</div>
<div class="one_fifth">your content in here...</div>

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen
  • icon-facebook
  • icon-twitter
  • icon-googleplus
  • icon-linkedin
  • icon-pinterest
  • icon-foursquare
  • icon-youtube
  • icon-vimeo
  • icon-skype
  • icon-picasa
  • icon-stumbleupon
  • icon-digg
  • icon-tumblr
  • icon-github
  • icon-github-text
  • icon-friendfeed
  • icon-friendfeed-rect
  • icon-wordpress
  • icon-slideshare
  • icon-reddit
  • icon-dribble
  • icon-behance
  • icon-deviantart
  • icon-delicious
  • icon-stackoverflow
  • icon-website
  • icon-website-alt
  • icon-fontsize
  • icon-view-mode
  • icon-wrench-alt
  • icon-video-chat
  • icon-video-alt
  • icon-star-alt
  • icon-video
  • icon-unlock
  • icon-unlock-alt
  • icon-trash-alt
  • icon-torso
  • icon-reverse-alt
  • icon-stop-alt
  • icon-play-alt
  • icon-pause-alt
  • icon-record
  • icon-repeat-alt
  • icon-mic
  • icon-mic-alt
  • icon-speaker
  • icon-smiley
  • icon-smiley-alt
  • icon-search-alt
  • icon-screen
  • icon-screen-alt
  • icon-time-alt
  • icon-shopping-cart-sign
  • icon-rss
  • icon-quotes
  • icon-quotes-alt
  • icon-photo
  • icon-photo-alt
  • icon-wheelchair
  • icon-universal-access
  • icon-question
  • icon-phone-alt
  • icon-phone
  • icon-person
  • icon-pencil-alt
  • icon-path
  • icon-paper-clip-alt
  • icon-paper-clip
  • icon-network
  • icon-error-alt
  • icon-error
  • icon-map-marker-alt
  • icon-male
  • icon-mail-alt
  • icon-lock-alt
  • icon-laptop-alt
  • icon-laptop
  • icon-key
  • icon-iphone-home
  • icon-instagram
  • icon-inbox-alt
  • icon-idea-alt
  • icon-idea
  • icon-home-alt
  • icon-heart-empty
  • icon-heart-alt
  • icon-hearing-impaired
  • icon-guidedog
  • icon-group-alt
  • icon-group
  • icon-graph-alt
  • icon-graph
  • icon-globe-alt
  • icon-glasses
  • icon-forward-alt
  • icon-folder-sign
  • icon-folder
  • icon-flickr
  • icon-flag-alt
  • icon-file-new-alt
  • icon-file-new
  • icon-file-edit-alt
  • icon-file-edit
  • icon-file-alt
  • icon-female
  • icon-inbox-box
  • icon-dashboard
  • icon-credit-card
  • icon-compass-alt
  • icon-compass
  • icon-comment-alt
  • icon-child
  • icon-check-empty
  • icon-cc
  • icon-calendar-sign
  • icon-blind
  • icon-asl
  • icon-cogs
  • icon-cog-alt
  • icon-cloud-alt
  • icon-cloud
  • icon-braille
  • icon-bookmark-empty
  • icon-blogger
  • icon-adult
  • icon-address-book
  • icon-address-book-alt
  • icon-w3c
  • icon-css

Default Pink Green Blue Red Orange
// example usage
<a href="#" class="button">Default</a>
<a href="#" class="button pink">Pink</a>
<a href="#" class="button green">Green</a>
<a href="#" class="button blue">Blue</a>
<a href="#" class="button red">Red</a>
<a href="#" class="button magenta">Magenta</a>
<a href="#" class="button orange">Orange</a>
<a href="#" class="button yellow">Yellow</a>

Default Pink Green Blue Red Magenta Orange Yellow
// example usage
<span class="label">Default</span>
<span class="label pink">Pink</span>
<span class="label green">Green</span>
<span class="label blue">Blue</span>
<span class="label red">Red</span>
<span class="label magenta">Magenta</span>
<span class="label orange">Orange</span>
<span class="label yellow">Yellow</span>

1 2 3 4 5 6 7 8
// example usage
<span class="notification">1</span>
<span class="notification pink">2</span>
<span class="notification green">3</span>
<span class="notification blue">4</span>
<span class="notification red">5</span>
<span class="notification magenta">6</span>
<span class="notification orange">7</span>
<span class="notification yellow">8</span>

Hello, welcome, isn't this nice?
This is just a nice little message for your visitors.
You did it, awesome, nice work.
This is a friendly warning, don't do that again.
Ohh, you did it again, you broke the internet!
// example usage
<div class="alert">Hello, welcome, isnt this nice?</div>
<div class="alert alert-info">This is just a nice little message for your visitors.</div>
<div class="alert alert-success">You did it, awesome, nice work.</div>
<div class="alert alert-warning">This is a friendly warning, dont do that again.</div>
<div class="alert alert-error">Ohh, you did it again, you broke the internet!</div>

 




 
 




 
 




 
 




 
 




 
 




 
 




 
 




 
 




 
 




 
 




 
 




 
 




 
 




 
 




 
// example usage
<div class="bg-axiom"></div>















Tag Description
<table> Wrapping element for displaying data in a tabular format
<thead> Container element for table header rows <tr> to label table columns
<tbody> Container element for table rows <tr> in the body of the table
<tr> Container element for a set of table cells <td> or <th> that appears on a single row
<td> Default table cell
<th> Special table cell for column (or row, depending on scope and placement) labels. Must be used within a <thead>
<caption> Description or summary of what the table holds, especially useful for screen readers

Tag Description
<table> Wrapping element for displaying data in a tabular format
<thead> Container element for table header rows <tr> to label table columns
<tbody> Container element for table rows <tr> in the body of the table
<tr> Container element for a set of table cells <td> or <th> that appears on a single row
<td> Default table cell
<th> Special table cell for column (or row, depending on scope and placement) labels. Must be used within a <thead>
<caption> Description or summary of what the table holds, especially useful for screen readers

Tag Description
<table> Wrapping element for displaying data in a tabular format
<thead> Container element for table header rows <tr> to label table columns
<tbody> Container element for table rows <tr> in the body of the table
<tr> Container element for a set of table cells <td> or <th> that appears on a single row
<td> Default table cell
<th> Special table cell for column (or row, depending on scope and placement) labels. Must be used within a <thead>
<caption> Description or summary of what the table holds, especially useful for screen readers