Global

Methods

animation(name, duration, timing, delay, iteration, direction, fillMode, playState)

Set an animation to play on an element. Animations must be created using the `createAnimation` function.
Parameters:
Name Type Description
name string The name of the animation
duration string The duration of the animation
timing string The timing function of the animation
delay string The delay of the animation
iteration string The number of times the animation should play
direction string The direction of the animation
fillMode string The fill mode of the animation
playState string The play state of the animation
Source:

backgrondPosition(x, y)

Set the position of the background.
Parameters:
Name Type Description
x 'left' | 'center' | 'right' The x position of the background image
y 'left' | 'center' | 'right' The y position of the background image
Source:

backgroundAttachment(value)

Set wether or not the background image is fixed.
Parameters:
Name Type Description
value 'scroll' | 'fixed' | 'local' The value of this property
Source:

backgroundClip(value)

Define how far the background (color or image) should extend within an element.
Parameters:
Name Type Description
value 'padding-box' | 'border-box' | 'content-box' The value of this property
Source:

backgroundColor(color)

Apply a color to the background
Parameters:
Name Type Description
color RGB | RGBA A color to apply to the background
Source:

backgroundImage(url)

Set the background image.
Parameters:
Name Type Description
url string The url of the image (Can be URL or 'none')
Source:

backgroundOrigin(value)

Set the background origin position.
Parameters:
Name Type Description
value 'padding-box' | 'border-box' | 'content-box' The value of this property
Source:

backgroundRepeat(value)

Set if/how a background image will be repeated.
Parameters:
Name Type Description
value 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round' | 'inherit' The value of this property
Source:

backgroundSize(value, unit, width, height)

Parameters:
Name Type Description
value 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch' The value of this property
unit unit opt: If setting width/height, the unit of measurement must be set (px,em,rem)
width number opt: The width of the background
height number opt: The height of the background
Source:

blur(val)

[FILTER] Blur an element
Parameters:
Name Type Description
val UnitValue The amount to blur
Source:

border(value, style, color)

Create a new Border.
Parameters:
Name Type Description
value UnitValue Border width
style 'solid' | 'dashed' | 'dotted' What kind of border? Solid, dashed, dotted
color RGB | RGBA What color should the border be?
Source:

borderBottom(value, style, color)

Create a new Bottom Border.
Parameters:
Name Type Description
value Border width
style What kind of border? Solid, dashed, dotted
color What color should the border be?
Source:

borderCollapse(value)

Set whether table borders should collapse into a single border or be separated as in standard HTML.
Parameters:
Name Type Description
value 'collapse' | 'separate' | 'inherit' The value of this property
Source:

borderImage(source, slice, width, outset, repeat)

Set an image as border
Parameters:
Name Type Description
source string The source of the image
slice number How should the image be sliced?
width number How wide the border image should be
outset number How far the border image should be from the border
repeat 'stretch' | 'repeat' | 'round' | 'space' Specify how/if the image should be repeated
Source:

borderLeft(value, style, color)

Create a new Left Border.
Parameters:
Name Type Description
value UnitValue Border width
style 'solid' | 'dashed' | 'dotted' What kind of border? Solid, dashed, dotted
color RGB | RGBA What color should the border be?
Source:

borderRadius(all, topLeft, topRight, bottomLeft, bottomRight)

Apply a radius to the border
Parameters:
Name Type Description
all UnitValue The radius of all corners
topLeft UnitValue The radius of the top corners
topRight UnitValue The radius of the top right corner
bottomLeft UnitValue The radius of the bottom left corner
bottomRight UnitValue The radius of the bottom right corner
Source:

borderRight(value, style, color)

Create a new Right Border.
Parameters:
Name Type Description
value UnitValue Border width
style 'solid' | 'dashed' | 'dotted' What kind of border? Solid, dashed, dotted
color RGB | RGBA What color should the border be?
Source:

borderTop(value, style, color)

Create a new Top Border.
Parameters:
Name Type Description
value UnitValue Border width
style 'solid' | 'dashed' | 'dotted' What kind of border? Solid, dashed, dotted
color RGB | RGBA What color should the border be?
Source:

