SkyBlue CSS Framework

GitHub Download .zip
By Stanko @ Null Object

About

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.

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

SkyBlue is available on bower:
bower install skyblue

Framework is made in SASS and source is available on GitHub.

Some websites made using this framework:

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

Licenced under MIT license.


Grid

Add col class to every column. Size it using responsive classes, where # is a number from 0 to 12
xs-# sm-# md-# lg-# xl-#

Offsets are also available by adding
offset-xm-# offset-sm-# offset-md-# offset-lg-# offset-xl-#

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
6
6
<div class="row">
    <div class="col md-1">1</div>
    <div class="col md-1">1</div>
    <div class="col md-1">1</div>
    <div class="col md-1">1</div>
    <div class="col md-1">1</div>
    <div class="col md-1">1</div>
    <div class="col md-1">1</div>
    <div class="col md-1">1</div>
    <div class="col md-1">1</div>
    <div class="col md-1">1</div>
    <div class="col md-1">1</div>
    <div class="col md-1">1</div>
</div>
<div class="row">
    <div class="col md-4">4</div>
    <div class="col md-4">4</div>
    <div class="col md-4">4</div>
</div>
<div class="row">
    <div class="col md-6">6</div>
    <div class="col md-6">6</div>
</div>

Actuall .cel size with padding included

1
11
4
8
5
7
6
6
<div class="row">
    <div class="col md-1"><div>1</div></div>
    <div class="col md-11"><div>11</div></div>
</div>
<div class="row">
    <div class="col md-4"><div>4</div></div>
    <div class="col md-8"><div>8</div></div>
</div>
<div class="row">
    <div class="col md-5"><div>5</div></div>
    <div class="col md-7"><div>7</div></div>
</div>
<div class="row">
    <div class="col md-6"><div>6</div></div>
    <div class="col md-6"><div>6</div></div>
</div>

Nesting grid

md-8
xs-6
xs-6
md-4
xs-4
xs-4
xs-4
<div class="row">
    <div class="col md-8">
        md-8
        <div class="row">
            <div class="col xs-6">xs-6</div>
            <div class="col xs-6">xs-6</div>
        </div>
    </div>
    <div class="col md-4">
        md-4
        <div class="row">
            <div class="col xs-4">xs-4</div>
            <div class="col xs-4">xs-4</div>
            <div class="col xs-4">xs-4</div>
        </div>
    </div>
</div>

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 *

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

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.

* Use .unstyled class to remove all styles from lists

Blockquote

Information is not knowledge.
Knowledge is not wisdom.
Wisdom is not truth.
Truth is not beauty.
Beauty is not love.
Love is not music.
Music is THE BEST.

Frank Zappa

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 class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>User</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Stanko</td>
            <td>Tadic</td>
            <td>stanko</td>
        </tr>
        ...
    </tbody>
</table>

Table striped, bordered, hover

# First Name Last Name User
1 Stanko Tadic stanko
2 Ognjen Vuk Perisic gio
3 Milos Pavlicevic pavlicak
<table class="table table-striped table-bordered table-hover">
    ...
</table>

Forms

For text inputs, selects and textarea, just use class form-control.

<div>
    <label>Input</label>
    <input class="form-control" type="text">
</div>
<div  class="error">
    <label>Input - error</label>
    <input class="form-control" type="text">
</div>
<div class="warning">
    <label>Input - warning</label>
    <input class="form-control" type="text">
</div>
<div class="success">
    <label>Input - success</label>
    <input class="form-control" type="text">
</div>
<textarea class="form-control"></textarea>
<select class="form-control">
    <option> 2 persons </option>
    <option> 3 persons </option>
    ...
</select>
<div>
    <label><input type="checkbox"> Checkbox</label>
    <label><input type="checkbox"> Checkbox</label>
</div>
<label class="fancy-checkbox">
    <input type="checkbox">
    <span>Checkbox</span>
</label>
<div>
    <label><input type="checkbox"> Checkbox</label>
    <label><input type="checkbox"> Checkbox</label>
</div>
<label class="fancy-radio">
    <input type="radio">
    <span>Radio</span>
</label>

For horizontal forms just use grid


Buttons

Button Success Error Warning Light Dark
<a class="btn">Button</a>
<a class="btn btn-success">Success</a>
<a class="btn btn-error">Error</a>
<a class="btn btn-warning">Warning</a>
<a class="btn btn-light">Light</a>
<a class="btn btn-dark">Dark</a>

Empty buttons

Just add btn-empty class.

Empty btn Success Error Warning Light Dark
<a class="btn btn-empty">Button</a>

Small buttons

Just add btn-sm class.

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

Big buttons

Just add btn-lg class.

Button Success Error Warning Light Dark
Button Success Error Warning Light Dark
<a class="btn btn-lg">Button</a>

Helpers

Class name What it does Notes
margin-# margin: #px Where # can be 0, 5, 10, 15, 20, 25, 30, 40, 50, 100
margin-top-# margin-top: #px Same works for "bottom", "left", "right".
margin-x-# margin-left: #px; margin-right: #px Same works for "y".
padding-# padding: #px Where # can be 0, 5, 10, 15, 20, 25, 30, 40, 50, 100
padding-top-# padding-top: #px Same works for "bottom", "left", "right".
padding-x-# padding-left: #px; padding-right: #px Same works for "y".
float-left float: left;
float-right float: right;
float-none float: none;
clearfix @include clearfix;
relative position: relative;
absolute position: absolute;
text-center text-align: center;
text-left text-align: left;
text-right text-align: right;
text-justify text-align: justify;
uppercase text-transform: uppercase;
color-main color: $main-color;
color-success color: $success-color;
color-error color: $error-color;
color-warning color: $warning-color;
color-light color: $light-color;
color-dark color: $dark-color;
color-black color: #000;
color-white color: #fff;
bg-main background-color: $main-color; color: #fff;
bg-success background-color: $success-color; color: #fff;
bg-error background-color: $error-color; color: #fff;
bg-warning background-color: $warning-color; color: #fff;
bg-light background-color: $light-color; color: $gray3;
bg-dark background-color: $dark-color; color: #fff;
bg-white background-color: #fff;
block display: block;
inline-block display: inline-block;
inline display: inline;
hide display: none;
full-width width: 100%;
middle vertical-align: middle;
radius-3 border-radius: 3px;
radius-5 border-radius: 5px;
radius-10 border-radius: 10px;
radius-15 border-radius: 15px;
radius-big border-radius: $big-border-radius;
no-border border: none;
ellipsis @include ellipsis;

Responsive

TODO docs

Icons

I included great stroke icons by Pixeden.

<span class="icon-home"></span>
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