From ad362729060e40de08bea7188412c51981b4c52e Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 23 Aug 2017 15:56:21 -0400 Subject: [PATCH 1/7] Replace grid with percent width helpers --- docs/source/_layouts/master.blade.php | 6 +- docs/source/grid.md | 170 ++++++++++++++++++++++++++ src/generators.less | 1 - src/generators/grid.less | 4 +- src/generators/spacing-margin.less | 4 + src/utilities.less | 8 +- src/utilities/grid.less | 16 --- src/utilities/sizing.less | 11 ++ 8 files changed, 197 insertions(+), 23 deletions(-) delete mode 100644 src/utilities/grid.less 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; From a8ce85ed1b77cca936440ce3aaa8078f3dc634d0 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 23 Aug 2017 16:00:13 -0400 Subject: [PATCH 2/7] Add flex-none helper --- docs/source/grid.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/source/grid.md b/docs/source/grid.md index dfbb2d6a6..af83c48db 100644 --- a/docs/source/grid.md +++ b/docs/source/grid.md @@ -69,7 +69,7 @@ Columns can be different widths: Rows can overflow and wrap: -
+
.md:w-1/3 @@ -132,29 +132,29 @@ Column widths can be automatic: 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.md:flex-none
-
+
- .flex-fill.md:w-1/6 + .flex-fill.md:w-1/6.md:flex-none
-
+
- .flex-fill.md:w-1/6 + .flex-fill.md:w-1/6.md:flex-none
-
+
- .flex-fill.md:w-1/6 + .flex-fill.md:w-1/6.md:flex-none
-
+
- .flex-fill.md:w-1/6 + .flex-fill.md:w-1/6.md:flex-none
From 53bec217a830f9621be5d2b693536eac79917a28 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 23 Aug 2017 16:03:39 -0400 Subject: [PATCH 3/7] Remove grid generator file --- src/generators/grid.less | 70 ---------------------------------------- 1 file changed, 70 deletions(-) delete mode 100644 src/generators/grid.less diff --git a/src/generators/grid.less b/src/generators/grid.less deleted file mode 100644 index 4d202b38e..000000000 --- a/src/generators/grid.less +++ /dev/null @@ -1,70 +0,0 @@ -.generate-grid-columns(@grid-column-count; @prefix; @i: 1) when (@i <= @grid-column-count) { - .@{prefix}col-@{i} { - flex: none; - 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 { - flex-grow: 1; - flex-basis: 0; - max-width: 100%; - min-width: 0; - } - .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); -} From df6f6278056e36eb2b1ec26ebf53510cfe780efc Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 23 Aug 2017 16:11:18 -0400 Subject: [PATCH 4/7] Make crappy docs example a little easier to see --- docs/source/grid.md | 50 ++++++++++++++++++++++++++++++++++----------- 1 file changed, 38 insertions(+), 12 deletions(-) diff --git a/docs/source/grid.md b/docs/source/grid.md index af83c48db..4e3045d9f 100644 --- a/docs/source/grid.md +++ b/docs/source/grid.md @@ -133,28 +133,48 @@ Fixed width columns are still respected even if a smaller screen has auto column
-
- .flex-fill.md:w-1/6.md:flex-none +
+
+
.flex-fill
+
.md:w-1/6
+
.md:flex-none
+
-
- .flex-fill.md:w-1/6.md:flex-none +
+
+
.flex-fill
+
.md:w-1/6
+
.md:flex-none
+
-
- .flex-fill.md:w-1/6.md:flex-none +
+
+
.flex-fill
+
.md:w-1/6
+
.md:flex-none
+
-
- .flex-fill.md:w-1/6.md:flex-none +
+
+
.flex-fill
+
.md:w-1/6
+
.md:flex-none
+
-
- .flex-fill.md:w-1/6.md:flex-none +
+
+
.flex-fill
+
.md:w-1/6
+
.md:flex-none
+
@@ -165,12 +185,18 @@ Use margin auto utilities to accomplish offsets:
- .md:w-1/3.md:ml-auto +
+
.md:w-1/3
+
.md:ml-auto
+
- .md:w-1/6.md:mr-auto +
+
.md:w-1/6
+
.md:mr-auto
+
From d662678ae577451788f395fc861a7f347d2d1864 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 23 Aug 2017 19:25:49 -0400 Subject: [PATCH 5/7] Fix some stuff with things not wrapping right --- docs/source/grid.md | 248 +++++++++++++++++++++++++------------------- 1 file changed, 143 insertions(+), 105 deletions(-) diff --git a/docs/source/grid.md b/docs/source/grid.md index 4e3045d9f..3ca07b146 100644 --- a/docs/source/grid.md +++ b/docs/source/grid.md @@ -7,40 +7,46 @@ title: "Grid" Basic grid example: -
-
-
- .md:w-1/3 +
+
.flex.flex-wrap
+
+
+
+ .md:w-1/3 +
-
-
-
- .md:w-1/3 +
+
+ .md:w-1/3 +
-
-
-
- .md:w-1/3 +
+
+ .md:w-1/3 +
Columns don't need to fill a row: -
-
-
- .md:w-1/4 +
+
.flex
+
+
+
+ .md:w-1/4 +
-
-
-
- .md:w-1/4 +
+
+ .md:w-1/4 +
-
-
-
- .md:w-1/4 +
+
+ .md:w-1/4 +
@@ -48,20 +54,23 @@ Columns don't need to fill a row: Columns can be different widths: -
-
-
- .md:w-1/4 +
+
.flex
+
+
+
+ .md:w-1/4 +
-
-
-
- .md:w-1/2 +
+
+ .md:w-1/2 +
-
-
-
- .md:w-1/4 +
+
+ .md:w-1/4 +
@@ -69,30 +78,65 @@ Columns can be different widths: Rows can overflow and wrap: -
-
-
- .md:w-1/3 +
+
.flex.flex-wrap
+
+
+
+ .md:w-1/3 +
+
+
+
+ .md:w-1/3 +
+
+
+
+ .md:w-1/3 +
+
+
+
+ .md:w-1/3 +
+
+
+
+ .md:w-1/3 +
-
-
- .md:w-1/3 +
+ +Columns can have gutters: + +
+
.flex.pull-x-4
+
+
+
+
.flex-none
+
.w-full
+
.md:w-1/3
+
.px-4
+
-
-
-
- .md:w-1/3 +
+
+
.flex-none
+
.w-full
+
.md:w-1/3
+
.px-4
+
-
-
-
- .md:w-1/3 -
-
-
-
- .md:w-1/3 +
+
+
.flex-none
+
.w-full
+
.md:w-1/3
+
.px-4
+
@@ -100,77 +144,72 @@ Rows can overflow and wrap: Column widths can be automatic: -
-
-
- .md:flex-fill +
+
.flex
+
+
+
+ .w-1/4.md:flex-fill +
-
-
-
- .md:flex-fill +
+
+ .w-1/4.md:flex-fill +
-
-
-
- .md:flex-fill +
+
+ .w-1/4.md:flex-fill +
-
-
-
- .md:flex-fill +
+
+ .w-1/4.md:flex-fill +
-
-
-
- .md:flex-fill +
+
+ .w-1/4.md:flex-fill +
- Fixed width columns are still respected even if a smaller screen has auto column widths: -
-
-
-
+
+
.flex
+
+
+
.flex-fill
.md:w-1/6
.md:flex-none
-
-
-
-
+
+
.flex-fill
.md:w-1/6
.md:flex-none
-
-
-
-
+
+
.flex-fill
.md:w-1/6
.md:flex-none
-
-
-
-
+
+
.flex-fill
.md:w-1/6
.md:flex-none
-
-
-
-
+
+
.flex-fill
.md:w-1/6
.md:flex-none
@@ -182,18 +221,17 @@ Fixed width columns are still respected even if a smaller screen has auto column Use margin auto utilities to accomplish offsets: -
-
-
-
+
+
.flex
+
+
+
.md:w-1/3
.md:ml-auto
-
-
-
-
+
+
.md:w-1/6
.md:mr-auto
From 61238ef5822083e9f20b360593f75b6bc992be32 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 23 Aug 2017 19:30:21 -0400 Subject: [PATCH 6/7] Fix sidebar and content area not wrapping --- docs/source/_layouts/master.blade.php | 6 ++--- docs/source/grid.md | 32 +++++++++++++-------------- 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php index 54f691edc..6ee1d0884 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 3ca07b146..332f54e31 100644 --- a/docs/source/grid.md +++ b/docs/source/grid.md @@ -7,8 +7,8 @@ title: "Grid" Basic grid example: -
-
.flex.flex-wrap
+
+
.flex.flex-wrap
@@ -30,8 +30,8 @@ Basic grid example: Columns don't need to fill a row: -
-
.flex
+
+
.flex
@@ -54,8 +54,8 @@ Columns don't need to fill a row: Columns can be different widths: -
-
.flex
+
+
.flex
@@ -78,8 +78,8 @@ Columns can be different widths: Rows can overflow and wrap: -
-
.flex.flex-wrap
+
+
.flex.flex-wrap
@@ -111,8 +111,8 @@ Rows can overflow and wrap: Columns can have gutters: -
-
.flex.pull-x-4
+
+
.flex.pull-x-4
@@ -144,8 +144,8 @@ Columns can have gutters: Column widths can be automatic: -
-
.flex
+
+
.flex
@@ -177,8 +177,8 @@ Column widths can be automatic: Fixed width columns are still respected even if a smaller screen has auto column widths: -
-
.flex
+
+
.flex
@@ -221,8 +221,8 @@ Fixed width columns are still respected even if a smaller screen has auto column Use margin auto utilities to accomplish offsets: -
-
.flex
+
+
.flex
From 50003d8d0cfc2311c372fa3c9d647d36bcebdff0 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 23 Aug 2017 20:05:01 -0400 Subject: [PATCH 7/7] Remove unnecessary flex none --- docs/source/grid.md | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/docs/source/grid.md b/docs/source/grid.md index 332f54e31..8852fbd5f 100644 --- a/docs/source/grid.md +++ b/docs/source/grid.md @@ -31,7 +31,7 @@ Basic grid example: Columns don't need to fill a row:
-
.flex
+
.flex.flex-wrap
@@ -55,7 +55,7 @@ Columns don't need to fill a row: Columns can be different widths:
-
.flex
+
.flex.flex-wrap
@@ -112,27 +112,24 @@ Rows can overflow and wrap: Columns can have gutters:
-
.flex.pull-x-4
+
.flex.flex-wrap.pull-x-4
-
+
-
.flex-none
.w-full
.md:w-1/3
.px-4
-
+
-
.flex-none
.w-full
.md:w-1/3
.px-4
-
+
-
.flex-none
.w-full
.md:w-1/3
.px-4
@@ -145,7 +142,7 @@ Columns can have gutters: Column widths can be automatic:
-
.flex
+
.flex.flex-wrap
@@ -178,7 +175,7 @@ Column widths can be automatic: Fixed width columns are still respected even if a smaller screen has auto column widths:
-
.flex
+
.flex.flex-wrap
@@ -222,7 +219,7 @@ Fixed width columns are still respected even if a smaller screen has auto column Use margin auto utilities to accomplish offsets:
-
.flex
+
.flex.flex-wrap