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() 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)
| 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() 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)
| Parameter | Type | Default | Description |
|---|---|---|---|
| $size | integer | null | The pixel size you want to convert. This must be an integer and not in pixel units. |
createColor()
The createColor() function takes a color as a parameter and returns a formatted color based on the value of the $color-type variable. Supported values are 'hsl', 'rgba' and 'hex'. This ensures consistency throughout the framework.
createColor($value)
| Parameter | Type | Default | Description |
|---|---|---|---|
| $value | color | null | A color string. This accepts color names, hex, rgba & hsl. |
createHSLColor()
The createHSLColor() function accepts any CSS color value and returns the HSL equivalent.
createHSLColor($value);
| Parameter | Type | Default | Description |
|---|---|---|---|
| $value | color | null | A color string. This accepts color names, hex, rgba & hsl. |
createRGBAColor()
The createRGBAColor() function accepts any CSS color value and returns the RGBA equivalent.
createRGBAColor($value);
| Parameter | Type | Default | Description |
|---|---|---|---|
| $value | color | null | A color string. This accepts color names, hex, rgba & hsl. |
createHexColor()
The createHexColor() function accepts any CSS color value and returns the HEX equivalent.
createHexColor($value);
| Parameter | Type | Default | Description |
|---|---|---|---|
| $value | color | null | A color string. This accepts color names, hex, rgba & hsl. |
getTextColor()
The getTextColor() 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)
| Parameter | Type | Default | Description |
|---|---|---|---|
| $color | color | null | The background color you want to convert. Using hex values will yield the best results. |
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)
| Parameter | Type | Default | Description |
|---|---|---|---|
| $size | integer | null | An integer representing the number of colums you want. |