Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
.grid-settings() {
// settings
@grid-columns: 12; // number of columns
@gutter-width: 30px; // gap between columns
// media breakpoints (default: as on bootstrap)
@breakpoints:
~"(min-width: 768px)",
~"(min-width: 992px)",
~"(min-width: 1200px)";
// max-width of containers according breakpoints
@container-maw:
750px,
970px,
1170px;
// names for breakpoint suffixes
@suffixes: xs, sm, md, lg;
// IMPORTANT: suffixes count should be bigger than breakpoints count by 1
// suffixes-count = breakpoints-count + 1
}
@grid-render: {
// calculations
@gutter-compensation: ((@gutter-width * 0.5) * -1);
@half-gutter-width: ((@gutter-width) * 0.5);
@n: length(@breakpoints); // how many breakpoints we have
@m: length(@suffixes); // how many suffixes we have
@first-suffix: extract(@suffixes, 1); // first breakpoint suffix
// MIXINS
// Framework grid generation
//
// Used to generate the correct number of grid classes
// given any value of `@grid-columns`.
.flex-grid-columns(@class) {
.col(@index) { // initial
@item: ~".col-@{class}-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general
@item: ~".col-@{class}-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{list},
.col-@{class}-shrink,
.col-@{class}-min,
.col-@{class} {
box-sizing: border-box;
flex: 0 0 auto;
padding-right: @half-gutter-width;
padding-left: @half-gutter-width;
}
}
.col(1); // kickstart it
}
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
.col-@{class}-@{index} {
flex-basis: percentage((@index / @grid-columns));
max-width: percentage((@index / @grid-columns));
}
}
.calc-grid-column(@index, @class, @type) when (@type = offset) {
.col-@{class}-offset-@{index} {
margin-left: percentage((@index / @grid-columns));
}
}
// Basic looping in LESS
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
.loop-grid-columns((@index - 1), @class, @type); // next iteration
.calc-grid-column(@index, @class, @type);
}
// Create grid for specific class
.make-grid(@class) {
.flex-grid-columns(@class);
.loop-grid-columns(@grid-columns, @class, width);
.loop-grid-columns(@grid-columns, @class, offset);
.col-modifiers(@class);
}
// Create additional row modifiers
.row-modifiers(@class) {
.row {
&-reverse-@{class} {
flex-direction: row-reverse;
}
&-start-@{class} {
justify-content: flex-start;
}
&-center-@{class} {
justify-content: center;
}
&-end-@{class} {
justify-content: flex-end;
}
&-top-@{class} { align-items: flex-start; }
&-middle-@{class} { align-items: center; }
&-bottom-@{class} { align-items: flex-end; }
&-around-@{class} { justify-content: space-around; }
&-between-@{class} { justify-content: space-between; }
}
}
// Create modifiers for columns
.col-modifiers(@class) {
.col {
&-@{class} {
flex-grow: 1;
flex-basis: 0%;
max-width: 100%;
min-width: 0;
}
&-@{class}-shrink {
flex-grow: 0;
flex-basis: auto;
max-width: 100%;
min-width: 0;
}
&-@{class}-min {
flex-grow: 0;
flex-basis: 0%;
max-width: 100%;
min-width: 0;
}
&-first-@{class} { order: -1; }
&-last-@{class} { order: 1; }
&-flex-@{class} {
display: flex;
flex-direction: column;
align-items: stretch;
}
}
}
.grow-modifiers(@class) {
.flex-grow-@{class} {
flex-grow: 1;
}
}
// Create breakpoints
.responsive(@index: @m) when (@index > 1) and (@m = (@n + 1)) {
.responsive((@index - 1)); // next iteration
@current-class: extract(@suffixes, @index);
@current-breakpoint: extract(@breakpoints, (@index - 1));
@media @current-breakpoint {
.container {
max-width: extract(@container-maw, (@index - 1));
}
.row-modifiers(@current-class);
.make-grid(@current-class);
.grow-modifiers(@current-class);
}
}
// end of mixins
// RENDER
// Call setting
.grid-settings();
// Common container
.container {
margin-right: auto;
margin-left: auto;
&-fluid {
margin-right: auto;
margin-left: auto;
padding-right: @half-gutter-width;
padding-left: @half-gutter-width;
}
}
// Common row
.row {
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
margin-right: @gutter-compensation;
margin-left: @gutter-compensation;
&[class*="col-"] {
padding-left: 0;
padding-right: 0;
}
}
// Render modifiers
.row-modifiers(@first-suffix);
// Render default state before first breakpoint
.make-grid(@first-suffix);
// Render default state before first breakpoint
.grow-modifiers(@first-suffix);
// Render mediaqueries with breakpoints
.responsive();
};
@grid-render();