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.

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-#

<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

<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

<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

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;
    }
};

Tables

<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>John</td>
            <td>Doe</td>
            <td>john</td>
        </tr>
        ...
    </tbody>
</table>

<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 class="btn">Button</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-error">Error</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>

Empty buttons

Just add btn-empty class.

<button class="btn btn-empty">Button</button>

Small buttons

Just add btn-sm class.

Big buttons

Just add btn-lg class.

<button class="btn btn-lg">Button</button>

Helpers

Responsive

TODO docs

Icons

I included great stroke icons by Pixeden.

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