Skip to content

Instantly share code, notes, and snippets.

@jhebb
Last active December 17, 2015 10:39
Show Gist options
  • Save jhebb/5596318 to your computer and use it in GitHub Desktop.
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/
/*********************************************
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