A clean & classy HTML5 and CSS3 framework that helps you to get your projects up and running as fast as possible.
DownloadGetting 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
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>
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 |