diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php index bea37ce58..54f691edc 100644 --- a/docs/source/_layouts/master.blade.php +++ b/docs/source/_layouts/master.blade.php @@ -27,8 +27,8 @@
-
-
+
+
-
+
@yield('body')
diff --git a/docs/source/grid.md b/docs/source/grid.md index aa72b57f6..dfbb2d6a6 100644 --- a/docs/source/grid.md +++ b/docs/source/grid.md @@ -4,3 +4,173 @@ title: "Grid" --- # Grid + +Basic grid example: + +
+
+
+ .md:w-1/3 +
+
+
+
+ .md:w-1/3 +
+
+
+
+ .md:w-1/3 +
+
+
+ +Columns don't need to fill a row: + +
+
+
+ .md:w-1/4 +
+
+
+
+ .md:w-1/4 +
+
+
+
+ .md:w-1/4 +
+
+
+ + +Columns can be different widths: + +
+
+
+ .md:w-1/4 +
+
+
+
+ .md:w-1/2 +
+
+
+
+ .md:w-1/4 +
+
+
+ + +Rows can overflow and wrap: + +
+
+
+ .md:w-1/3 +
+
+
+
+ .md:w-1/3 +
+
+
+
+ .md:w-1/3 +
+
+
+
+ .md:w-1/3 +
+
+
+
+ .md:w-1/3 +
+
+
+ + +Column widths can be automatic: + +
+
+
+ .md:flex-fill +
+
+
+
+ .md:flex-fill +
+
+
+
+ .md:flex-fill +
+
+
+
+ .md:flex-fill +
+
+
+
+ .md:flex-fill +
+
+
+ + +Fixed width columns are still respected even if a smaller screen has auto column widths: + +
+
+
+ .flex-fill.md:w-1/6 +
+
+
+
+ .flex-fill.md:w-1/6 +
+
+
+
+ .flex-fill.md:w-1/6 +
+
+
+
+ .flex-fill.md:w-1/6 +
+
+
+
+ .flex-fill.md:w-1/6 +
+
+
+ + +Use margin auto utilities to accomplish offsets: + +
+
+
+ .md:w-1/3.md:ml-auto +
+
+
+
+ .md:w-1/6.md:mr-auto +
+
+
diff --git a/src/generators.less b/src/generators.less index ea5723d77..b57d9be97 100644 --- a/src/generators.less +++ b/src/generators.less @@ -10,7 +10,6 @@ @import "generators/border-radius"; @import "generators/border-widths"; @import "generators/constrain"; -@import "generators/grid"; @import "generators/shadows"; @import "generators/sizing"; @import "generators/spacing-padding"; diff --git a/src/generators/grid.less b/src/generators/grid.less index 0c55c0e3e..4d202b38e 100644 --- a/src/generators/grid.less +++ b/src/generators/grid.less @@ -1,7 +1,7 @@ .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); + flex: none; + width: 100% * (@i / @grid-column-count); } @offset-i: @i - 1; diff --git a/src/generators/spacing-margin.less b/src/generators/spacing-margin.less index b6483a6da..fc9e03048 100644 --- a/src/generators/spacing-margin.less +++ b/src/generators/spacing-margin.less @@ -61,6 +61,8 @@ @media (min-width: @screen-width) { @prefix: ~"@{name}\:"; + .@{prefix}ml-auto { margin-left: auto; } + .@{prefix}mr-auto { margin-right: auto; } .@{prefix}mx-auto { margin-left: auto; margin-right: auto; } .generate-screen-margin-utilities(@margin-scale; @name); } @@ -69,6 +71,8 @@ } .define-margin-utilities(@margin-scale) { + .ml-auto { margin-left: auto; } + .mr-auto { margin-right: auto; } .mx-auto { margin-left: auto; margin-right: auto; } .generate-margin-utilities(@margin-scale); } diff --git a/src/utilities.less b/src/utilities.less index 728d608e4..8b9c82fe1 100644 --- a/src/utilities.less +++ b/src/utilities.less @@ -7,7 +7,6 @@ @import "utilities/constrain"; @import "utilities/display"; @import "utilities/flex"; -@import "utilities/grid"; @import "utilities/images"; @import "utilities/misc"; @import "utilities/overflow"; @@ -18,3 +17,10 @@ @import "utilities/text"; @import "utilities/vue"; @import "utilities/z-index"; + +@screens: + sm 576px, + md 768px, + lg 992px, + xl 1200px, +; diff --git a/src/utilities/grid.less b/src/utilities/grid.less deleted file mode 100644 index 723bea4a1..000000000 --- a/src/utilities/grid.less +++ /dev/null @@ -1,16 +0,0 @@ -@screens: - sm 576px, - md 768px, - lg 992px, - xl 1200px; - -@grid-column-count: 12; - -.row { - box-sizing: border-box; - display: flex; - flex-direction: row; - flex-wrap: wrap; -} - -.generate-all-grids(@grid-column-count; @screens); diff --git a/src/utilities/sizing.less b/src/utilities/sizing.less index 76634badd..7d242759a 100644 --- a/src/utilities/sizing.less +++ b/src/utilities/sizing.less @@ -16,6 +16,17 @@ '96' 24rem, '128' 32rem, 'full' 100%, + '1\/2' 50%, + '1\/3' (100% / 3), + '2\/3' (100% / 3 * 2), + '1\/4' 25%, + '3\/4' 75%, + '1\/5' 20%, + '2\/5' 40%, + '3\/5' 60%, + '4\/5' 80%, + '1\/6' (100% / 6), + '5\/6' (100% / 6 * 5), ; @width-scale: @sizing-scale;