em.oji
Emoji are ideograms and smileys used in electronic messages and web pages. Emoji exist in various genres.
SassDoc API reference
Generated from /// comments in the SCSS source.
Effects
Filters
.filter.aden
Aden is famous for its retro, pastel-y look, which works great if you need to soften harsh lights.
.filter.amaro
This filter adds more light to the center of the photo and darkens around the edges.
.filter.brannan
Brannan adds high contrast and exposure to your photo, giving it some stylish metallic tint. This photo effect is soft and washed out, like a photo from old granny’s album.
.filter.brooklyn
Brooklyn brightens up your image and boosts its yellow tones. Depending on the image, it can give it an ethereal look.
.filter.chessboard
Chessboard effect - black and white geometric checkered pattern. Mostly best for backgrounds.
.filter.clarendon
Clarendon filter will brighten the highlights found in your photos, while also making the shadows a bit bolder.
.filter.earlybird
Earlybird to get a retro “Polaroid” feel with soft faded colors and a hint of yellow.
.filter.gingham
Gingham muddy highlights, brightness, a slight haze and a subtle warm up of the tones by carefully applying red and magenta to selected parts of the image.
.filter.hudson
Hudson emphasizes light in your image and gives your photos a bluish, colder feel.
.filter.inkwell
Inkwell adds high contrast and also makes your photos black and white.
.filter.seventyseven
1977 effect. As the name suggests, this filter gives you a nostalgic 70’s feel by making photos brighter as well as faded.
Other
a11y-card-link
More accessible card linking.
Parameters
link{string} — The link element's selector.at-root{boolean} — Whether to use @at-root.
Output: The a11y card link mixin.
breakpoint
Return a media query for a breakpoint based on min-width.
Parameters
breakpoint{string} — The breakpoint name.logic{string} — The logic operator.
Output: The media query.
btn-focus-helper
Generate a button focus ring.
Parameters
type{string} — The type of the button for the color value.focus{boolean} — If the focus ring should be generated.
Output: The generated focus ring.
btn-variant
Generate a button variant.
Parameters
type{string} — The type of the button for the color value.focus{boolean} — If the focus ring should be generated.
Output: The generated button variant.
btn-variant-outline
Generate a button variant with outline.
Parameters
type{string} — The type of the button for the color value.focus{boolean} — If the focus ring should be generated.
Output: The generated button variant with outline.
clear-btn
Clear default button styles.
Output: The clear button mixin.
color
Get any color value from $colors (or any) Sass map.
Parameters
key{string} — The key name of the color.type{string} — The type of the color group (base, dark, etc.).only-color{boolean} — If true, return only the color value.map{map} — The map to get the color from.
Returns: color — The color value or the variable.
color-contrast
Get a white or black contrast color based on perceived brightness. Thanks for David Halford for this function: https://codepen.io/davidhalford/pen/ALrbEP
Parameters
color{color} — The color to get the contrast color.
Returns: color — The contrast color.
color-value
Get a raw color value from $colors (or any) Sass map.
Parameters
key{string} — The key name of the color.type{string} — The type of the color group (base, dark, etc.).map{map} — The map to get the color from.
Returns: color — The color value.
config
Get the value of a key from a map.
Parameters
key{string} — The key name.map{map} — The map to get the value from.custom-property{boolean} — Whether to return the value as a CSS custom property.
Returns: string — The value of the key.
escaping-characters
Characters to escape using SVG as data:image.
field-disabled
Style field disabled input states.
Parameters
background{string} — The background color.border{string} — The border color.
Output: The generated disabled input states.
field-icon
Get custom icon background for input and select fields.
Parameters
icon{string} — The icon as an SVG string.color{string} — The color.
Output: The generated icon background.
focus-ring
Generate a form focus ring.
Parameters
type{string} — The type of focus ring (box-shadow, outline).border-color{string} — The border color.ring-color{string} — The ring color.box-shadow-type{string} — The box shadow type (outset, inset).ring-size{string} — The ring width.ring-offset{string} — The ring offset.
Output: The generated focus ring.
font-face
Generate font-face declaration.
Parameters
font-family{string} — The font family name.src{string} — The font source.font-weight{number} — The font weight.font-style{string} — The font style.font-display{string} — The font display.
Output: The generated font-face declaration.
font-size
Get the font size of a key from the $font-sizes map.
Parameters
key{string} — The key name.fluid{boolean} — Whether to return the fluid font size.scaler{number} — The scaler value (15 = 15% smaller).optimal-size{number} — The optimal font size.
Returns: string — The font size of the key.
form-group-stacked
Create a form group stacked layout with custom breakpoint.
Parameters
breakpoint{string} — The breakpoint.
Output: The generated form group stacked layout.
generate-color-variables
Generate color variables.
Parameters
colors{map} — The colors map.selector{string} — The selector.
Output: The generated color variables.
generate-styles
Generate all the styles.
generate-variables
Generate CSS custom properties based on a map.
Parameters
map{map} — The map to generate the CSS custom properties from.exclude{list} — The list of keys (or a segment of it) to exclude.include{list} — The list of keys (or a segment of it) to include.
Output: The generated CSS custom properties.
get-css-variable
Add the prefix value to a CSS custom properties.
Parameters
var{string} — The name of the CSS custom property.
Returns: string — The CSS custom property with the prefix.
layout-center
Create center layout.
Parameters
gap{string} — The gap between the container and the content.max-inline-size{string} — The maximum width (inline-size) of the container.
Output: The centered layout.
layout-flex
Create instinctive flex layout.
Parameters
gap{string} — The gap between the elements.inline-size{string} — The width (inline size) of the elements.
Output: The instinctive flex layout.
layout-grid
Create grid layout.
Parameters
gap{string} — The gap between the elements.minimum{string} — The minimum width (inline-size) of the elements.
Output: The grid layout.
layout-sidebar
Create sidebar layout.
Parameters
gap{string} — The gap between the elements.inline-size{string} — The width (flex-basis) of the sidebar.
Output: The sidebar layout.
layout-stack
Create stack layout.
Parameters
gap{string} — The gap between the elements.inline-size{boolean} — Whether it has explicit width (inline-size).align{string} — The horizontal alignment of the elements.important{boolean} — Whether it should use the !important keyword.
Output: The stacked layout.
responsive-font-size
Generate responsive font-size value using clamp().
Parameters
size{number} — The font size.scaler{number} — The scaler value (15 = 15% smaller).optimal-size{number} — The optimal font size.
Returns: string — The responsive font-size value.
scrollbar
Custom scrollbar.
Parameters
thumb-background-color{string} — The background color of the thumb.thumb-background-color-hover{string} — The background color of the thumb when hovered.track-background-color{string} — The background color of the track.size{string} — The size of the scrollbar.border-radius{string} — The border radius of the scrollbar.
Output: The scrollbar mixin.
selection
Set the ::selection of an element with automatic foreground color.
Parameters
background{color} — The background color.foreground{color} — The foreground color. If null, the color will be automatically calculated.is-direct{boolean} — If true, the selection will be applied to the current element if false it will be applied to its children.
Output: The selection mixin.
set-css-variable
Declare CSS custom properties to add the prefix.
Parameters
vars{map} — The CSS custom properties.
Output: Prefixed CSS custom-property declarations.
setting
Get a value from the $settings map.
Parameters
key{string} — The key name.
Returns: string — The value of the key.
short-ring
Generate a focus ring.
Parameters
type{string} — The type of the focus ring.btn-type{string} — The type - hence color - of the button.
Output: The focus ring mixin.
spacer
Get spacer value from $spacers map.
Parameters
key{string} — The key name.
Returns: string — The value of the key.
spacer-clamp
Get value returned in a clamp from $spacers maps.
Parameters
min{string} — The minimum value.max{string} — The maximum value.optimal{string} — The optimal value.
Returns: string — The value returned in a clamp.
split-values
Split a string into a list of values.
Parameters
value{string} — The string to split.separator{string} — The separator to split by.
Returns: list — The list of values.
svg-escape
Escape a string to be used as a data URI.
Parameters
string{String} — The string to escape.
Returns: String — The escaped string.
text-ellipsis
Crop text and display an ellipsis with multiline.
Parameters
number-of-lines{number} — The number of lines.
Output: The text ellipsis mixin.
transition
Generates transition related declarations.
Parameters
duration{string} — The duration of the transition.property{string} — The property to which the transition is applied.timing-function{string} — The speed curve of the transition.
Output: The generated transition declarations.
word-wrap
Break long string.
Output: The word-wrap mixin.