SkyBlue CSS Framework

GitHub Download .zip
By Stanko @ Null Object

About SkyBlue

This is not Bootstrap killer, I just think Bootstrap is way too bloated. SkyBlue is a minimal framework that is meant to be starting point for my projects.

Uses grid system with 12 columns. Add col class and responsive xs-# sm-# md-# lg-#. Offsets are also available by offset-xm-# offset-sm-# offset-md-# offset-lg-# classes.

I made it for my own needs. Feel free to use it and abuse it, in both free and commercial products.

Framework is made in SASS and source is available on Git-hub

Some websites made using this framework:

If you want to list your site/project please contact me.

Licenced under MIT license.

TODO

Grid

1
11
2
10
3
9
4
8
5
7
6
6

Nesting grid

xs-4 inside md-8
xs-4
xs-4
xs-4
xs-4 inside md-4
xs-4
xs-4
xs-4

Typography

Paragraph and links

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Vivamus sagittis lacus vel augue rutrum faucibus dolor auctor. Donec id elit non mi porta gravida at eget metus.

Headers

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Unordered list

Ordered list

  1. Cras mattis consectetur purus sit amet fermentum.
  2. Donec ullamcorper nulla non metus auctor fringilla.
    1. Aenean eu leo quam.
    2. Pellentesque ornare sem lacinia quam venenatis vestibulum.
    3. Nullam quis risus eget urna mollis ornare vel eu leo.
  3. Maecenas sed diam eget risus varius blandit sit amet non magna.

Blockquote

Very smart blockquote!

Smarty, Smart Person

Code

RL.stopPropagation = function(e){
    e = e || window.event; // IE Fix

    if(e.stopPropagation){
        e.stopPropagation();
    }
    else{
        // IE8 and lower stop propagation
        window.event.cancelBubble = true;
        window.event.returnValue = false;
    }
};

Inline <code>example</code> usage.


Tables

# First Name Last Name User
1 Stanko Tadic stanko
2 Ognjen Vuk Perisic gio
3 Milos Pavlicevic pavlicak

Table striped, bordered, hover

# First Name Last Name User
1 Stanko Tadic stanko
2 Ognjen Vuk Perisic gio
3 Milos Pavlicevic pavlicak

Forms

For horizontal forms just use grid


Buttons

Button Success Error Warning Light Dark
Empty btn Success Error Warning Light Dark

Small btns

Button Success Error Warning Light Dark
Button Success Error Warning Light Dark

Big btns

Button Success Error Warning Light Dark
Button Success Error Warning Light Dark

Icons

I included great stroke icons by Pixeden.

icon-album
icon-arc
icon-back-2
icon-bandaid
icon-car
icon-diamond
icon-door-lock
icon-eyedropper
icon-female
icon-gym
icon-hammer
icon-headphones
icon-helm
icon-hourglass
icon-leaf
icon-magic-wand
icon-male
icon-map-2
icon-next-2
icon-paint-bucket
icon-pendrive
icon-photo
icon-piggy
icon-plugin
icon-refresh-2
icon-rocket
icon-settings
icon-shield
icon-smile
icon-usb
icon-vector
icon-wine
icon-cloud-upload
icon-cash
icon-close
icon-bluetooth
icon-cloud-download
icon-way
icon-close-circle
icon-id
icon-angle-up
icon-wristwatch
icon-angle-up-circle
icon-world
icon-angle-right
icon-volume
icon-angle-right-circle
icon-users
icon-angle-left
icon-user-female
icon-angle-left-circle
icon-up-arrow
icon-angle-down
icon-switch
icon-angle-down-circle
icon-scissors
icon-wallet
icon-safe
icon-volume2
icon-volume1
icon-voicemail
icon-video
icon-user
icon-upload
icon-unlock
icon-umbrella
icon-trash
icon-tools
icon-timer
icon-ticket
icon-target
icon-sun
icon-study
icon-stopwatch
icon-star
icon-speaker
icon-signal
icon-shuffle
icon-shopbag
icon-share
icon-server
icon-search
icon-film
icon-science
icon-disk
icon-ribbon
icon-repeat
icon-refresh
icon-add-user
icon-refresh-cloud
icon-paperclip
icon-radio
icon-note2
icon-print
icon-network
icon-prev
icon-mute
icon-power
icon-medal
icon-portfolio
icon-like2
icon-plus
icon-left-arrow
icon-play
icon-key
icon-plane
icon-joy
icon-photo-gallery
icon-pin
icon-phone
icon-plug
icon-pen
icon-right-arrow
icon-paper-plane
icon-delete-user
icon-paint
icon-bottom-arrow
icon-notebook
icon-note
icon-next
icon-news-paper
icon-musiclist
icon-music
icon-mouse
icon-more
icon-moon
icon-monitor
icon-micro
icon-menu
icon-map
icon-map-marker
icon-mail
icon-mail-open
icon-mail-open-file
icon-magnet
icon-loop
icon-look
icon-lock
icon-lintern
icon-link
icon-like
icon-light
icon-less
icon-keypad
icon-junk
icon-info
icon-home
icon-help2
icon-help1
icon-graph3
icon-graph2
icon-graph1
icon-graph
icon-global
icon-gleam
icon-glasses
icon-gift
icon-folder
icon-flag
icon-filter
icon-file
icon-expand1
icon-exapnd2
icon-edit
icon-drop
icon-drawer
icon-download
icon-display2
icon-display1
icon-diskette
icon-date
icon-cup
icon-culture
icon-crop
icon-credit
icon-copy-file
icon-config
icon-compass
icon-comment
icon-coffee
icon-cloud
icon-clock
icon-check
icon-chat
icon-cart
icon-camera
icon-call
icon-calculator
icon-browser
icon-box2
icon-box1
icon-bookmarks
icon-bicycle
icon-bell
icon-battery
icon-ball
icon-back
icon-attention
icon-anchor
icon-albums
icon-alarm
icon-airplay