Last active
December 17, 2015 10:39
-
-
Save jhebb/5596318 to your computer and use it in GitHub Desktop.
Semantic alternative to Chris's excellent grid demo at CSS-Tricks : http://css-tricks.com/dont-overthink-it-grids/
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
/********************************************* | |
SIMPLE GRID | |
A very basic semantic Less grid system using padding. | |
Based on Chris Coyier's excellent grid demo at CSS-Tricks : http://css-tricks.com/dont-overthink-it-grids/ | |
********************************************/ | |
// Default grid padding, change to override | |
@gridpad: 2em; | |
// Set box-sizing: border-box on all elements | |
*, | |
:before, | |
:after { | |
.border-box; | |
} | |
// Add this to grid containers and nested grid containers | |
.grid() { | |
.group; | |
} | |
// Optional mixin to add padding to parent - can probably remove this and add on per-use basis | |
.grid-pad() { | |
padding: @gridpad; | |
} | |
/* Add this to a grid item | |
@num: number of columns to cover | |
@of: total number of columns | |
@pad: padding for column | |
@last: padding for last column | |
@float: direction to float columns | |
.col(3,5) will give a grid item of 60% width | |
.col(1,4, ) | |
*/ | |
.col(@num: 1; @of: 1; @pad: @gridpad; @last: 0; @float: left;) { | |
float: @float; | |
width: percentage( round( (@num/@of), 4 ) ); | |
padding-right: @pad; | |
overflow:hidden; | |
.box-sizing(border-box); | |
&:last-child, &.last-child { | |
padding-right: @last; | |
} | |
} | |
/* EXPERIMENTAL */ | |
// Testing push and pull grid items. Works only to move grid items, not to move in flow with other grid items | |
/* Add this to a grid item to move left or right | |
@offset: columns to move | |
@of: total number of columns | |
*/ | |
.push(@offset:1; @of:1) { | |
margin-left: (@offset/@of)*100% | |
} | |
.pull(@offset:1; @of:1) { | |
margin-right: (@offset/@of)*100% | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment