From 69446c765aab42fc61dd58005434ed156b8719de Mon Sep 17 00:00:00 2001
From: GoOz <gooz@foojin.com>
Date: Tue, 21 May 2019 11:02:14 +0200
Subject: [PATCH] feat: Add Standard breakpoints for utility classes
BREAKING CHANGES:
Responsive utility classes `foo-tt`, `foo-l`, `foo-xl` have been removed.
Also `tiny` breakpoint went from 543px to 480px
---
stylus/settings/breakpoints.styl | 14 ++++++--------
1 file changed, 6 insertions(+), 8 deletions(-)
diff --git a/stylus/settings/breakpoints.styl b/stylus/settings/breakpoints.styl
index 5aad44472b..449844e0ba 100644
--- a/stylus/settings/breakpoints.styl
+++ b/stylus/settings/breakpoints.styl
@@ -8,21 +8,18 @@
// variables
BP-teeny = 375
-BP-tiny = 543
+BP-tiny = 480
BP-small = 768
BP-medium = 1023
BP-large = 1200
BP-extra-large = 1439
-// Breakpoints collection for utilities
+// Standard breakpoints collection for utilities
breakpoints = {
'none': '',
- 'teeny': 'tt',
'tiny': 't',
'small': 's',
'medium': 'm',
- 'large': 'l',
- 'extra-large': 'xl'
}
/*
@@ -32,7 +29,8 @@ breakpoints = {
the desired a `max-width` media-query. Use the direction argument
to set it to `min`.
- tiny - 543px
+ teeny - 375px
+ tiny - 480px
small - 768px
medium - 1023px
large - 1200px
@@ -63,8 +61,8 @@ teeny-screen(direction='max')
/*
tiny-screen()
- tiny-screen() Refers to (max-width: 543px)
- tiny-screen('min') Refers to (min-width: 544px)
+ tiny-screen() Refers to (max-width: 480px)
+ tiny-screen('min') Refers to (min-width: 481px)
Weight: -5