Functions

A set of useful Sass functions

The OrbitCSS framework relies on several functions for compiling individual modules. You can use or extend these functions when making your themes.

calculateRem()

The calculateRem($size) function will convert the input pixel size to a rem value. Changing the $font-base variable will alter the result of this function.

calculateRem($size)

calculateEm()

The calculateEm($size) function will convert the input pixel size to a em value. Changing the $font-base variable will alter the result of this function.

calculateEm($size)

color()

The color() function will return the value of a color from the $color-palette list. This will also return the value of any colors within the $custom-palette list.

color($key)

getTextColor()

The getTextColor($color) function accepts a color value and will return either black or white from the color palette depending on the lightness of the input color. The purpose of this function is to always return a text color value that will be readable over the input color.

getTextColor($color)

title-size()

The title-size($key) function will return a value from the $title-size list. This function requires the Typography module.

title-size($key)

calcColWidth()

The calcColWidth($size) function takes an integer, multiplies it by the $col-percentage variable and returns the value. This is used to create size modifiers for the Grid module. The value of the $col-percentage variable is determined by the number of columns set in the $max-cols variable. The default is 12 max columns resulting in a column percentage of 8.3333.

calcColWidth($size)