key/components/frag/lib/frag.less

A tiny little keycode library

/**
 * Frag v1.1.0
 *
 * Frag is a fluid, responsive, friendly, simple grid system
 * for CSS written in LESS.
 *
 * https://github.com/rowanmanning/frag
 *
 * Copyright 2012, Rowan Manning
 * Dual licensed under the MIT or GPL Version 2 licenses.
 */

//==========================================================
// Frag Config

// Maximum widths
@frag-max-width: 1200px;
@frag-ie7-width: 960px;

// Break-points
@frag-break-tablet: 1000px;
@frag-break-mobile: 640px;

// Columns and gutters
@frag-column-count: 12;
@frag-gutter-width: 20px;

//==========================================================
// Utilities

// Clearfix utility for clearing floats
.frag-clearfix () {
    zoom: 1;

    &:before, &:after {
        display: table;
        content: '';
    }
    &:after {
        clear: both;
    }
}

// Cross-browser box-sizing
.frag-box-sizing (@box-sizing) {
    -webkit-box-sizing: @box-sizing; // safari 3.1–5.0
       -moz-box-sizing: @box-sizing; // firefox 2+
            box-sizing: @box-sizing; // w3c standard
}

// Column width calculator
.frag-colspan (@colspan) {
    width: (100% / @frag-column-count) * @colspan;

    // IE6+7 junk
    @double-gutter-width: (@frag-gutter-width * 2);
    @ie7-width-minus-gutter: (@frag-ie7-width - @double-gutter-width);
    @ie7-single-column-width: floor(@ie7-width-minus-gutter / @frag-column-count);
    *width: ((@ie7-single-column-width * @colspan) - @double-gutter-width);
}

//==========================================================
// Grid

// Container
.grid {
    .frag-box-sizing(border-box);
    max-width: @frag-max-width;
    *width: (@frag-ie7-width - (@frag-gutter-width * 2)); // IE7
    padding-left: @frag-gutter-width;
    padding-right: @frag-gutter-width;
    overflow: hidden;
    .frag-clearfix();

    .grid {
        padding-left: 0;
        padding-right: 0;
    }
}

// Basic column styling
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7,
.col-8, .col-9, .col-10, .col-11, .col-12 {
    .frag-box-sizing(border-box);
    display: block;
    float: left;
    padding-left: @frag-gutter-width;
    padding-right: @frag-gutter-width;
    overflow: hidden;
}

// Column clearing
.col-clear {
    clear: left;
}

// IE 6+7-specific column clearing
.ie-clear {
    display: none;
    *display: block;
    *clear: both;
}

// Column hiding
.col-hide {
    display: none;
}

// Column gutter removal
.col-gutterless {
    padding-left: 0;
    padding-right: 0;

    // Re-add padding for IE6+7
    *padding-left: @frag-gutter-width;
    *padding-right: @frag-gutter-width;
}

//==========================================================
// Columns (Base Grid)

.col-1  { .frag-colspan(1 ); }
.col-2  { .frag-colspan(2 ); }
.col-3  { .frag-colspan(3 ); }
.col-4  { .frag-colspan(4 ); }
.col-5  { .frag-colspan(5 ); }
.col-6  { .frag-colspan(6 ); }
.col-7  { .frag-colspan(7 ); }
.col-8  { .frag-colspan(8 ); }
.col-9  { .frag-colspan(9 ); }
.col-10 { .frag-colspan(10); }
.col-11 { .frag-colspan(11); }
.col-12 { .frag-colspan(12); }

// Nested column fix for IE 6+7
.grid .grid {
    *width: auto;
    
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7,
    .col-8, .col-9, .col-10, .col-11, .col-12 {
        *width: auto;
        *float: none;
    }
}

//==========================================================
// Columns (Tablet)

@media (max-width: @frag-break-tablet) {

    // Reset unused base columns
    .col-5, .col-7, .col-8, .col-9, .col-10,
    .col-11, .col-12 { .frag-colspan(12); }
    .col-clear { clear: none; }
    .col-hide { display: block; }

    // Double the width of smaller columns by default
    .col-1 { .frag-colspan(2 ); }
    .col-2 { .frag-colspan(4 ); }
    .col-3 { .frag-colspan(6 ); }

    // Tablet-specific columns
    .col-tablet-1  { .frag-colspan(1 ); }
    .col-tablet-2  { .frag-colspan(2 ); }
    .col-tablet-3  { .frag-colspan(3 ); }
    .col-tablet-4  { .frag-colspan(4 ); }
    .col-tablet-5  { .frag-colspan(5 ); }
    .col-tablet-6  { .frag-colspan(6 ); }
    .col-tablet-7  { .frag-colspan(7 ); }
    .col-tablet-8  { .frag-colspan(8 ); }
    .col-tablet-9  { .frag-colspan(9 ); }
    .col-tablet-10 { .frag-colspan(10); }
    .col-tablet-11 { .frag-colspan(11); }
    .col-tablet-12 { .frag-colspan(12); }
    .col-tablet-clear { clear: left; }
    .col-tablet-hide { display: none; }

}

//==========================================================
// Columns (Mobile)

@media (max-width: @frag-break-mobile) {

    // Reset unused base columns
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7,
    .col-8, .col-9, .col-10, .col-11,
    .col-12 { .frag-colspan(12); }
    .col-clear, .col-tablet-clear { clear: none; }
    .col-hide, .col-tablet-hide { display: block; }

    // Mobile-specific columns
    .col-mobile-1  { .frag-colspan(1 ); }
    .col-mobile-2  { .frag-colspan(2 ); }
    .col-mobile-3  { .frag-colspan(3 ); }
    .col-mobile-4  { .frag-colspan(4 ); }
    .col-mobile-5  { .frag-colspan(5 ); }
    .col-mobile-6  { .frag-colspan(6 ); }
    .col-mobile-7  { .frag-colspan(7 ); }
    .col-mobile-8  { .frag-colspan(8 ); }
    .col-mobile-9  { .frag-colspan(9 ); }
    .col-mobile-10 { .frag-colspan(10); }
    .col-mobile-11 { .frag-colspan(11); }
    .col-mobile-12 { .frag-colspan(12); }
    .col-mobile-clear { clear: left; }
    .col-mobile-hide { display: none; }

}