Skip to content

Instantly share code, notes, and snippets.

@makenosound
Created October 14, 2012 21:14
Show Gist options
  • Save makenosound/3889831 to your computer and use it in GitHub Desktop.
Save makenosound/3889831 to your computer and use it in GitHub Desktop.
flexi grid thing
// Configurables
$flexiColumns: 24 !default;
$flexiColumnWidth: 30px !default;
$flexiGutterWidth: 18px !default;
// Full width of a row
$flexiRowWidth: ($flexiColumns * $flexiColumnWidth) + ($flexiGutterWidth * ($flexiColumns - 1));
// The width of a column
$flexiGridWidth: percentage($flexiColumnWidth / $flexiRowWidth);
// The amount of margin between columns
$flexiGridMargin: percentage($flexiGutterWidth / $flexiRowWidth);
@mixin flexi-wrapper {
@extend .__clearfix;
margin: 0 auto;
max-width: $flexiRowWidth;
width: 100%;
}
@mixin flexi-row {
padding-left: 20px;
padding-right: 20px;
}
/*
Main mixin, set the width of `$columns` columns
Can be changed based on the width of the parent column. I.e., to create a 4Column
<div> inside a 10Column <div> you would do the following:
@include flexi-column(4, false, 10);
*/
@mixin flexi-column($columns, $last: false, $parent: $flexiColumns) {
width: flexiSpan($columns, $parent);
@if $last {
margin-right: 0; }
@else {
margin-right: flexiMargin($flexiGridMargin, $parent); }
}
@mixin flexi-push($columns, $parent: $flexiColumns) {
margin-left: flexiPushMargin($columns, $parent);
}
// Function to calculate width in context
@function flexiSpan($columns, $parent: $flexiColumns) {
@return ($flexiGridWidth * $columns + $flexiGridMargin * ($columns - 1)) / ($flexiGridWidth * $parent + $flexiGridMargin * ($parent - 1)) * 100%;
}
// Function to calculate margins in context
@function flexiMargin($margin, $parent: $flexiColumns) {
@return $margin / flexiSpan($parent) * 100%;
}
// Function to calculate push in context
@function flexiPushMargin($columns, $parent: $flexiColumns) {
@return ($flexiGridWidth * $columns + $flexiGridMargin * $columns) / ($flexiGridWidth * $parent + $flexiGridMargin * ($parent - 1)) * 100%;
}
// Output as classes for use
@mixin output-flexi-classes($gridClass: "grid", $rowClass: "row", $wrapperClass: "wrapper", $lastClass: "last") {
.#{$gridClass},
[class^="#{$gridClass}-"],
[class*=" #{$gridClass}-"] {
display: inline;
float: left;
clear: none;
.debug & {
background-color: rgba(#f09, .2);
}
}
// Create two levels of nested grid classes
@for $i from 1 through $flexiColumns {
.#{$gridClass}-#{$i} {
@include flexi-column($i);
@for $c from 1 through $i - 1 {
.#{$gridClass}-#{$c} {
@include flexi-column($c, false, $i);
}
}
.#{$lastClass} {
margin-right: 0;
}
}
}
.#{$rowClass} {
@include flexi-row;
}
.#{$wrapperClass} {
@include flexi-wrapper;
}
.#{$lastClass} {
margin-right: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment