wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Make grid generator parameterized instead of using globals

Browse source 
Also makes it possible to opt-out of responsive grid
This commit is contained in:
Adam Wathan 2017-08-04 09:01:34 -04:00
parent dc73e0a578
commit f1e4324c37
2 changed files with 70 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

69
src/generators/grid.less Normal file
View file

@ -0,0 +1,69 @@
.generate-grid-columns(@grid-column-count; @prefix; @i: 1) when (@i <= @grid-column-count) {
.@{prefix}col-@{i} {
flex-basis: 100% * (@i / @grid-column-count);
max-width: 100% * (@i / @grid-column-count);
}
@offset-i: @i - 1;
.@{prefix}offset-@{offset-i} {
margin-left: 100% * (@offset-i / @grid-column-count);
}
.generate-grid-columns(@grid-column-count; @prefix; @i + 1);
}
.generate-responsive-grid(@grid-column-count; @screen; @min-width) {
@prefix: ~"@{screen}\:";
@media (min-width: @min-width) {
.@{prefix}col {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
min-width: 0;
}
.@{prefix}col-first {
order: -1;
}
.@{prefix}col-last {
order: 1;
}
.generate-grid-columns(@grid-column-count; @prefix);
}
}
.generate-responsive-grids(@grid-column-count; @screens; @i: 1) when (@i <= length(@screens)) {
@screen: extract(@screens, @i);
@name: extract(@screen, 1);
@screen-width: extract(@screen, 2);
.generate-responsive-grid(@grid-column-count; @name; @screen-width);
.generate-responsive-grids(@grid-column-count; @screens; @i + 1);
}
.generate-all-grids(@grid-column-count) {
.col-auto {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.col-first {
order: -1;
}
.col-last {
order: 1;
}
.generate-grid-columns(@grid-column-count; ~"");
}
.generate-all-grids(@grid-column-count; none) {
.generate-all-grids(@grid-column-count);
}
.generate-all-grids(@grid-column-count; @screens) when not (@screens = none) {
.generate-all-grids(@grid-column-count);
.generate-responsive-grids(@grid-column-count; @screens);
}

64
src/utilities/grid.less
View file

@ -13,66 +13,4 @@
flex-wrap: wrap;
}
.generate-grid-columns(@prefix; @i: 1) when (@i <= @grid-column-count) {
.@{prefix}col-@{i} {
flex-basis: 100% * (@i / @grid-column-count);
max-width: 100% * (@i / @grid-column-count);
}
@offset-i: @i - 1;
.@{prefix}offset-@{offset-i} {
margin-left: 100% * (@offset-i / @grid-column-count);
}
.generate-grid-columns(@prefix; @i + 1);
}
.generate-responsive-grid(@screen, @min-width) {
@prefix: ~"@{screen}\:";
@media (min-width: @min-width) {
.@{prefix}col {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
min-width: 0;
}
.@{prefix}col-first {
order: -1;
}
.@{prefix}col-last {
order: 1;
}
.generate-grid-columns(@prefix);
}
}
.generate-responsive-grids(@i: 1) when (@i <= length(@screens)) {
@screen: extract(@screens, @i);
@name: extract(@screen, 1);
@screen-width: extract(@screen, 2);
.generate-responsive-grid(@name, @screen-width);
.generate-responsive-grids(@i + 1);
}
.generate-all-grids() {
.col-auto {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.col-first {
order: -1;
}
.col-last {
order: 1;
}
.generate-grid-columns(~"");
.generate-responsive-grids();
}
.generate-all-grids();
.generate-all-grids(@grid-column-count; @screens);