bottom(val)

Left position of an element.
Parameters:
Name Type Description
val UnitValue The value for the left position.
Source:

boxSizing(value)

How is the width/height of an element calculated.
Parameters:
Name Type Description
value 'content-box' | 'border-box' The value of this property ('content-box', 'border-box')
Source:

brightness(val)

[FILTER] Brightness of an element
Parameters:
Name Type Description
val UnitValue | number The amount to brighten (or darken) the element. Note: UnitValue only supports percentages.
Source:

color(color)

Apply a color to text.
Parameters:
Name Type Description
color RGB | RGBA A color to apply to text
Source:

compile(input, outpath, silent)

Compile AuraJS stylesheets into CSS
Parameters:
Name Type Description
input string | StyleSheet The input file. You can also directly specify a Stylesheet object.
outpath string output file path
silent boolean Define wether or not the compiler should log messages (default: true)
Source:
Returns:
A written file containing the generated CSS. It also returns the CSS string.

compilerLog(msg)

A simple logging function. Just a wrapper for console.log.
Parameters:
Name Type Description
msg string Message to log
Source:

content(value)

Set the content property. Required for pseudo elements (::before / ::after).
Parameters:
Name Type Description
value string The value to set this property to
Source:

contrast(val)

[FILTER] Contrast of an element
Parameters:
Name Type Description
val UnitValue | number The amount to increase (or decrease) the contrast of the element. Note: UnitValue only supports percentages.
Source:

convertToString(opts)

Convert an array for grid to something that is actually usable.
Parameters:
Name Type Description
opts Array.<(string|UnitValueGrid|number)> Input array of options
Source:

createAnimation(name, keyframes)

Create a new Animation.
Parameters:
Name Type Description
name string The name of the animation
keyframes Array.<Object> Keyframes part of this animation
Source:

cursor(value)

Set which curser should be displayed when hovering over an element.
Parameters:
Name Type Description
value 'auto' | 'default' | 'none' | 'context-menu' | 'help' | 'pointer' | 'progress' | 'wait' | 'cell' | 'crosshair' | 'text' | 'vertical-text' | 'alias' | 'copy' | 'move' | 'no-drop' | 'not-allowed' | 'e-resize' | 'n-resize' | 'ne-resize' | 'nw-resize' | 's-resize' | 'se-resize' | 'sw-resize' | 'w-resize' | 'ew-resize' | 'ns-resize' | 'nesw-resize' | 'nwse-resize' | 'col-resize' | 'row-resize' | 'all-scroll' | 'zoom-in' | 'zoom-out' | 'grab' | 'grabbing' | 'inherit' The value of this property
Source:

deg(value)

Create a UnitValueRotation object with the unit of `deg`.
Parameters:
Name Type Description
value number The value that should be paired with the unit
Source:

direction(value)

Set in what direction text is displayed.
Parameters:
Name Type Description
value 'ltr' | 'rtl' The value of this property ('ltr' | 'rtl')
Source:

display(opt)

CSS Display property
Parameters:
Name Type Description
opt 'flex' | 'inline-flex' | 'block' | 'inline-block' | 'inline' | 'none' | 'grid' | 'inline-grid' Display option
Source:

em(value)

Create a UnitValue object with the unit of `em`.
Parameters:
Name Type Description
value number The value that should be paired with the unit
Source:

errorCheckSheet(styles)

Check to see if the Stylesheet contains anything that is deemed invalid
Parameters:
Name Type Description
styles Array.<Object> Array containing styles / selectors
Source:

errorCheckUnit(val)

This functions checks if a UnitValue is only supplying a percentage. If it does not, throw an error.
Parameters:
Name Type Description
val UnitValue The vlaue to check
Source:

filter(filters)

Apply a filter to an element
Parameters:
Name Type Description
filters Array.<Object> Filters to apply. They are applied in the order they are given.
Source:

flex(direction, wrap, grow, shrink, basis, alignContent, justify, alignItems)

Made an element a Flex element. With this you can set a bunch of flex properties in one go.
Parameters:
Name Type Description
direction 'row' | 'row-reverse' | 'column' | 'column-reverse' The direction of the flex container
wrap 'nowrap' | 'wrap' | 'wrap-reverse' How the flex container should handle wrapping
grow number The flex-grow property
shrink number The flex-shrink property
basis number The flex-basis property
alignContent 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch' How to align the content in the flex container
justify 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' How to justify the content in the flex container
alignItems 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch' How to align the items in the flex container
Source:

flexDirection(direction)

Set the flex-direction property.
Parameters:
Name Type Description
direction 'row' | 'row-reverse' | 'column' | 'column-reverse' direction of the flex container
Source:

flexWrap(wrap)

Set how flex should handle wrapping.
Parameters:
Name Type Description
wrap 'wrap' | 'nowrap' | 'wrap-reverse' Wrap option
Source:

font(size, family, weight, style, variant)

Set the font settings on an element
Parameters:
Name Type Description
size UnitValue The size of the font
family string The font family
weight 'normal' | 'bold' | 'bolder' | 'lighter' | number The font weight
style 'normal' | 'italic' | 'oblique' The font style
variant 'normal' | 'small-caps' The font variant
Source:

fr(value)

Create a UnitValue object with the unit of `fr`.
Parameters:
Name Type Description
value number The value that should be paired with the unit
Source:

generateBackgroundColorClasses(colors)

Generate Background Color classes automatically. These classes will look like this: `.bg-[color]`
Parameters:
Name Type Description
colors Object The object of colors to generate classes for. It should be noted that only a key:value pair of the RGB class is supported.
Source:

generateColorClasses(colors)

Generate color classes automatically. These classes will look like this: `.color-[color]`
Parameters:
Name Type Description
colors Object The object of colors to generate classes for. It should be noted that only a key:value pair of the RGB class is supported.
Source:

generateGridSystem(divisionCount, breakpoints)

Generate a Grid system using Flexbox. Generates `.col`, `.row` `.container` classes.
Parameters:
Name Type Description
divisionCount number The number of divisions in the grid (default: `12`)
breakpoints Object The breakpoints to use in the grid. (default: `{xs: 300, s: 576, m: 768, l: 992, xl: 1200, xxl: 1400}`)
Source:

grad(value)

Create a UnitValueRotation object with the unit of `grad`.
Parameters:
Name Type Description
value number The value that should be paired with the unit
Source:

gradient(type, keys, angle)

Apply a gradient ot an element. Automatically applies it to `baclground-image`.
Parameters:
Name Type Description
type 'linear' | 'radial' The type of gradient to apply
keys Array.<Key> Percentages and colors to use in the gradient
angle UnitValueRotation The angle to use for the gradient (Only for linear gradients)
Source:

grayscale(val)

[FILTER] Grayscale an element
Parameters:
Name Type Description
val UnitValue | number The amount to grayscale the element. Note: UnitValue only supports percentages.
Source:

gridColumn(start, end)

Define the start and end of a grid item in terms of columns.
Parameters:
Name Type Description
start number | 'auto' The start of the item.
end number | 'auto' The end of the item.
Source:

gridGap(column, row)

Define the gap between grid items.
Parameters:
Name Type Description
column UnitValueGrid The gap between items.
row UnitValueGrid The gap between rows.
Source:

gridRow(start, end)

Define the start and end of a grid item in terms of rows.
Parameters:
Name Type Description
start number | 'auto' The start of the item.
end number | 'auto' The end of the item.
Source:

gridTemplate(colums, rows)

Define a grid template. All options can contain `string`, `unitValueGrid` or `number`(which defaults to `px`). This also automatically sets display to `grid`.
Parameters:
Name Type Description
colums Array.<(string|UnitValueGrid|number)> Column template array.
rows Array.<(string|UnitValueGrid|number)> Row template array.
Source:

height(min, value, max)

Set an elements Height. You can set the current, minimum, and maximum height.
Parameters:
Name Type Description
min UnitValue Minimum height
value UnitValue Current height
max UnitValue Maximum height
Source:

hueRotate(val)

