Colors

Primary

#5bb8fd

Success

#4ce276

Warning

#f9d65e

Error

#f36362

Dark

#2f3241

Light

#f1f3f6

Border

#d9d8de

Buttons

Size

<a class="button lg" href="">Large Button</a>
                        <a class="button" href="">Button</a>
                        <a class="button sm" href="">Small Button</a>                        

Color

<a class="button" href="">Primary</a>
                        <a class="button success" href="">Success</a>
                        <a class="button warning" href="">Warning</a>
                        <a class="button error" href="">Error</a>
                        <a class="button border" href="">Border</a>
                        <a class="button none" href="">None</a>                        

Type

<a class="button block" href="">Block Button</a>
                        <a class="button center" href="">Center Button</a>                        

Icons

<a class="button lg" href="">
                        <i class="icon icon-gear-a"></i>
                        Large Button
                        </a>
						
                        <a class="button" href="">
                        <i class="icon icon-log-in"></i>
                        Button
                        </a>
						
                        <a class="button sm" href="">
                        <i class="icon icon-refresh"></i>
                        Small Button
                        </a>                        

Groups

<div class="button-group">
						<a class="button border" href="">Button</a>
						<a class="button border" href="">Button</a>
						<a class="button border" href="">Button</a>
                        </div>                        

Icons

Usage

<i class="icon lg icon-navicon-round"></i>
							<i class="icon icon-navicon-round"></i>
                            <i class="icon sm icon-navicon-round"></i>                        

List

  • icon-ionic
  • icon-arrow-up-a
  • icon-arrow-right-a
  • icon-arrow-down-a
  • icon-arrow-left-a
  • icon-arrow-up-b
  • icon-arrow-right-b
  • icon-arrow-down-b
  • icon-arrow-left-b
  • icon-arrow-up-c
  • icon-arrow-right-c
  • icon-arrow-down-c
  • icon-arrow-left-c
  • icon-arrow-return-right
  • icon-arrow-return-left
  • icon-arrow-swap
  • icon-arrow-shrink
  • icon-arrow-expand
  • icon-arrow-move
  • icon-arrow-resize
  • icon-chevron-up
  • icon-chevron-right
  • icon-chevron-down
  • icon-chevron-left
  • icon-navicon-round
  • icon-navicon
  • icon-drag
  • icon-log-in
  • icon-log-out
  • icon-checkmark-round
  • icon-checkmark
  • icon-checkmark-circled
  • icon-close-round
  • icon-close
  • icon-close-circled
  • icon-plus-round
  • icon-plus
  • icon-plus-circled
  • icon-minus-round
  • icon-minus
  • icon-minus-circled
  • icon-information
  • icon-information-circled
  • icon-help
  • icon-help-circled
  • icon-backspace-outline
  • icon-backspace
  • icon-help-buoy
  • icon-asterisk
  • icon-alert
  • icon-alert-circled
  • icon-refresh
  • icon-loop
  • icon-shuffle
  • icon-home
  • icon-search
  • icon-flag
  • icon-star
  • icon-heart
  • icon-heart-broken
  • icon-gear-a
  • icon-gear-b
  • icon-toggle-filled
  • icon-toggle
  • icon-settings
  • icon-wrench
  • icon-hammer
  • icon-edit
  • icon-trash-a
  • icon-trash-b
  • icon-document
  • icon-document-text
  • icon-clipboard
  • icon-scissors
  • icon-funnel
  • icon-bookmark
  • icon-email
  • icon-email-unread
  • icon-folder
  • icon-filing
  • icon-archive
  • icon-reply
  • icon-reply-all
  • icon-forward
  • icon-share
  • icon-paper-airplane
  • icon-link
  • icon-paperclip
  • icon-compose
  • icon-briefcase
  • icon-medkit
  • icon-at
  • icon-pound
  • icon-quote
  • icon-cloud
  • icon-upload
  • icon-more
  • icon-grid
  • icon-calendar
  • icon-clock
  • icon-compass
  • icon-pinpoint
  • icon-pin
  • icon-navigate
  • icon-location
  • icon-map
  • icon-lock-combination
  • icon-locked
  • icon-unlocked
  • icon-key
  • icon-arrow-graph-up-right
  • icon-arrow-graph-down-right
  • icon-arrow-graph-up-left
  • icon-arrow-graph-down-left
  • icon-stats-bars
  • icon-connection-bars
  • icon-pie-graph
  • icon-chatbubble
  • icon-chatbubble-working
  • icon-chatbubbles
  • icon-chatbox
  • icon-chatbox-working
  • icon-chatboxes
  • icon-person
  • icon-person-add
  • icon-person-stalker
  • icon-woman
  • icon-man
  • icon-female
  • icon-male
  • icon-transgender
  • icon-fork
  • icon-knife
  • icon-spoon
  • icon-soup-can-outline
  • icon-soup-can
  • icon-beer
  • icon-wineglass
  • icon-coffee
  • icon-icecream
  • icon-pizza
  • icon-power
  • icon-mouse
  • icon-battery-full
  • icon-battery-half
  • icon-battery-low
  • icon-battery-empty
  • icon-battery-charging
  • icon-wifi
  • icon-bluetooth
  • icon-calculator
  • icon-camera
  • icon-eye
  • icon-eye-disabled
  • icon-flash
  • icon-flash-off
  • icon-qr-scanner
  • icon-image
  • icon-images
  • icon-wand
  • icon-contrast
  • icon-aperture
  • icon-crop
  • icon-easel
  • icon-paintbrush
  • icon-paintbucket
  • icon-monitor
  • icon-laptop
  • icon-ipad
  • icon-iphone
  • icon-ipod
  • icon-printer
  • icon-usb
  • icon-outlet
  • icon-bug
  • icon-code
  • icon-code-working
  • icon-code-download
  • icon-fork-repo
  • icon-network
  • icon-pull-request
  • icon-merge
  • icon-xbox
  • icon-playstation
  • icon-steam
  • icon-closed-captioning
  • icon-videocamera
  • icon-film-marker
  • icon-disc
  • icon-headphone
  • icon-music-note
  • icon-radio-waves
  • icon-speakerphone
  • icon-mic-a
  • icon-mic-b
  • icon-mic-c
  • icon-volume-high
  • icon-volume-medium
  • icon-volume-low
  • icon-volume-mute
  • icon-levels
  • icon-play
  • icon-pause
  • icon-stop
  • icon-record
  • icon-skip-forward
  • icon-skip-backward
  • icon-eject
  • icon-bag
  • icon-card
  • icon-cash
  • icon-pricetag
  • icon-pricetags
  • icon-thumbsup
  • icon-thumbsdown
  • icon-happy-outline
  • icon-happy
  • icon-sad-outline
  • icon-sad
  • icon-bowtie
  • icon-tshirt-outline
  • icon-tshirt
  • icon-trophy
  • icon-podium
  • icon-ribbon-a
  • icon-ribbon-b
  • icon-university
  • icon-magnet
  • icon-beaker
  • icon-erlenmeyer-flask
  • icon-egg
  • icon-earth
  • icon-planet
  • icon-lightbulb
  • icon-cube
  • icon-leaf
  • icon-waterdrop
  • icon-flame
  • icon-fireball
  • icon-bonfire
  • icon-umbrella
  • icon-nuclear
  • icon-no-smoking
  • icon-thermometer
  • icon-speedometer
  • icon-model-s
  • icon-plane
  • icon-jet
  • icon-load-a
  • icon-load-b
  • icon-load-c
  • icon-load-d
  • icon-ios-ionic-outline
  • icon-ios-arrow-back
  • icon-ios-arrow-forward
  • icon-ios-arrow-up
  • icon-ios-arrow-right
  • icon-ios-arrow-down
  • icon-ios-arrow-left
  • icon-ios-arrow-thin-up
  • icon-ios-arrow-thin-right
  • icon-ios-arrow-thin-down
  • icon-ios-arrow-thin-left
  • icon-ios-circle-filled
  • icon-ios-circle-outline
  • icon-ios-checkmark-empty
  • icon-ios-checkmark-outline
  • icon-ios-checkmark
  • icon-ios-plus-empty
  • icon-ios-plus-outline
  • icon-ios-plus
  • icon-ios-close-empty
  • icon-ios-close-outline
  • icon-ios-close
  • icon-ios-minus-empty
  • icon-ios-minus-outline
  • icon-ios-minus
  • icon-ios-information-empty
  • icon-ios-information-outline
  • icon-ios-information
  • icon-ios-help-empty
  • icon-ios-help-outline
  • icon-ios-help
  • icon-ios-search
  • icon-ios-search-strong
  • icon-ios-star
  • icon-ios-star-half
  • icon-ios-star-outline
  • icon-ios-heart
  • icon-ios-heart-outline
  • icon-ios-more
  • icon-ios-more-outline
  • icon-ios-home
  • icon-ios-home-outline
  • icon-ios-cloud
  • icon-ios-cloud-outline
  • icon-ios-cloud-upload
  • icon-ios-cloud-upload-outline
  • icon-ios-cloud-download
  • icon-ios-cloud-download-outline
  • icon-ios-upload
  • icon-ios-upload-outline
  • icon-ios-download
  • icon-ios-download-outline
  • icon-ios-refresh
  • icon-ios-refresh-outline
  • icon-ios-refresh-empty
  • icon-ios-reload
  • icon-ios-loop-strong
  • icon-ios-loop
  • icon-ios-bookmarks
  • icon-ios-bookmarks-outline
  • icon-ios-book
  • icon-ios-book-outline
  • icon-ios-flag
  • icon-ios-flag-outline
  • icon-ios-glasses
  • icon-ios-glasses-outline
  • icon-ios-browsers
  • icon-ios-browsers-outline
  • icon-ios-at
  • icon-ios-at-outline
  • icon-ios-pricetag
  • icon-ios-pricetag-outline
  • icon-ios-pricetags
  • icon-ios-pricetags-outline
  • icon-ios-cart
  • icon-ios-cart-outline
  • icon-ios-chatboxes
  • icon-ios-chatboxes-outline
  • icon-ios-chatbubble
  • icon-ios-chatbubble-outline
  • icon-ios-cog
  • icon-ios-cog-outline
  • icon-ios-gear
  • icon-ios-gear-outline
  • icon-ios-settings
  • icon-ios-settings-strong
  • icon-ios-toggle
  • icon-ios-toggle-outline
  • icon-ios-analytics
  • icon-ios-analytics-outline
  • icon-ios-pie
  • icon-ios-pie-outline
  • icon-ios-pulse
  • icon-ios-pulse-strong
  • icon-ios-filing
  • icon-ios-filing-outline
  • icon-ios-box
  • icon-ios-box-outline
  • icon-ios-compose
  • icon-ios-compose-outline
  • icon-ios-trash
  • icon-ios-trash-outline
  • icon-ios-copy
  • icon-ios-copy-outline
  • icon-ios-email
  • icon-ios-email-outline
  • icon-ios-undo
  • icon-ios-undo-outline
  • icon-ios-redo
  • icon-ios-redo-outline
  • icon-ios-paperplane
  • icon-ios-paperplane-outline
  • icon-ios-folder
  • icon-ios-folder-outline
  • icon-ios-paper
  • icon-ios-paper-outline
  • icon-ios-list
  • icon-ios-list-outline
  • icon-ios-world
  • icon-ios-world-outline
  • icon-ios-alarm
  • icon-ios-alarm-outline
  • icon-ios-speedometer
  • icon-ios-speedometer-outline
  • icon-ios-stopwatch
  • icon-ios-stopwatch-outline
  • icon-ios-timer
  • icon-ios-timer-outline
  • icon-ios-clock
  • icon-ios-clock-outline
  • icon-ios-time
  • icon-ios-time-outline
  • icon-ios-calendar
  • icon-ios-calendar-outline
  • icon-ios-photos
  • icon-ios-photos-outline
  • icon-ios-albums
  • icon-ios-albums-outline
  • icon-ios-camera
  • icon-ios-camera-outline
  • icon-ios-reverse-camera
  • icon-ios-reverse-camera-outline
  • icon-ios-eye
  • icon-ios-eye-outline
  • icon-ios-bolt
  • icon-ios-bolt-outline
  • icon-ios-color-wand
  • icon-ios-color-wand-outline
  • icon-ios-color-filter
  • icon-ios-color-filter-outline
  • icon-ios-grid-view
  • icon-ios-grid-view-outline
  • icon-ios-crop-strong
  • icon-ios-crop
  • icon-ios-barcode
  • icon-ios-barcode-outline
  • icon-ios-briefcase
  • icon-ios-briefcase-outline
  • icon-ios-medkit
  • icon-ios-medkit-outline
  • icon-ios-medical
  • icon-ios-medical-outline
  • icon-ios-infinite
  • icon-ios-infinite-outline
  • icon-ios-calculator
  • icon-ios-calculator-outline
  • icon-ios-keypad
  • icon-ios-keypad-outline
  • icon-ios-telephone
  • icon-ios-telephone-outline
  • icon-ios-drag
  • icon-ios-location
  • icon-ios-location-outline
  • icon-ios-navigate
  • icon-ios-navigate-outline
  • icon-ios-locked
  • icon-ios-locked-outline
  • icon-ios-unlocked
  • icon-ios-unlocked-outline
  • icon-ios-monitor
  • icon-ios-monitor-outline
  • icon-ios-printer
  • icon-ios-printer-outline
  • icon-ios-game-controller-a
  • icon-ios-game-controller-a-outline
  • icon-ios-game-controller-b
  • icon-ios-game-controller-b-outline
  • icon-ios-americanfootball
  • icon-ios-americanfootball-outline
  • icon-ios-baseball
  • icon-ios-baseball-outline
  • icon-ios-basketball
  • icon-ios-basketball-outline
  • icon-ios-tennisball
  • icon-ios-tennisball-outline
  • icon-ios-football
  • icon-ios-football-outline
  • icon-ios-body
  • icon-ios-body-outline
  • icon-ios-person
  • icon-ios-person-outline
  • icon-ios-personadd
  • icon-ios-personadd-outline
  • icon-ios-people
  • icon-ios-people-outline
  • icon-ios-musical-notes
  • icon-ios-musical-note
  • icon-ios-bell
  • icon-ios-bell-outline
  • icon-ios-mic
  • icon-ios-mic-outline
  • icon-ios-mic-off
  • icon-ios-volume-high
  • icon-ios-volume-low
  • icon-ios-play
  • icon-ios-play-outline
  • icon-ios-pause
  • icon-ios-pause-outline
  • icon-ios-recording
  • icon-ios-recording-outline
  • icon-ios-fastforward
  • icon-ios-fastforward-outline
  • icon-ios-rewind
  • icon-ios-rewind-outline
  • icon-ios-skipbackward
  • icon-ios-skipbackward-outline
  • icon-ios-skipforward
  • icon-ios-skipforward-outline
  • icon-ios-shuffle-strong
  • icon-ios-shuffle
  • icon-ios-videocam
  • icon-ios-videocam-outline
  • icon-ios-film
  • icon-ios-film-outline
  • icon-ios-flask
  • icon-ios-flask-outline
  • icon-ios-lightbulb
  • icon-ios-lightbulb-outline
  • icon-ios-wineglass
  • icon-ios-wineglass-outline
  • icon-ios-pint
  • icon-ios-pint-outline
  • icon-ios-nutrition
  • icon-ios-nutrition-outline
  • icon-ios-flower
  • icon-ios-flower-outline
  • icon-ios-rose
  • icon-ios-rose-outline
  • icon-ios-paw
  • icon-ios-paw-outline
  • icon-ios-flame
  • icon-ios-flame-outline
  • icon-ios-sunny
  • icon-ios-sunny-outline
  • icon-ios-partlysunny
  • icon-ios-partlysunny-outline
  • icon-ios-cloudy
  • icon-ios-cloudy-outline
  • icon-ios-rainy
  • icon-ios-rainy-outline
  • icon-ios-thunderstorm
  • icon-ios-thunderstorm-outline
  • icon-ios-snowy
  • icon-ios-moon
  • icon-ios-moon-outline
  • icon-ios-cloudy-night
  • icon-ios-cloudy-night-outline
  • icon-android-arrow-up
  • icon-android-arrow-forward
  • icon-android-arrow-down
  • icon-android-arrow-back
  • icon-android-arrow-dropup
  • icon-android-arrow-dropup-circle
  • icon-android-arrow-dropright
  • icon-android-arrow-dropright-circle
  • icon-android-arrow-dropdown
  • icon-android-arrow-dropdown-circle
  • icon-android-arrow-dropleft
  • icon-android-arrow-dropleft-circle
  • icon-android-add
  • icon-android-add-circle
  • icon-android-remove
  • icon-android-remove-circle
  • icon-android-close
  • icon-android-cancel
  • icon-android-radio-button-off
  • icon-android-radio-button-on
  • icon-android-checkmark-circle
  • icon-android-checkbox-outline-blank
  • icon-android-checkbox-outline
  • icon-android-checkbox-blank
  • icon-android-checkbox
  • icon-android-done
  • icon-android-done-all
  • icon-android-menu
  • icon-android-more-horizontal
  • icon-android-more-vertical
  • icon-android-refresh
  • icon-android-sync
  • icon-android-wifi
  • icon-android-call
  • icon-android-apps
  • icon-android-settings
  • icon-android-options
  • icon-android-funnel
  • icon-android-search
  • icon-android-home
  • icon-android-cloud-outline
  • icon-android-cloud
  • icon-android-download
  • icon-android-upload
  • icon-android-cloud-done
  • icon-android-cloud-circle
  • icon-android-favorite-outline
  • icon-android-favorite
  • icon-android-star-outline
  • icon-android-star-half
  • icon-android-star
  • icon-android-calendar
  • icon-android-alarm-clock
  • icon-android-time
  • icon-android-stopwatch
  • icon-android-watch
  • icon-android-locate
  • icon-android-navigate
  • icon-android-pin
  • icon-android-compass
  • icon-android-map
  • icon-android-walk
  • icon-android-bicycle
  • icon-android-car
  • icon-android-bus
  • icon-android-subway
  • icon-android-train
  • icon-android-boat
  • icon-android-plane
  • icon-android-restaurant
  • icon-android-bar
  • icon-android-cart
  • icon-android-camera
  • icon-android-image
  • icon-android-film
  • icon-android-color-palette
  • icon-android-create
  • icon-android-mail
  • icon-android-drafts
  • icon-android-send
  • icon-android-archive
  • icon-android-delete
  • icon-android-attach
  • icon-android-share
  • icon-android-share-alt
  • icon-android-bookmark
  • icon-android-document
  • icon-android-clipboard
  • icon-android-list
  • icon-android-folder-open
  • icon-android-folder
  • icon-android-print
  • icon-android-open
  • icon-android-exit
  • icon-android-contract
  • icon-android-expand
  • icon-android-globe
  • icon-android-chat
  • icon-android-textsms
  • icon-android-hangout
  • icon-android-happy
  • icon-android-sad
  • icon-android-person
  • icon-android-people
  • icon-android-person-add
  • icon-android-contact
  • icon-android-contacts
  • icon-android-playstore
  • icon-android-lock
  • icon-android-unlock
  • icon-android-microphone
  • icon-android-microphone-off
  • icon-android-notifications-none
  • icon-android-notifications
  • icon-android-notifications-off
  • icon-android-volume-mute
  • icon-android-volume-down
  • icon-android-volume-up
  • icon-android-volume-off
  • icon-android-hand
  • icon-android-desktop
  • icon-android-laptop
  • icon-android-phone-portrait
  • icon-android-phone-landscape
  • icon-android-bulb
  • icon-android-sunny
  • icon-android-alert
  • icon-android-warning
  • icon-social-twitter
  • icon-social-twitter-outline
  • icon-social-facebook
  • icon-social-facebook-outline
  • icon-social-googleplus
  • icon-social-googleplus-outline
  • icon-social-google
  • icon-social-google-outline
  • icon-social-dribbble
  • icon-social-dribbble-outline
  • icon-social-octocat
  • icon-social-github
  • icon-social-github-outline
  • icon-social-instagram
  • icon-social-instagram-outline
  • icon-social-whatsapp
  • icon-social-whatsapp-outline
  • icon-social-snapchat
  • icon-social-snapchat-outline
  • icon-social-foursquare
  • icon-social-foursquare-outline
  • icon-social-pinterest
  • icon-social-pinterest-outline
  • icon-social-rss
  • icon-social-rss-outline
  • icon-social-tumblr
  • icon-social-tumblr-outline
  • icon-social-wordpress
  • icon-social-wordpress-outline
  • icon-social-reddit
  • icon-social-reddit-outline
  • icon-social-hackernews
  • icon-social-hackernews-outline
  • icon-social-designernews
  • icon-social-designernews-outline
  • icon-social-yahoo
  • icon-social-yahoo-outline
  • icon-social-buffer
  • icon-social-buffer-outline
  • icon-social-skype
  • icon-social-skype-outline
  • icon-social-linkedin
  • icon-social-linkedin-outline
  • icon-social-vimeo
  • icon-social-vimeo-outline
  • icon-social-twitch
  • icon-social-twitch-outline
  • icon-social-youtube
  • icon-social-youtube-outline
  • icon-social-dropbox
  • icon-social-dropbox-outline
  • icon-social-apple
  • icon-social-apple-outline
  • icon-social-android
  • icon-social-android-outline
  • icon-social-windows
  • icon-social-windows-outline
  • icon-social-html5
  • icon-social-html5-outline
  • icon-social-css3
  • icon-social-css3-outline
  • icon-social-javascript
  • icon-social-javascript-outline
  • icon-social-angular
  • icon-social-angular-outline
  • icon-social-nodejs
  • icon-social-sass
  • icon-social-python
  • icon-social-chrome
  • icon-social-chrome-outline
  • icon-social-codepen
  • icon-social-codepen-outline
  • icon-social-markdown
  • icon-social-tux
  • icon-social-freebsd-devil
  • icon-social-usd
  • icon-social-usd-outline
  • icon-social-bitcoin
  • icon-social-bitcoin-outline
  • icon-social-yen
  • icon-social-yen-outline
  • icon-social-euro
  • icon-social-euro-outline
Show all

Typography

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading
<h1>h1 Heading</h1>
                            <h2>h2 Heading</h2>
                            <h3>h3 Heading</h3>
                            <h4>h4 Heading</h4>
                            <h5>h5 Heading</h5>
                            <h6>h6 Heading</h6>
                                                    

Lists

Unordered

  • Lorem ipsum dolor sit amet
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Ac tristique libero volutpat at
  • Eget porttitor lorem
<ul>
						<li>Lorem ipsum dolor sit amet</li>
						<li>Consectetur adipiscing elit</li>
						...
						</ul>                        

Ordered

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Eget porttitor lorem
<ol>
						<li>Lorem ipsum dolor sit amet</li>
						<li>Consectetur adipiscing elit</li>
						...
						</ol>                        

Unstyled

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Eget porttitor lorem
<ul class="unstyled">...</ul>                        

Inline

  • Lorem ipsum
  • Consectetur
  • Integer molestie
<ul class="inline">...</ul>                        

Forms

Standard

Switch me
<form>
					
						<div class="form-element">
						<label for="name1">Name</label>
						<input type="text" class="form-field" id="name1">
						</div>
						
						<div class="form-element">
						<label for="password1">Password</label>
						<input type="password" class="form-field" id="password1">
						</div>
						
						<div class="form-element">
						<div class="checkbox">
						<input id="checkbox1" type="checkbox">
						<label for="checkbox1">Check me</label>
						</div>
                       	<div class="checkbox">
                        <input id="checkbox2" type="checkbox">
                        <label for="checkbox2">Check me #2</label>
                        </div>
						</div>
                                
                        <div class="form-element">
                        <label>Radio</label>
                        <div class="radio-inline">
                        <input id="radio1" type="radio" name="radio" checked>
                        <label for="radio1">Radio</label>
                        </div>
                        <div class="radio-inline">
                        <input id="radio2" type="radio" name="radio">
                        <label for="radio2">Radio #2</label>
                        </div>
                        </div>
						
						<div class="form-element">
						<div class="switch">
						<input id="switch1" type="checkbox">
						<label for="switch1"></label>
						<div>Switch me</div>
						</div>
						</div>
                                
                        <div class="form-element">
						<label>Checkboxes inline</label>
                        <div class="checkbox-inline">
                        <input id="checkboxInline1" type="checkbox">
                        <label for="checkboxInline1">Check me</label>
                        </div>
                        <div class="checkbox-inline">
                        <input id="checkboxInline2" type="checkbox">
                        <label for="checkboxInline2">Check me #2</label>
                        </div>
                        </div>
						
						<button type="submit" class="button">Submit</button>
						
						</form>                        

Horizontal

test@test.de (not changeable)

<form class="horizontal">
                            
                        <div class="form-element">
                        <label for="nameh" class="sm-3">Name</label>
                        <div class="sm-9">
                        <input type="text" class="form-field error" id="nameh">
                        </div>
                        </div>
                            
                        <div class="form-element">
                        <label class="sm-3">Email</label>
                        <div class="sm-9">
                        <p class="static">test@test.de (not changeable)</p>
                        </div>
                        </div>
                                
                        <div class="form-element">
                        <label for="gender" class="sm-3">Gender</label>
                        <div class="sm-9">
						<div class="form-select">
                        <select class="form-field" id="gender">
						<option>Male</option>
						<option>Female</option>
                        </select>
						</div>
                        </div>
                        </div>
                                
                        <div class="form-element">
                        <label class="sm-3">Radio</label>
                        <div class="sm-9">
                        <div class="radio-inline">
                        <input id="radio1h" type="radio" name="radioh" checked>
                        <label for="radio1h">Radio</label>
                        </div>
                        <div class="radio-inline">
                        <input id="radio2h" type="radio" name="radioh">
                        <label for="radio2h">Radio #2</label>
                        </div>
                        </div>
                        </div>
                                
                        <div class="columns">
                        <div class="sm-9 sm-offset-3">
                        <button type="submit" class="button">Submit</button>
                        </div>
                        </div>
						
						</form>                        

