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)
Copy
Parameter Type Default Description
$size integer null The pixel size you want to convert. This must be an integer and not in pixel units.

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)
Copy
Parameter Type Default Description
$size integer null The pixel size you want to convert. This must be an integer and not in pixel units.

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)
Copy
Parameter Type Default Description
$key key null The key name of a color within the color palette.

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)
Copy
Parameter Type Default Description
$color color null The background color you want to convert. Using hex values will yield the best results.

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)
Copy
Parameter Type Default Description
$key key null The key name of an item within the list.

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)
Copy
Parameter Type Default Description
$size integer null An integer representing the number of colums you want.