/* ---------------------------------- */ /* ==Grids */ /* ---------------------------------- */ // WARNING : KNACSS grids are flexbox based and only supported by IE10+ // Tuto : http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html // Demo : http://codepen.io/raphaelgoetter/pen/zxBMLW // Usage in vanilla CSS: // -
for an equal fourth columns grid container // -
for an uneven columns grid container // Usage with preprocessors : if you're using LESS, you can config grids variables : // n = number of columns (default = 4) // example : .grid-perso { .grid(12); } // ... or uneven grids : // left = left ratio column (default = 2) / right = right ratio column (default = 1) // example : .grid-perso { .uneven-grid(2, 1); } [class*="@{kna-namespace}grid-"] { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin-left: -@gutter; } [class*="@{kna-namespace}grid-"] > * { flex: 0 0 auto; display: block; /* IE fix */ width: ~'calc(100% * 1 / @{number} - @{gutter})'; margin-left: @gutter; } // LESS mixins for *equal* columns grid container // example : .grid-perso { .grid(12); } .grid(@number:@number, @gutter:@gutter) { & > * { width: ~'calc(100% * 1 / @{number} - @{gutter})'; } & > .@{kna-namespace}flex-item-double { width: ~'calc(100% * 2 / @{number} - @{gutter})'; } @media (min-width: (@tiny-screen + 1)) and (max-width: @small-screen) { & > * { width: ~'calc(100% * 1 / 2 - @{gutter})'; } & > .@{kna-namespace}flex-item-double { width: ~'calc(100% - @{gutter})'; } } @media (max-width: @tiny-screen) { & > * { width: ~'calc(100% - @{gutter})'; } & > .@{kna-namespace}flex-item-double { width: ~'calc(100% - @{gutter})'; } } } // Examples : will be compiled in CSS .@{kna-namespace}grid-2 { .grid(2); } .@{kna-namespace}grid-3 { .grid(3); } .@{kna-namespace}grid-4 { .grid(4); } .@{kna-namespace}grid-5 { .grid(5); } .@{kna-namespace}grid-6 { .grid(6); } .@{kna-namespace}grid-7 { .grid(7); } .@{kna-namespace}grid-8 { .grid(8); } .@{kna-namespace}grid-10 { .grid(10); } .@{kna-namespace}grid-12 { .grid(12); } // LESS mixins for *unequal* columns grid container // example : .grid-perso { .uneven-grid(2, 1); } .uneven-grid(@left:@left, @right:@right, @gutter:@gutter) { & > *:nth-child(odd) { @size: (@left / (@left + @right)) * 100%; width: ~'calc(@{size} - @{gutter})'; } & > *:nth-child(even) { @size: (@right / (@left + @right)) * 100%; width: ~'calc(@{size} - @{gutter})'; } @media (max-width: @tiny-screen) { & > *:nth-child(n) { width: ~'calc(100% - @{gutter})'; } } } // Examples : will be compiled in CSS .@{kna-namespace}grid-2-1 { .uneven-grid(2,1); } .@{kna-namespace}grid-1-2 { .uneven-grid(1,2); } .@{kna-namespace}grid-3-1 { .uneven-grid(3,1); } .@{kna-namespace}grid-1-3 { .uneven-grid(1,3); } .@{kna-namespace}grid-3-2 { .uneven-grid(3,2); } .@{kna-namespace}grid-2-3 { .uneven-grid(2,3); } .@{kna-namespace}grid-4-1 { .uneven-grid(4,1); } .@{kna-namespace}grid-1-4 { .uneven-grid(1,4); }