Grid

Getting started

There are a total of 12 columns availabe for each breakpoint (unlimited nestable). You can split it up like this e.x. : 4x3, 3x4, 2x6, 1x12, ....
See how the grid system works for different devices:

Class prefix Description Container width
.xs- Phones (<768px) auto
.sm- Small devices (>768px) 730px
.md- Medium devices (>992px) 960px
.lg- Large devices (>1180) 1150px
lg-4
lg-4
lg-4
md-6
md-6
<div class="columns">
                        <div class="lg-4"></div>
                        <div class="lg-4"></div>
                        <div class="lg-4"></div>
                    	</div>
						
						<div class="columns">
                        <div class="md-6"></div>
                        <div class="md-6"></div>
                    	</div>                        

Mobile & Desktop

md-3 xs-4
md-3 xs-4
md-6 xs-4
<div class="columns">
                        <div class="md-3 xs-4"></div>
                        <div class="md-3 xs-4"></div>
                        <div class="md-6 xs-4"></div>
                    	</div>                        

Offset

Each breakpoint also got offset classes:

md-4 md-offset-2
md-6 md-offset-1
<div class="columns">
                        <div class="md-4 md-offset-2"></div>
                        <div class="md-5 md-offset-1"></div>
                    	</div>                        

Helper classes

Text

Class Description
.text-primary Text color equal to @primary
.text-success Text color equal to @success
.text-warning Text color equal to @warning
.text-error Text color equal to @error
.text-light Text color equal to @text-light
.text-dark Text color equal to @text-dark

Floats

Class Description
.fl-left Floating the element to the left.
.fl-right Floating the element to the right.
.clear Easily clear floats by adding .clear to the parent element.

You can also add an extra element (e.x. div) to clear floats:

<div class="clear"></div>