Permalink
Cannot retrieve contributors at this time
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?
flxgrid.css/flxgrid.less
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
234 lines (186 sloc)
5.97 KB
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
.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(); |