Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
196 lines (140 sloc) 4.54 KB
// ...............
// 960 GRID SYSTEM
// ...............
//
// Created by Nathan Smith. See the official site for more info: http://960.gs/
//
// GPL license:
// http://www.gnu.org/licenses/gpl.html
//
// MIT license:
// http://www.opensource.org/licenses/mit-license.php
// ---------------------------------------------------------------------------
//
// Updated by Dale Sande
// It is amazing how complex this gets, can't imagine trying to do this in old fashioned CSS
//
///////// Base values for building grid ///////////
// ------------------------------------------------
@fluid_10: 1.04%; // percentage of 10px in the standard 960.gs // optimized for firefox 12 col
@fluid_10_webkit: @fluid_10 + 0.01%; // percentage of 10px in the standard 960.gs // webkit support
@fluid_10_moz_16: @fluid_10 - 0.04%; // percentage of 10px in the standard 960.gs // moz 16 col support
@fluid_20: 2.084%; // percentage of 20px in the standard 960.gs
@fluid_40: 4.17%; // percentage of 40px in 16 col standard 960.gs
@fluid_60: 6.25%; // percentage of 60px in 12/16 col standard 960.gs
@fluid_80: 8.4%; // percentage of 80px in 12 col standard 960.gs
@base_10: 10px; // equal to 10px in the standard 960.gs
@base_20: 20px; // equal to 20px in the standard 960.gs
@base_40: 40px; // equal to 40px in 16 col standard 960.gs
@base_60: 60px; // equal to 60px in 12/16 col standard 960.gs
@base_80: 80px; // equal to 80px in 12 col standard 960.gs
.position() {
position: relative;
}
.grid_placement(@var) {
display: inline;
float: left;
margin: 0 @var;
}
.grid_support_math(@gbase, @gplacement) {
@gutter_count: @col_count - 1; // creates the gutter count based from column -1
@gutter_value: @gutter_count * @gbase; // the gutter count * gutter width set in the mixin ~ see line 60 example
@col_count_width: @col_count * @base_value; // calc width from col count by base value set in the grid mixin ~ see line 60 example
.grid_placement(@gplacement); // this sets margin width for line 44
width: @col_count_width + @gutter_value; // writes an actual CSS value
}
///////// 12 col 960 grid system ///////////
// ----------------------------------------
.grid_12(@col_count) {
.grid_support_math(@base_20, @base_10);
@base_value: @base_60;
}
.flgrid_12(@col_count) {
.grid_support_math(@fluid_20, @fluid_10);
@base_value: @fluid_60;
}
///////// 16 col 960 grid system ///////////
// ----------------------------------------
.grid_16(@col_count) {
.grid_support_math(@base_20, @base_10);
@base_value: @base_40;
}
.flgrid_16(@col_count) {
.grid_support_math(@fluid_20, @fluid_10);
@base_value: @fluid_40;
}
///////// prefix value accounts for a full column in the grid ////////////
// -----------------------------------------------------------------------
.prefix_12(@col_count) {
padding-left: @base_80 * @col_count;
}
.prefix_12_auto(@col_count) {
padding-left: @base_80 * @col_count + @base_10;
}
.flprefix_12(@col_count) {
padding-left: @fluid_80 * @col_count;
}
.prefix_16(@col_count) {
padding-left: @base_60 * @col_count;
}
.flprefix_16(@col_count) {
padding-left: @fluid_60 * @col_count;
}
///////// suffix value accounts for a full column in the grid ////////////
// -----------------------------------------------------------------------
.suffix_12(@col_count) {
padding-right: @base_80 * @col_count;
}
.flsuffix_12(@col_count) {
padding-right: @fluid_80 * @col_count;
}
.suffix_16(@col_count) {
padding-right: @base_60 * @col_count;
}
.flsuffix_16(@col_count) {
padding-right: @fluid_60 * @col_count;
}
///////// push value accounts for a full column in the grid ////////////
// -----------------------------------------------------------------------
.push_12(@col_count) {
left: @base_80 * @col_count;
.position;
}
.flpush_12(@col_count) {
left: @fluid_80 * @col_count;
.position;
}
.push_16(@col_count) {
left: @base_60 * @col_count;
.position;
}
.flpush_16(@col_count) {
left: @fluid_60 * @col_count;
.position;
}
///////// pull value accounts for a full column in the grid ////////////
// -----------------------------------------------------------------------
.pull_12(@col_count) {
right: @base_80 * @col_count;
.position;
}
.flpull_12(@col_count) {
right: @fluid_80 * @col_count;
.position;
}
.pull_16(@col_count) {
right: @base_60 * @col_count;
.position;
}
.flpull_16(@col_count) {
right: @fluid_60 * @col_count;
.position;
}
/////////// `Grid >> Children (Alpha ~ First, Omega ~ Last) ///////////
// --------------------------------------------------------------------
.alpha() {
margin-left: 0;
}
.omega() {
margin-right: 0;
}