Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
235 lines (186 sloc) 5.97 KB
.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();