Workless | An open source HTML, CSS & JS framework for developing front-end web applications faster.

Getting started.

Start by downloading the latest version from Github.

You can download the .zip directly, or alternatively, 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.

Scaffolding.

Scaffolding is a simple, semantic, grid system that is extremely easy-to-use.

Just add the relevant class you 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="three-quarter">your content in here...</div>
<div class="one-fifth">your content in here...</div>
<div class="two-fifth">your content in here...</div>
<div class="three-fifth">your content in here...</div>
<div class="four-fifth">your content in here...</div>

Font Icons.

Workless uses Font Awesome web-font icons, which gives you lots of icons to use in your project.

Being font-based, you can style them with CSS to change their size & color just as you would with regular type.

// example usage
<i class="icon-glass"></i>

icon-glass
icon-music
icon-search
icon-envelope-o
icon-heart
icon-star
icon-star-o
icon-user
icon-film
icon-th-large
icon-th
icon-th-list
icon-check
icon-times
icon-search-plus
icon-search-minus
icon-power-off
icon-signal
icon-cog
icon-trash-o
icon-home
icon-file-o
icon-clock-o
icon-road
icon-download
icon-arrow-circle-o-down
icon-arrow-circle-o-up
icon-inbox
icon-play-circle-o
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-outdent
icon-indent
icon-video-camera
icon-picture-o
icon-pencil
icon-map-marker
icon-adjust
icon-tint
icon-pencil-square-o
icon-share-square-o
icon-check-square-o
icon-arrows
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-circle
icon-minus-circle
icon-times-circle
icon-check-circle
icon-question-circle
icon-info-circle
icon-crosshairs
icon-times-circle-o
icon-check-circle-o
icon-ban
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-arrow-down
icon-share
icon-expand
icon-compress
icon-plus
icon-minus
icon-asterisk
icon-exclamation-circle
icon-gift
icon-leaf
icon-fire
icon-eye
icon-eye-slash
icon-exclamation-triangle
icon-plane
icon-calendar
icon-random
icon-comment
icon-magnet
icon-chevron-up
icon-chevron-down
icon-retweet
icon-shopping-cart
icon-folder
icon-folder-open
icon-arrows-v
icon-arrows-h
icon-bar-chart
icon-twitter-square
icon-facebook-square
icon-camera-retro
icon-key
icon-cogs
icon-comments
icon-thumbs-o-up
icon-thumbs-o-down
icon-star-half
icon-heart-o
icon-sign-out
icon-linkedin-square
icon-thumb-tack
icon-external-link
icon-sign-in
icon-trophy
icon-github-square
icon-upload
icon-lemon-o
icon-phone
icon-square-o
icon-bookmark-o
icon-phone-square
icon-twitter
icon-facebook
icon-github
icon-unlock
icon-credit-card
icon-rss
icon-hdd-o
icon-bullhorn
icon-bell
icon-certificate
icon-hand-o-right
icon-hand-o-left
icon-hand-o-up
icon-hand-o-down
icon-arrow-circle-left
icon-arrow-circle-right
icon-arrow-circle-up
icon-arrow-circle-down
icon-globe
icon-wrench
icon-tasks
icon-filter
icon-briefcase
icon-arrows-alt
icon-users
icon-link
icon-cloud
icon-flask
icon-scissors
icon-files-o
icon-paperclip
icon-floppy-o
icon-square
icon-bars
icon-times
icon-list-ul
icon-list-ol
icon-strikethrough
icon-underline
icon-table
icon-magic
icon-truck
icon-pinterest
icon-pinterest-square
icon-google-plus-square
icon-google-plus
icon-money
icon-caret-down
icon-caret-up
icon-caret-left
icon-caret-right
icon-columns
icon-sort
icon-sort-desc
icon-sort-asc
icon-envelope
icon-linkedin
icon-undo
icon-gavel
icon-tachometer
icon-comment-o
icon-comments-o
icon-bolt
icon-sitemap
icon-umbrella
icon-clipboard
icon-lightbulb-o
icon-exchange
icon-cloud-download
icon-cloud-upload
icon-user-md
icon-stethoscope
icon-suitcase
icon-bell-o
icon-coffee
icon-cutlery
icon-file-text-o
icon-building-o
icon-hospital-o
icon-ambulance
icon-medkit
icon-fighter-jet
icon-beer
icon-h-square
icon-plus-square
icon-angle-double-left
icon-angle-double-right
icon-angle-double-up
icon-angle-double-down
icon-angle-left
icon-angle-right
icon-angle-up
icon-angle-down
icon-desktop
icon-laptop
icon-tablet
icon-mobile
icon-circle-o
icon-quote-left
icon-quote-right
icon-spinner
icon-circle
icon-reply
icon-github-alt
icon-folder-o
icon-folder-open-o
icon-smile-o
icon-frown-o
icon-meh-o
icon-gamepad
icon-keyboard-o
icon-flag-o
icon-flag-checkered
icon-terminal
icon-code
icon-reply-all
icon-star-half-o
icon-location-arrow
icon-crop
icon-code-fork
icon-chain-broken
icon-question
icon-info
icon-exclamation
icon-superscript
icon-subscript
icon-eraser
icon-puzzle-piece
icon-microphone
icon-microphone-slash
icon-shield
icon-calendar-o
icon-fire-extinguisher
icon-rocket
icon-maxcdn
icon-chevron-circle-left
icon-chevron-circle-right
icon-chevron-circle-up
icon-chevron-circle-down
icon-html5
icon-css3
icon-anchor
icon-unlock-alt
icon-bullseye
icon-ellipsis-h
icon-ellipsis-v
icon-rss-square
icon-play-circle
icon-ticket
icon-minus-square
icon-minus-square-o
icon-level-up
icon-level-down
icon-check-square
icon-pencil-square
icon-external-link-square
icon-share-square
icon-compass
icon-caret-square-o-down
icon-caret-square-o-up
icon-caret-square-o-right
icon-eur
icon-gbp
icon-usd
icon-inr
icon-jpy
icon-rub
icon-krw
icon-btc
icon-file
icon-file-text
icon-sort-alpha-asc
icon-sort-alpha-desc
icon-sort-amount-asc
icon-sort-amount-desc
icon-sort-numeric-asc
icon-sort-numeric-desc
icon-thumbs-up
icon-thumbs-down
icon-youtube-square
icon-youtube
icon-xing
icon-xing-square
icon-youtube-play
icon-dropbox
icon-stack-overflow
icon-instagram
icon-flickr
icon-adn
icon-bitbucket
icon-bitbucket-square
icon-tumblr
icon-tumblr-square
icon-long-arrow-down
icon-long-arrow-up
icon-long-arrow-left
icon-long-arrow-right
icon-apple
icon-windows
icon-android
icon-linux
icon-dribbble
icon-skype
icon-foursquare
icon-trello
icon-female
icon-male
icon-gratipay
icon-sun-o
icon-moon-o
icon-archive
icon-bug
icon-vk
icon-weibo
icon-renren
icon-pagelines
icon-stack-exchange
icon-arrow-circle-o-right
icon-arrow-circle-o-left
icon-caret-square-o-left
icon-dot-circle-o
icon-wheelchair
icon-vimeo-square
icon-try
icon-plus-square-o
icon-space-shuttle
icon-slack
icon-envelope-square
icon-wordpress
icon-openid
icon-university
icon-graduation-cap
icon-yahoo
icon-google
icon-reddit
icon-reddit-square
icon-stumbleupon-circle
icon-stumbleupon
icon-delicious
icon-digg
icon-pied-piper
icon-pied-piper-alt
icon-drupal
icon-joomla
icon-language
icon-fax
icon-building
icon-child
icon-paw
icon-spoon
icon-cube
icon-cubes
icon-behance
icon-behance-square
icon-steam
icon-steam-square
icon-recycle
icon-car
icon-taxi
icon-tree
icon-spotify
icon-deviantart
icon-soundcloud
icon-database
icon-file-pdf-o
icon-file-word-o
icon-file-excel-o
icon-file-powerpoint-o
icon-file-image-o
icon-file-archive-o
icon-file-audio-o
icon-file-video-o
icon-file-code-o
icon-vine
icon-codepen
icon-jsfiddle
icon-life-ring
icon-circle-o-notch
icon-rebel
icon-empire
icon-git-square
icon-git
icon-hacker-news
icon-tencent-weibo
icon-qq
icon-weixin
icon-paper-plane
icon-paper-plane-o
icon-history
icon-circle-thin
icon-header
icon-paragraph
icon-sliders
icon-share-alt
icon-share-alt-square
icon-bomb
icon-futbol-o
icon-tty
icon-binoculars
icon-plug
icon-slideshare
icon-twitch
icon-yelp
icon-newspaper-o
icon-wifi
icon-calculator
icon-paypal
icon-google-wallet
icon-cc-visa
icon-cc-mastercard
icon-cc-discover
icon-cc-amex
icon-cc-paypal
icon-cc-stripe
icon-bell-slash
icon-bell-slash-o
icon-trash
icon-copyright
icon-at
icon-eyedropper
icon-paint-brush
icon-birthday-cake
icon-area-chart
icon-pie-chart
icon-line-chart
icon-lastfm
icon-lastfm-square
icon-toggle-off
icon-toggle-on
icon-bicycle
icon-bus
icon-ioxhost
icon-angellist
icon-cc
icon-ils
icon-meanpath
icon-buysellads
icon-connectdevelop
icon-dashcube
icon-forumbee
icon-leanpub
icon-sellsy
icon-shirtsinbulk
icon-simplybuilt
icon-skyatlas
icon-cart-plus
icon-cart-arrow-down
icon-diamond
icon-ship
icon-user-secret
icon-motorcycle
icon-street-view
icon-heartbeat
icon-venus
icon-mars
icon-mercury
icon-transgender
icon-transgender-alt
icon-venus-double
icon-mars-double
icon-venus-mars
icon-mars-stroke
icon-mars-stroke-v
icon-mars-stroke-h
icon-neuter
icon-genderless
icon-facebook-official
icon-pinterest-p
icon-whatsapp
icon-server
icon-user-plus
icon-user-times
icon-bed
icon-viacoin
icon-train
icon-subway
icon-medium
icon-y-combinator
icon-optin-monster
icon-opencart
icon-expeditedssl
icon-battery-full
icon-battery-three-quarters
icon-battery-half
icon-battery-quarter
icon-battery-empty
icon-mouse-pointer
icon-i-cursor
icon-object-group
icon-object-ungroup
icon-sticky-note
icon-sticky-note-o
icon-cc-jcb
icon-cc-diners-club
icon-clone
icon-balance-scale
icon-hourglass-o
icon-hourglass-start
icon-hourglass-half
icon-hourglass-end
icon-hourglass
icon-hand-rock-o
icon-hand-paper-o
icon-hand-scissors-o
icon-hand-lizard-o
icon-hand-spock-o
icon-hand-pointer-o
icon-hand-peace-o
icon-trademark
icon-registered
icon-creative-commons
icon-gg
icon-gg-circle
icon-tripadvisor
icon-odnoklassniki
icon-odnoklassniki-square
icon-get-pocket
icon-wikipedia-w
icon-safari
icon-chrome
icon-firefox
icon-opera
icon-internet-explorer
icon-television
icon-contao
icon-500px
icon-amazon
icon-calendar-plus-o
icon-calendar-minus-o
icon-calendar-times-o
icon-calendar-check-o
icon-industry
icon-map-pin
icon-map-signs
icon-map-o
icon-map
icon-commenting
icon-commenting-o
icon-houzz
icon-vimeo
icon-black-tie
icon-fonticons

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

Helpers.

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

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>

Backgrounds.

Tons of built-in, repeatable background patterns for you to use in your projects.

Too many infact to display in the demo. To view all the available backgrounds checkout 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!

Tables.

The default table CSS does everything for you.

Simply include 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!

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