-
hsl(352, 92%, 38%)
$c-red
-
hsl(195, 83%, 84%)
$c-blue
-
hsl(33, 93%, 54%)
$c-orange
-
hsla(33, 93%, 54%, .85)
$c-orange-transparent
-
white
$c-white
-
hsl(0, 0%, 95%)
$c-gray--lightest
-
hsla(0, 0%, 95%, .1)
$c-gray--lightest--transparent
-
hsl(0, 0%, 80%)
$c-gray--lighter
-
hsla(0, 0%, 80%, .2)
$c-gray--lighter--transparent
-
hsl(0, 0%, 60%)
$c-gray--light
-
hsl(0, 0%, 48%)
$c-gray
-
hsl(0, 0%, 40%)
$c-gray--dark
-
hsl(0, 0%, 25%)
$c-gray--darker
-
hsla(0, 0%, 20%, .75)
$c-gray--darker--transparent
-
hsl(0, 0%, 16.1%)
$c-gray--darkest
-
hsla(0, 0%, 16.1%, .85)
$c-gray--darkest--transparent
-
black
$c-black
To add to these items, use Sass variables that start with $c-
in source/_patterns/00-base/01-colors/_color-vars.scss
Opacity (Hover to see effect)
Move (Hover to see effect)
Values:
$trans-opacity__time: 0.3s;
$trans-opacity__function: ease-in;
$trans-opacity: $trans-opacity__time $trans-opacity__function;
convenience variable for using both$trans-move__time: 0.3s;
$trans-move__function: ease-in;
$trans-move: $trans-opacity__time $trans-move__function;
convenience variable for using both
-
$bp--xsmall:
380px -
$bp--small:
500px -
$bp--medium:
640px -
$bp--large:
768px -
$bp--xlarge:
1024px -
$bp--xxlarge:
1250px -
$bp--xxxlarge:
1600px
- iPhone Portrait: 320px
- Galaxy Nexus Portrait: 360px
- iPhone 6 Portrait: 375px
- iPhone 6 Plus Portrait: 414px
- Galaxy Note 3 Portrait: 540px
- iPhone Landscape: 568px
- Google Nexus 7 Portrait: 604px
- Galaxy Nexus Landscape: 640px
- iPhone 6 Landscape: 667px
- iPhone 6 Plus Landscape: 738px
- iPad Portrait: 768px
- Galaxy Note 3 Landscape: 960px
- Google Nexus 7 Landscape: 966px
- iPad Landscape: 1024px
- 11" MacBook Air: 1366px
- 13" MacBook Air: 1440px
- 21.5" iMac: 1980px
To add to these items, use Sass variables that start with $bp--
in source/_patterns/00-base/breakpoints/_breakpoints.scss
5px :
$spacing--sm
20px :
$spacing--l
To add to these items, use Sass variables that start with $spacing--
in source/_patterns/00-base/spacing/_spacing.scss