From ce2518affb23bb3a0f1db88100c5076b5cde43a8 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Tue, 1 Aug 2017 13:30:15 -0400 Subject: [PATCH 1/4] Rename layout to constrain. --- src/utilities.less | 2 +- src/utilities/{layout.less => constrain.less} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename src/utilities/{layout.less => constrain.less} (100%) diff --git a/src/utilities.less b/src/utilities.less index db4374e66..f5cc00e54 100644 --- a/src/utilities.less +++ b/src/utilities.less @@ -2,11 +2,11 @@ @import "utilities/backgrounds"; @import "utilities/borders"; +@import "utilities/constrain"; @import "utilities/display"; @import "utilities/flex"; @import "utilities/grid"; @import "utilities/images"; -@import "utilities/layout"; @import "utilities/misc"; @import "utilities/position"; @import "utilities/spacing"; diff --git a/src/utilities/layout.less b/src/utilities/constrain.less similarity index 100% rename from src/utilities/layout.less rename to src/utilities/constrain.less From 568abc820dfaa4ef50660b8e828f20800d2853f2 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Tue, 1 Aug 2017 14:18:53 -0400 Subject: [PATCH 2/4] Add more constrain helpers, and remove responsive versions. --- src/utilities/constrain.less | 24 +++++++++--------------- 1 file changed, 9 insertions(+), 15 deletions(-) diff --git a/src/utilities/constrain.less b/src/utilities/constrain.less index 30b564d8c..593e687d0 100644 --- a/src/utilities/constrain.less +++ b/src/utilities/constrain.less @@ -1,15 +1,9 @@ -.constrain-xs { max-width: 22rem; flex-basis: 22rem; } -.constrain-sm { max-width: 26rem; flex-basis: 26rem; } -.constrain-md { max-width: 32rem; flex-basis: 32rem; } -.constrain-lg { max-width: 40rem; flex-basis: 40rem; } -.constrain-xl { max-width: 48rem; flex-basis: 48rem; } -.constrain-xxl { max-width: 52rem; flex-basis: 52rem; } - -.responsive({ - &constrain-xs { .constrain-xs; } - &constrain-sm { .constrain-sm; } - &constrain-md { .constrain-md; } - &constrain-lg { .constrain-lg; } - &constrain-xl { .constrain-xl; } - &constrain-xxl { .constrain-xxl; } -}); +.constrain-xs { max-width: 20rem; flex-basis: 20rem; } +.constrain-sm { max-width: 30rem; flex-basis: 30rem; } +.constrain-md { max-width: 40rem; flex-basis: 40rem; } +.constrain-lg { max-width: 50rem; flex-basis: 50rem; } +.constrain-xl { max-width: 60rem; flex-basis: 60rem; } +.constrain-2xl { max-width: 70rem; flex-basis: 70rem; } +.constrain-3xl { max-width: 80rem; flex-basis: 80rem; } +.constrain-4xl { max-width: 90rem; flex-basis: 90rem; } +.constrain-5xl { max-width: 100rem; flex-basis: 100rem; } From b0717cfd7106b005e6f4a691b4863bf30d48ceb0 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Tue, 1 Aug 2017 14:59:37 -0400 Subject: [PATCH 3/4] Add responsive constrain helpers back. --- src/utilities/constrain.less | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/utilities/constrain.less b/src/utilities/constrain.less index 593e687d0..6a19b9d94 100644 --- a/src/utilities/constrain.less +++ b/src/utilities/constrain.less @@ -7,3 +7,15 @@ .constrain-3xl { max-width: 80rem; flex-basis: 80rem; } .constrain-4xl { max-width: 90rem; flex-basis: 90rem; } .constrain-5xl { max-width: 100rem; flex-basis: 100rem; } + +.responsive({ + &constrain-xs { .constrain-xs; } + &constrain-sm { .constrain-sm; } + &constrain-md { .constrain-md; } + &constrain-lg { .constrain-lg; } + &constrain-xl { .constrain-xl; } + &constrain-2xl { .constrain-2xl; } + &constrain-3xl { .constrain-3xl; } + &constrain-4xl { .constrain-4xl; } + &constrain-5xl { .constrain-5xl; } +}); From 6cfa02606a5ee81dc63702f23fe36c42ea76b27a Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Tue, 1 Aug 2017 15:03:12 -0400 Subject: [PATCH 4/4] Add constrain variables. --- src/utilities/constrain.less | 28 +++++++++++++++++++--------- 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/src/utilities/constrain.less b/src/utilities/constrain.less index 6a19b9d94..b6874ceba 100644 --- a/src/utilities/constrain.less +++ b/src/utilities/constrain.less @@ -1,12 +1,22 @@ -.constrain-xs { max-width: 20rem; flex-basis: 20rem; } -.constrain-sm { max-width: 30rem; flex-basis: 30rem; } -.constrain-md { max-width: 40rem; flex-basis: 40rem; } -.constrain-lg { max-width: 50rem; flex-basis: 50rem; } -.constrain-xl { max-width: 60rem; flex-basis: 60rem; } -.constrain-2xl { max-width: 70rem; flex-basis: 70rem; } -.constrain-3xl { max-width: 80rem; flex-basis: 80rem; } -.constrain-4xl { max-width: 90rem; flex-basis: 90rem; } -.constrain-5xl { max-width: 100rem; flex-basis: 100rem; } +@constrain-xs: 20rem; +@constrain-sm: 30rem; +@constrain-md: 40rem; +@constrain-lg: 50rem; +@constrain-xl: 60rem; +@constrain-2xl: 70rem; +@constrain-3xl: 80rem; +@constrain-4xl: 90rem; +@constrain-5xl: 100rem; + +.constrain-xs { max-width: @constrain-xs; flex-basis: @constrain-xs; } +.constrain-sm { max-width: @constrain-sm; flex-basis: @constrain-sm; } +.constrain-md { max-width: @constrain-md; flex-basis: @constrain-md; } +.constrain-lg { max-width: @constrain-lg; flex-basis: @constrain-lg; } +.constrain-xl { max-width: @constrain-xl; flex-basis: @constrain-xl; } +.constrain-2xl { max-width: @constrain-2xl; flex-basis: @constrain-2xl; } +.constrain-3xl { max-width: @constrain-3xl; flex-basis: @constrain-3xl; } +.constrain-4xl { max-width: @constrain-4xl; flex-basis: @constrain-4xl; } +.constrain-5xl { max-width: @constrain-5xl; flex-basis: @constrain-5xl; } .responsive({ &constrain-xs { .constrain-xs; }