Skip to content
This repository has been archived by the owner on Aug 10, 2021. It is now read-only.

Fluid Columns / Fixed Gutters #1

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fluid Columns / Fixed Gutters #1

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fcd37ca
Fluid Columns / Fixed Gutters
teyepe Jun 2, 2014
7d25277
Update _griddo.scss
teyepe Sep 5, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
230 changes: 147 additions & 83 deletions sass/_griddo.scss
View file
Open in desktop
@@ -1,187 +1,231 @@
//
// Configuration
//
$griddo-behavior: false !default;
$griddo-float: left !default;
// Vars

$griddo-columns: 12; // tested values: 9 | 8 | 6 | 4 | 3 | 2 plus 16 for $griddo-row-width: 99em
$griddo-gutter: 3em !default;
$griddo-spacer: $griddo-gutter/2;
$griddo-row-width: 75em !default; // tested values: 99em | 57em | 43.5em | 30em
$griddo-behavior: false !default;
$griddo-float: left !default;
$griddo-float-opposite: right !default;
$griddo-gutter: 1.875em !default;
$griddo-columns: 12 !default;
$griddo-row-width: 62.5em !default;
$griddo-dividend: false !default;
$griddo-divisor: $griddo-columns !default;
$griddo-dividend: false !default;
$griddo-divisor: $griddo-columns !default;


// Calculate the % witdh of each column

@function column-perc($griddo-row-width, $griddo-divisor) {
@for $griddo-dividend from 1 through $griddo-divisor {
@return (((($griddo-row-width - ($griddo-gutter * 2)) - (($griddo-divisor - 1) * $griddo-gutter)) / $griddo-divisor) / ($griddo-row-width - ($griddo-gutter * 2))) * 100%;
}
}


// Calculate the % witdh of each gutter

@function gutter-perc($griddo-row-width, $griddo-divisor) {
@for $griddo-dividend from 1 through $griddo-divisor {
@return (100% - (column-perc($griddo-row-width, $griddo-divisor) * $griddo-divisor)) / ($griddo-divisor - 1);
}
}


//
// Function for calculate percentage.
//

@function griddo-calc($griddo-dividend, $griddo-divisor) {
@return percentage(($griddo-dividend / $griddo-divisor));
@return percentage($griddo-dividend / $griddo-divisor);
}


// Function calculating griddo-pulls' steps

@function rsp-pos-step($griddo-dividend, $griddo-divisor) {

$griddo-subtract: (($griddo-divisor - $griddo-dividend) / $griddo-divisor) * $griddo-gutter;
@for $griddo-dividend from 1 through $griddo-divisor {
@return $griddo-subtract;
}
}


// Function calculating griddo-pushes & offset steps

@function rsp-neg-step($griddo-dividend, $griddo-divisor) {

$griddo-add: (- $griddo-dividend / $griddo-divisor) * $griddo-gutter;
@for $griddo-dividend from 1 through $griddo-divisor {
@return $griddo-add;
}
}

//

// Intializes a row.
//
@mixin griddo-row($griddo-behavior: false, $griddo-gutter: $griddo-gutter) {
@include griddo-clearfix;

clear: both;
list-style: none;
padding: 0;
@mixin griddo-row($griddo-behavior: false, $griddo-gutter: $griddo-gutter) {

@if $griddo-behavior == nest {
@include griddo-row-nest($griddo-gutter: $griddo-gutter);
}
@else if $griddo-behavior == collapse {
} @else if $griddo-behavior == collapse {
@include griddo-row-collapse;
}
@else if $griddo-behavior == nest-collapse {
} @else if $griddo-behavior == nest-collapse {
@include griddo-row-nest-collapse;
}
@else {
} @else {
@include griddo-row-default;
}
@include griddo-clearfix;
}

//

// Row type: Default
//

@mixin griddo-row-default {
margin: 0 auto;
margin-left: auto;
margin-right: auto;
max-width: $griddo-row-width;
padding-left: $griddo-gutter;
padding-right: $griddo-gutter;
width: 100%;
}

//

// Row type: Nest
//

@mixin griddo-row-nest($griddo-gutter: $griddo-gutter) {
margin: 0 (-($griddo-gutter / 2));
margin-left: (-($griddo-gutter / 2));
margin-right: (-($griddo-gutter / 2));
max-width: none;
width: auto;
}

//

// Row type: Collapse
//

@mixin griddo-row-collapse {
margin: 0;
margin-left: 0;
margin-right: 0;
max-width: $griddo-row-width;
width: 100%;
}

//

// Row type: Nest collapse
//

@mixin griddo-row-nest-collapse {
margin: 0;
margin-left: 0;
margin-right: 0;
max-width: none;
width: auto;
}

//
// Render a column.
//

@mixin griddo-column($griddo-dividend: false, $griddo-divisor: $griddo-columns, $griddo-gutter: $griddo-gutter) {
float: $griddo-float;
list-style: none;
min-height: 1px;
position: relative;

@include griddo-gutter($griddo-gutter);

@if $griddo-dividend {
@include griddo-width($griddo-dividend, $griddo-divisor);
}
}

//

// Return calculated width.
//

@mixin griddo-width($griddo-dividend, $griddo-divisor: $griddo-columns) {
width: griddo-calc($griddo-dividend, $griddo-divisor);
width: calc(#{griddo-calc($griddo-dividend, $griddo-divisor)} - #{rsp-pos-step($griddo-dividend, $griddo-divisor)});
}

//
// Set gutter
//
@mixin griddo-gutter($griddo-gutter: $griddo-gutter) {
padding-left: ($griddo-gutter / 2);
padding-right: ($griddo-gutter / 2);
}

//
// Default float.
//

@mixin griddo-float {
float: $griddo-float;
}

//

// Center a column or item.
//

@mixin griddo-centered {
float: none;
margin: 0 auto;
margin-left: auto;
margin-right: auto;
}

//

// Float last column on opposite side.
//

@mixin griddo-last {
float: $griddo-float-opposite;
}

//

// Offset a column.
//

@mixin griddo-offset($griddo-dividend: 1, $griddo-divisor: $griddo-columns) {
margin-#{$griddo-float}: griddo-calc($griddo-dividend, $griddo-divisor);
margin-#{$griddo-float}: calc(#{griddo-calc($griddo-dividend, $griddo-divisor)} + #{-(rsp-neg-step($griddo-dividend, $griddo-divisor))});
}

//

// Push a column.
//

@mixin griddo-push($griddo-dividend: 1, $griddo-divisor: $griddo-columns) {
#{$griddo-float}: griddo-calc($griddo-dividend, $griddo-divisor);
#{$griddo-float}: calc(#{griddo-calc($griddo-dividend, $griddo-divisor)} + #{-(rsp-neg-step($griddo-dividend, $griddo-divisor))});
#{$griddo-float-opposite}: auto;
}

//

// Pull a column.
//

@mixin griddo-pull($griddo-dividend: 1, $griddo-divisor: $griddo-columns) {
#{$griddo-float-opposite}: griddo-calc($griddo-dividend, $griddo-divisor);
#{$griddo-float-opposite}: calc(#{griddo-calc($griddo-dividend, $griddo-divisor)} + #{-(rsp-neg-step($griddo-dividend, $griddo-divisor))});
#{$griddo-float}: auto;
}

//
// Collapse something
//

// Collapse something.

@mixin griddo-collapse {
padding-left: 0;
padding-right: 0;
}

//

// Make a single element behave like a row with one column of 100% width.
//

@mixin griddo-container($griddo-behavior: false, $griddo-gutter: $griddo-gutter) {
@include griddo-row($griddo-behavior);
@include griddo-gutter($griddo-gutter);
}

//
// Clear floats.
//

@mixin griddo-clearfix {
*zoom:1;
&:before, &:after { content: " "; display: table; }
&:after { clear: both; }
*zoom: 1;

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

&:after {
clear: both;
}
}

//

// Create grid classes.
//
@mixin griddo-classes($row-class: row, $column-class: column, $columns-class: column, $total-columns: $griddo-columns, $offset-class: offset, $push-class: push, $pull-class: pull) {

@mixin griddo-classes(
$row-class: row,
$column-class: col,
$columns-class: col,
$total-columns: $griddo-columns,
$offset-class: offset,
$push-class: push,
$pull-class: pull
) {

.#{$row-class} {
@include griddo-row;

Expand All @@ -200,6 +244,15 @@ $griddo-divisor: $griddo-columns !default;
}
}

@for $i from 1 through $total-columns {
.#{$columns-class}#{-$i} {
@include griddo-width($i, $total-columns);
& + .#{$columns-class} {
margin-#{$griddo-float}: $griddo-gutter;
}
}
}

@if $column-class != false {
.#{$column-class} {
@include griddo-column;
Expand All @@ -219,7 +272,18 @@ $griddo-divisor: $griddo-columns !default;
}

@for $i from 1 through $total-columns {
.#{$columns-class}#{-$i} { @include griddo-width($i, $total-columns); }
> .#{$column-class}-#{$i}_#{$total-columns} {
@include griddo-width($i, $total-columns);
}
}

& > .#{$column-class} + .#{$column-class} {

@if $total-columns != 1 {
margin-#{$griddo-float}: $griddo-gutter;
} @else {
margin-#{$griddo-float}: 0;
}
}

@for $i from 1 through $total-columns - 1 {
Expand Down