General
functions
chevron-data-uri
@function chevron-data-uri($direction, $width: 16px, $height: 10px, $stroke: 1.5px, $color: black, $round: false) { ... }Description
Generate URL-encoded chevron SVG and return as CSS url() value
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$direction | Direction of chevron | Up or Down or Left or Right | — none |
$width | Width of chevron (px) | Number | 16px |
$height | Height of chevron (px) | Number | 10px |
$stroke | Stroke width of chevron (px) | Number | 1.5px |
$color | Color of chevron | Color | black |
$round | Round stroke linecap and linejoin | Boolean | false |
Returns
String —URL-encoded SVG data uri
Example
.myclass {
background-image: chevron-data-uri(right);
background-repeat: no-repeat;
background-position: left center;
}
.myclass {
background: chevron-data-uri(right) no-repeat left center;
}Throws
chevron-data-uri: #{$direction} is not a valid direction
Author
John Hildenbiddle (@jhildenbiddle)
svg-data-uri
@function svg-data-uri($svg) { ... }Description
URL-encode SVG markup for use as inline CSS content/uri
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$svg | SVG markup to encode | String | — none |
Returns
String —URL-encoded SVG data uri
Links
Author
Jakob Eriksen
triangle-data-uri
@function triangle-data-uri($direction, $width: 16px, $height: 16px, $color: black) { ... }Description
Generates a triangle SVG element and applies it as a background image.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$direction | Direction of triangle | Up or Down or Left or Right | — none |
$width | Width of triangle (px) | Length | 16px |
$height | Height of triangle (px) | Length | 16px |
$color | Color of triangle | Color | black |
Returns
String —URL-encoded SVG data uri
Example
.myclass {
background-image: triangle-data-uri(right);
background-repeat: no-repeat;
background-position: left center;
}
.myclass {
background: triangle-data-uri(right) no-repeat left center;
}Throws
triangle-data-uri: #{$direction} is not a valid direction
Author
John Hildenbiddle (@jhildenbiddle)
mixins
fluid-prop
@mixin fluid-prop($fluid, $min, $max) { ... }Description
Fluid viewport-based property values with min/max values
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$fluid | Viewport-based size (vh|vw) | Number | — none |
$min | Minimum property value (px|rem) | Number | — none |
$max | Maximum property value (px|rem) (optional) | Number | — none |
Example
px
.myclass {
@include fluid-prop(font-size, 5vw, 16px, 48px);
}rem
.myclass {
@include fluid-prop(font-size, 5vw, 1rem, 3rem);
}Links
- Viewport Sized Typography with Minimum and Maximum Sizes (css-tricks.com)
- Concept visualizer (codepen.io)
Authors
John Hildenbiddle
Eduardo Boucas (@eduardoboucas) - initial concept (see link)
mq
@mixin mq($mq-list, $mq-map) { ... }Description
Generate media query statement based on breakpoint map key/values
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$mq-list | The breakpoint feature and/or name in $mq-map | List | — none |
$mq-map | The map containing breakpoint name:value pairs. | String | — none |
Example
/* Defaults */
$breakpoints: (
xsmall : 26em,
small : 30em,
medium : 48em,
large : 64em,
xlarge : 80em,
xxlarge: 100em
) !default;
body {
color: black;
/* Defaults to min-width query */
@include mq(small) {
color: red;
}
/* Specifying query feature and value as a list */
@include mq(max-width medium) {
color: green;
}
/* Nested mq() instances used to create multi-condition queries */
@include mq(small) {
@include mq(landscape) {
color: red;
}
@include mq(portrait) {
color: blue;
}
}
}Requires
- [variable]
mq-breakpoints
Author
John Hildenbiddle (@jhildenbiddle)
triangle
@mixin triangle($direction: down, $width: 16px, $height: 16px, $color: currentColor) { ... }Description
Converts an element to an up, down, left or right triangle. This method of rendering a triangle allows CSS animations and transitions to be applied to triangle properties.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$direction | Direction of triangle | Up or Down or Left or Right | down |
$width | Width of triangle | Length | 16px |
$height | Height of triangle | Length | 16px |
$color | Color of triangle | Color | currentColor |
Author
John Hildenbiddle (@jhildenbiddle)
variables
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 breakpoint map for mq() mixin
Used by
- [mixin]
mq