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">Your message</div>
Don’t do that, something might break!
<div class="alert alert-warning">Your message</div>
Yay! You did it, you did it, you did it!
<div class="alert alert-success">Your message</div>
We just thought we’d let you know that you’re cool!
<div class="alert alert-info">Your message</div>
Block Messages
Oh no, what did you do? You broke the internet!
<div class="block-message block-message-error">Your message</div>
Don’t do that, something might break!
<div class="block-message block-message-warning">Your message</div>
Yay! You did it, you did it, you did it!
<div class="block-message block-message-success">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