General
mixins
button-color
@mixin button-color($color: $c-black, $color-hover: $c-white, $text-color: $c-white, $text-color-hover: $c-black, $border-color: $c-black, $border-color-hover: $c-black) { ... }Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$color | Button Color | String | $c-black |
$color-hover | Button Hover Color | String | $c-white |
$text-color | Button Text Color | String | $c-white |
$text-color-hover | Button Text Hover Color | String | $c-black |
$border-color | Button Border Color | String | $c-black |
$border-color-hover | Button Border Hover Color | String | $c-black |
Example
.myclass {
@include buttonColor($color, $color-hover, $text-color, $text-color-hover, $border-color, $border-color-hover);
}Links
Author
Lara Latham
functions
maxMQ
@function maxMQ($breakpoint) { ... }Description
Returns a breakpoint value for use in a max media query
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$breakpoint | A REM value of the max media query breakpoint | String | — none |
Returns
String —returns the max media query breakpoint
Example
SCSS usage
.section {
padding: 2rem;
@media (max-width: maxMQ(37.5rem)) {
padding: 1rem;
}
}compiled CSS
.section {
padding: 2rem;
}
@media (max-width: 37.4375rem) {
.section {
padding: 1rem
}
}Author
Lara Latham
variables
c-white
$c-white: #fff;Description
This is the default white color
Type
Color
c-lightGrey
$c-lightGrey: #eee;Description
This is the default grey color
Type
Color
c-black
$c-black: #000;Description
This is the default black color
Type
Color
c-error
$c-error: #c00;Description
This is the default error color
Type
Color
c-valid
$c-valid: green;Description
This is the default valid/success color
Type
Color
c-link
$c-link: blue;Description
This is the default link color
Type
Color
f-headlineFont
$f-headlineFont: serif;Description
This is the font style for headlines
f-bodyFont
$f-bodyFont: sans-serif;Description
This is the font style for body copy
f-iconFont
$f-iconFont: 'Icons';Description
This is the font style for icons
mq-breakpoints
$mq-breakpoints: (
xsmall: 26em,
// 416px / phone @ portrait
small: 30em,
// 480px / phone @ landscape / small tablet (portrait)
medium: 48em,
// 768px / small tablet (landscape) / large tablet (portrait)
large: 64em,
// 1024px / large tablet (landscape) / small desktop
xlarge: 80em,
// 1280px / standard desktop
xxlarge: 100em // 1600px / large desktop,,,,,,,,,,,,,,,,,,,,,,,,,
) !default;Description
Default breakpoints
i-arrowRight
$i-arrowRight: '\f054';Description
Icon for right arrow
i-errorCircle
$i-errorCircle: '\f06a';Description
Icon for error circle
i-close
$i-close: '\f00d';Description
Icon for close
i-check
$i-check: '\f00c';Description
Icon for check
i-lightBulb
$i-lightBulb: '\f0eb';Description
Icon for light bulb
i-phone
$i-phone: '\f095';Description
Icon for phone
i-email
$i-email: '\f0e0';Description
Icon for email