Getting started.

Start by grabbing the latest and greatest version from Github. You can either download the .zip or clone the repo:

// 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, I won't go into how to include files as I'm going to assume that if you're going to be using this framework then you should already know how to do that.

Note: Viewing the source you'll notice that we're using a little PHP to compress and minify the framework CSS at run time, if you're not using PHP or don't want this functionality simply remove the following line and include the CSS files manually.

// css minification
<link href="assets/css/minified.css.php" rel="stylesheet">
Scaffolding.

Scaffolding is a simple, semantic, fluid grid system that is extremely easy-to-use. Just add the class you require to your HTML element and you're done!

// 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>
Icons.

Workless uses Elusive web-font icons, which not only gives you tons of icons to use in your project, you can style them with CSS to change their size, color etc...

// example usage
<i class="icon-glass"></i>
  • 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
Buttons.

Styling your buttons couldn't be easier, simply add the class to your button or anchor and that's it!

Default Pink Green Blue Red Magenta Orange Yellow
// 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>
Helpers.

The built-in helper classes are great, sizing, alignment, labels, highlights and more. Just add the class and away you go.

Labels.
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>

Notifications.
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>

Alerts & Messages.
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>
Backgrounds.

Workless comes with lots of background patterns for you to use in your projects, too many infact to display in the demo. To view all the available backgrounds take a look at assets/css/backgrounds.css.

 




 
 




 
 




 
 




 
 




 
 




 
 




 
 




 
 




 
 




 
 




 
 




 
 




 
 




 
 




 

 

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

You don't even need to do anything that you wouldn't normally do when creating forms, the framework will automatically style the elements for you!









Elements.

All form elements like checboxes, radios and selects are automatically styled just by adding the CSS file and the JavaScript.

Checkboxes.
Checked
Checked
Not checked
Not checked
Disabled
Radios.
Checked
Checked
Not checked
Not checked
Disabled
Selects.


Textareas.

We can add to the default styling of textareas using the same helper class that we used on the input boxes.

Add any relevant classes for sizing or notices and bam! You're done.

Tables.

The default table CSS does everything for you. Simply reference the tables CSS file and you're good to go! Want more? You can add the .table-striped class to alternate each rows background color!

Border Striped
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
No Border, Striped.
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
No Border, No Stripe.
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