archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #50 from adamwathan/parameterized-grid

Browse Source 
Make grid generator parameterized instead of using globals
This commit is contained in:
Adam Wathan 2017-08-04 11:20:55 -04:00 committed by GitHub
commit feb451b991
3 changed files with 71 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/generators.less
View File

@ -5,6 +5,7 @@
@import "generators/backgrounds";
@import "generators/border-colors";
@import "generators/constrain";
@import "generators/grid";
@import "generators/text-colors";
@import "generators/text-weights";
@import "generators/text-sizes";

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);