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

Remove "container" concept, remove grid gutters

Browse Source
This commit is contained in:
Adam Wathan 2017-08-02 12:30:40 -04:00
parent a085162cd8
commit ca2b52780c
2 changed files with 12 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/utilities/grid.less
View File

@ -1,56 +1,17 @@
// Use Bootstrap 4 breakpoints as a starting point
@screen-xs: 420px; // Not used for grid, just changing font size for tiny fucking iPhones
@screen-sm: 576px;
@screen-md: 768px;
@screen-lg: 992px;
@screen-xl: 1200px;
@screens:
sm 540px 576px,
md 720px 768px,
lg 960px 992px,
xl 1140px 1200px;
sm 576px,
md 768px,
lg 992px,
xl 1200px;
// From flexboxgrid.com
@gutter-width: 2rem;
@half-gutter-width: @gutter-width * 0.5;
@gutter-compensation: @half-gutter-width * -1;
@outer-margin: @half-gutter-width;
@grid-column-count: 12;
.container-fluid, .container {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: @outer-margin;
padding-left: @outer-margin;
}
.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;
}
.row.reverse {
flex-direction: row-reverse;
}
.col {
box-sizing: border-box;
flex: 0 0 auto;
padding-right: @half-gutter-width;
padding-left: @half-gutter-width;
flex-basis: 100%;
max-width: 100%;
}
.col.reverse {
flex-direction: column-reverse;
}
.generate-grid-columns(@prefix; @i: 1) when (@i <= @grid-column-count) {
@ -67,16 +28,15 @@
.generate-grid-columns(@prefix; @i + 1);
}
.generate-responsive-grid(@screen, @min-width, @container-width) {
.generate-responsive-grid(@screen, @min-width) {
@prefix: ~"@{screen}\:";
@media (min-width: @min-width) {
.container { max-width: @container-width; }
.@{prefix}col-auto {
.@{prefix}col {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
min-width: 0;
}
.@{prefix}col-first {
@ -94,10 +54,9 @@
.generate-responsive-grids(@i: 1) when (@i <= length(@screens)) {
@screen: extract(@screens, @i);
@name: extract(@screen, 1);
@container-width: extract(@screen, 2);
@screen-width: extract(@screen, 3);
@screen-width: extract(@screen, 2);
.generate-responsive-grid(@name, @screen-width, @container-width);
.generate-responsive-grid(@name, @screen-width);
.generate-responsive-grids(@i + 1);
}

6
src/utilities/spacing.less
View File

@ -95,7 +95,7 @@
.generate-responsive-padding-utilities(@i: 1) when (@i <= length(@screens)) {
@screen: extract(@screens, @i);
@name: extract(@screen, 1);
@screen-width: extract(@screen, 3);
@screen-width: extract(@screen, 2);
.generate-screen-padding-utilities(@name, @screen-width);
.generate-responsive-padding-utilities(@i + 1);
@ -162,7 +162,7 @@
.generate-responsive-margin-utilities(@i: 1) when (@i <= length(@screens)) {
@screen: extract(@screens, @i);
@name: extract(@screen, 1);
@screen-width: extract(@screen, 3);
@screen-width: extract(@screen, 2);
.generate-screen-margin-utilities(@name, @screen-width);
@ -235,7 +235,7 @@
.generate-responsive-pull-utilities(@i: 1) when (@i <= length(@screens)) {
@screen: extract(@screens, @i);
@name: extract(@screen, 1);
@screen-width: extract(@screen, 3);
@screen-width: extract(@screen, 2);
.generate-screen-pull-utilities(@name, @screen-width);
.generate-responsive-pull-utilities(@i + 1);