[FILTER] Hue rotate an element
Parameters:
Name Type Description
val UnitValueRotation The amount to rotate the hue of the element
Source:

include(sheet)

Include another stylesheet inside a stylesheet.
Parameters:
Name Type Description
sheet StyleSheet The stylesheet to include
Source:

invert(val)

[FILTER] Invert the color of an element
Parameters:
Name Type Description
val UnitValue | number The amount to invert the color of the element. Note: UnitValue only supports percentages.
Source:

key(percent, color)

Add a key to a gradient.
Parameters:
Name Type Description
percent number The percentage to use for the key
color RGB | RGBA The color to use for the key
Source:

keyframe(percent, styles)

A keyframe inside an animation.
Parameters:
Name Type Description
percent number The percentage of the animation that should be complete
styles Array.<Object> Array of styles to apply at this point in the animation
Source:

left(val)

Left position of an element.
Parameters:
Name Type Description
val UnitValue The value for the left position.
Source:

lineHeight(val)

Set the line height of an element
Parameters:
Name Type Description
val UnitValue The line height
Source:

listStyle(type, position, image)

Define how List indicators should be displayed.
Parameters:
Name Type Description
type string The type of icon to use
position string The position of the icon
image string The image to use as the icon
Source:

loopCounter(startvalue, endvalue, styles, selector)

Create a for loop to generate a list of styles. Note: To use the `selector` in a place where the value would be anything BUT a `string`, you must use the `loopResolve` function. ``` loopCounter(0, 4, [ // A demo selector selector('demo-<#i>', [ margin({unit:'rem', top: loopResolve('<#i>')}), ]) ]) ````
Parameters:
Name Type Description
startvalue The start value of the loop
endvalue The end value of the loop
styles A collection of styles and/or selectors
selector What string placeholder to use for the loop value. Defaults to `<#i>`
Source:

loopResolve(value)

loopResolve is used to resolve Loop selectors when a loop is executed. This is required to make use of the `selector` a loop will provide.
Parameters:
Name Type Description
value The value to resolve
Source:

loopStyles(styles, parent)

Loop over all styles, including nested ones.
Parameters:
Name Type Description
styles Array.<Object> Array containing styles / selectors
parent string Optional parent selector. Do not set manually.
Source:
Returns:
CSS string

margin(top, right, bottom, left, all, auto)

Apply margin to an element.
Parameters:
Name Type Description
top UnitValue Top margin (default: `0`)
right UnitValue Right margin (default: `0`)
bottom UnitValue Bottom margin (default: `0`)
left UnitValue Left margin (default: `0`)
all UnitValue Apply the same margin to all sides
auto boolean Auto margin. Overrides other parameters (default: `false`)
Source:

media(query, styles)

Create a new media query.
Parameters:
Name Type Description
query string The query. For example: `only screen and (min-width: 768px)`
styles Array.<Object> Styles/selctors which will be part of this media query
Source:

objectFit(val)

Configure how an eleemnt should fit in another element
Parameters:
Name Type Description
val string The value for object-fit. (contain | cover | fill | none | scale-down)
Source:

opacity(value)

Set the opacity of an element
Parameters:
Name Type Description
value number The opacity value
Source:

opacity(val)

[FILTER] Opacity of an element
Parameters:
Name Type Description
val UnitValue | number The amount to change the opacity of the element. Note: UnitValue only supports percentages.
Source:

padding(top, right, bottom, left, all, auto)

Apply padding to an element.
Parameters:
Name Type Description
top UnitValue Top padding (default: `0`)
right UnitValue Right padding (default: `0`)
bottom UnitValue Bottom padding (default: `0`)
left UnitValue Left padding (default: `0`)
all UnitValue Apply the same padding to all sides
auto boolean Auto padding. Overrides other parameters (default: `false`)
Source:

percent(value)

Create a UnitValue object with the unit of `%`.
Parameters:
Name Type Description
value number The value that should be paired with the unit
Source:

position(value)

Set the position of an element.
Parameters:
Name Type Description
value 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky' The position to use
Source:

px(value)

Create a UnitValue object with the unit of `rem`.
Parameters:
Name Type Description
value number The value that should be paired with the unit
Source:

rad(value)

Create a UnitValueRotation object with the unit of `rad`.
Parameters:
Name Type Description
value number The value that should be paired with the unit
Source:

rem(value)

Create a UnitValue object with the unit of `rem`.
Parameters:
Name Type Description
value number The value that should be paired with the unit
Source:
Left position of an element.
Parameters:
Name Type Description
val UnitValue The value for the left position.
Source:

rotate(angle)

[TRANSFORM FUNCTION] Apply a rotation to an element.
Parameters:
Name Type Description
angle UnitValue The angle of rotation
Source:

rotate3D(x, y, z, angle)

[TRANSFORM FUNCTION] Create a 3D rotation
Parameters:
Name Type Description
x number The x-axis rotation (0-1)
y number The y-axis rotation (0-1)
z number The z-axis rotation (0-1)
angle UnitValue Angle of rotation
Source:

s(value)

Create a UnitValue object with the unit of `s`.
Parameters:
Name Type Description
value number The value that should be paired with the unit
Source:

saturate(val)

[FILTER] Saturation of an element
Parameters:
Name Type Description
val UnitValue | number The amount to change the saturation of the element. Note: UnitValue only supports percentages.
Source:

scale(x, y, z)

[TRANSFORM FUNCTION] Scale an element up/down.
Parameters:
Name Type Description
x number The x-axis scale
y number The y-axis scale
z number The z-axis scale. If left blank it will create a 2D scale.
Source:

sepia(val)

[FILTER] Sepia of an element
Parameters:
Name Type Description
val UnitValue | number The amount to change the sepia of the element. Note: UnitValue only supports percentages.
Source:

shadow(hOffset, vOffset, blur, spread, color)

Create a new shadow.
Parameters:
Name Type Description
hOffset UnitValue The horizontal offset of the shadow
vOffset UnitValue The vertical offset of the shadow
blur UnitValue The blur distance
spread UnitValue The spread of the shadow
color RGB | RGBA The color of the shadow
Source:

skew(x, y)

[TRANSFORM FUNCTION] Skew an element
Parameters:
Name Type Description
x UnitValue The x-axis skew
y UnitValue The y-axis skew
Source:

top(val)

Left position of an element.
Parameters:
Name Type Description
val UnitValue The value for the left position.
Source:

transform(transformFunction)

Apply a 2d (or 3d) transform to an element.
Parameters:
Name Type Description
transformFunction Object Here you can specify the transform function. For example: `rotate()`
Source:

transition(props, duration, timing, delay)

Apply transitions to an element.
Parameters:
Name Type Description
props string The properties to apply transitions to. Can be a string or an array of strings
duration UnitValue The duration of this transition.
timing string The timing function of this transition.
delay UnitValue The delay of this transition.
Source:

translate(x, y, z)

[TRANSFORM FUNCTION] Translate an element
Parameters:
Name Type Description
x UnitValue The x-axis translation
y UnitValue The y-axis translation
z UnitValue The z-axis translation. If left blank it will create a 2D translate.
Source:

turn(value)

Create a UnitValueRotation object with the unit of `turn`.
Parameters:
Name Type Description
value number The value that should be paired with the unit
Source:

vh(value)

Create a UnitValue object with the unit of `vh`.
Parameters:
Name Type Description
value number The value that should be paired with the unit
Source:

vmax(value)

Create a UnitValue object with the unit of `vmax`.a
Parameters:
Name Type Description
value number The value that should be paired with the unit
Source:

vmin(value)

Create a UnitValue object with the unit of `vmin`.
Parameters:
Name Type Description
value number The value that should be paired with the unit
Source:

vw(value)

Create a UnitValue object with the unit of `vw`.
Parameters:
Name Type Description
value number The value that should be paired with the unit
Source:

width(min, value, max)

Set an elements Width. You can set the current, minimum, and maximum width.
Parameters:
Name Type Description
min UnitValue Minimum width
value UnitValue Current width
max UnitValue Maximum width
Source:

zIndex(value)

Set the z-index of an element.
Parameters:
Name Type Description
value UnitValue The index of this element
Source: