About Branded

Branded is built around my popular Workless Framework. Which allows it to inherit all the classes and goodies that are built into Workless! This features section just shows a small selection of what is available, for full docs and examples visit workless.ikreativ.com.

Standard Alerts
Oh no, what did you do? You broke the internet!
<div class="alert alert-error&quot>Your message</div>
Don’t do that, something might break!
<div class="alert alert-warning&quot>Your message</div>
Yay! You did it, you did it, you did it!
<div class="alert alert-success&quot>Your message</div>
We just thought we’d let you know that you’re cool!
<div class="alert alert-info&quot>Your message</div>
Block Messages
Oh no, what did you do? You broke the internet!
<div class="block-message block-message-error&quot>Your message</div>
Don’t do that, something might break!
<div class="block-message block-message-warning&quot>Your message</div>
Yay! You did it, you did it, you did it!
<div class="block-message block-message-success&quot>Your message</div>
Standard buttons
Button Usage
Default <a href="#" class="button">Default</a>
Red <a href="#" class="button red">Red</a>
Orange <a href="#" class="button orange">Orange</a>
Blue <a href="#" class="button blue">Blue</a>
Green <a href="#" class="button green">Green</a>
Button Variants
Button Usage
Small <a href="#" class="button small red">Small</a>
Medium <a href="#" class="button medium green">Medium</a>
Large <a href="#" class="button large blue">Large</a>
Rounded <a href="#" class="button rounded pink">Rounded</a>

Icons

All the built in icons are font based icons. This means you can set their color and size independently. There are 2 ways to use the icons, either by using the i tag, or the span tag. The i tag has a background color and the span tag doesn’t.

<span class="icon-star"></span>

<i class="icon-star"></i>

<span style="color:#fe57a1!important;" class="icon-star"></span>
  • 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-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