Skip to content

Instantly share code, notes, and snippets.

@amatiasq
Last active February 15, 2021 22:18
Show Gist options
  • Save amatiasq/5320587 to your computer and use it in GitHub Desktop.
Save amatiasq/5320587 to your computer and use it in GitHub Desktop.
A mixin to create a N * N css classes grid.
.grid_column(@prefix; @index; @base) {
@fullclass: ~'.grid-@{prefix}col@{index}';
@{fullclass} { left: @base * @index; }
}
.grid_row(@prefix; @index; @base) {
@fullclass: ~'.grid-@{prefix}row@{index}';
@{fullclass} { top: @base * @index; }
}
.grid_width(@prefix; @index; @base) {
@fullclass: ~'.grid-@{prefix}hspan@{index}';
@{fullclass} { width: @base * @index; }
}
.grid_height(@prefix; @index; @base) {
@fullclass: ~'.grid-@{prefix}vspan@{index}';
@{fullclass} { height: @base * @index; }
}
.grid_all(@prefix; @index; @hBase; @vBase) when (@index > 0) {
.grid_column(@prefix; @index; @hBase);
.grid_row (@prefix; @index; @vBase);
.grid_width (@prefix; @index; @hBase);
.grid_height(@prefix; @index; @vBase);
.grid_all(@prefix; @index - 1; @hBase; @vBase);
}
.grid_first(@prefix; @count; @width; @height) {
.grid_all(@prefix; @count; @width / @count; @height / @count);
}
.grid(@count; @width; @height; @prefix) {
.grid_first('@{prefix}-'; @count; @width; @height);
}
.grid(@count; @width; @height) {
.grid_first(''; @count; @width; @height);
}
/*
It divides available space into specified rows/columns and creates classes to locate the elements with position: absolute. Created classes are:
.grid-col{N}
.grid-row{N}
.grid-hspan{N}
.grid-vspan{N}
where {N} is the number of row/column the element must fill / where the element show be located
Optionally a last "prefix" argument can be passed, this will create more specific classes:
.grid-{PREFIX}-col{N}
.grid-{PREFIX}-row{N}
.grid-{PREFIX}-hspan{N}
.grid-{PREFIX}-vspan{N}
For example
.grid(3; 750px; 600px);
Will generate this
*/
.grid-hspan3 {
width: 150px;
}
.grid-vspan3 {
height: 187.5px;
}
.grid-col2 {
right: 100px;
}
.grid-row2 {
top: 125px;
}
.grid-hspan2 {
width: 100px;
}
.grid-vspan2 {
height: 125px;
}
.grid-col1 {
right: 50px;
}
.grid-row1 {
top: 62.5px;
}
.grid-hspan1 {
width: 50px;
}
.grid-vspan1 {
height: 62.5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment