Created
April 2, 2015 20:24
-
-
Save fidel-karsto/432f9a9f6ba94e3aab6e to your computer and use it in GitHub Desktop.
Example of a dynamic responsive grid system.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// DyRGS - dynamic responsive grid system | |
// @author: karsten.rieger@tritium-design.de | |
@gutter: 1.5625%; // ~= 10px gutter @ 320px width | |
@mobile-column-count: 4; | |
@tablet-column-count: 8; | |
@desktop-column-count: 12; | |
@mobile-selector: m; | |
@tablet-selector: t; | |
@desktop-selector: d; | |
// mixin creates basic grid columns | |
// -------------------------------- | |
// @columnType - is one of [mobile, tablet, desktop] | |
// @i - iterator variable used for column width / spreading | |
// @count - the overall number of columns in one row, determined by @columnType | |
.generate-columns(@columnType, @i: 1, @count: "@{columnType}-column-count") when (@i <= @@count) { | |
// determine css class prefix by column type | |
// @locSel contains the concatenated string of type and suffix | |
// @selector can be used to render the class name in concatenation with other strings | |
.getColumnTypeClassName(@colType) { | |
@locSel: "@{colType}-selector"; | |
@selector: @@locSel; | |
} | |
// mixin to calculate relative width of one column | |
// ----------------------------------------------- | |
// @column-count - the overall number of coulmns in one row | |
// @spread - the spreading of the cell across number of columns, i.e. the width in columns | |
.calculateColumnWidth(@column-count, @spread) { | |
@width: (((100 - (@gutter * (@column-count - 1))) / @column-count) * @spread + (@spread - 1) * @gutter); | |
@singleColumnWidth: ((100 - (@gutter * (@column-count - 1))) / @column-count) ; | |
} | |
// resolve class name used for css selector by columnType (mobile, tablet or desktop) | |
.getColumnTypeClassName(@columnType); | |
// this will output the actual class definition | |
.@{selector}-col-@{i} { | |
.calculateColumnWidth(@@count, @i); | |
width: @width | |
} | |
// mixin to create columns with offset | |
// (the sum of column width and offset width is always <= 100%) | |
// ------------------------------------------------------------ | |
// @w: - column width | |
// @push: - left offset of column | |
// @index: - the number of columns to be pushed | |
.generate-pushed-columns(@w, @push, @index:1) when ( (@i + @index) <= @@count ) { | |
.@{selector}-col-@{i}-push-@{index} { | |
width: @w; | |
margin-left: (@push + @index * @gutter); | |
} | |
.generate-pushed-columns(@w, ((@index+1) * @singleColumnWidth), (@index+1)); | |
} | |
// determine width of current column | |
.calculateColumnWidth(@@count, @i); | |
// create push columns for current column width | |
.generate-pushed-columns(@width, @singleColumnWidth); | |
// recursively call generator method until total number of columns is reached | |
.generate-columns(@columnType, (@i + 1)); | |
} | |
.row { | |
display: block; | |
width: 100%; | |
} | |
.row:before, .row:after { | |
content: " "; | |
display: table; | |
} | |
.row:after { | |
clear: both; | |
} | |
.col { | |
height: 1em; | |
float: left; | |
margin: 0 (@gutter) 0 0; | |
border: 1px solid red; | |
} | |
.row .col:last-child { | |
margin-right: 0; | |
} | |
.generate-columns(mobile); | |
@media (min-width: 720px) { | |
.generate-columns(tablet); | |
} | |
@media (min-width: 1280px) { | |
.generate-columns(desktop); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Creates a simple responsive grid system.