General
variables
cyanotype-generate-classes
$cyanotype-generate-classes: true !default;Description
Controls whether or not helper classes are generated. If set to false, only the mixins will be available. In order for your setting to take effect, ensure the variable is set before importing Cyanotype.
Type
Boolean
mixins
flex
@mixin flex($grow: 1) { ... }Description
Provides a shorthand for creating flexible elements. It sets the flex property to the $grow parameter, and it also sets min-height and min-width to zero, which is usually what you want.
The CSS flexbox module sets flexible elements’ minimum sizes to auto, which can have unintended side effects when elements shrink. If you do not want this behavior, just use flex directly.
Parameters
| parameterName | parameterDescription | parameterType | parameterDefault value |
|---|---|---|---|
$grow | value for | Number | 1 |
flex-pad
@mixin flex-pad($before: 0, $after: 0) { ... }Description
Provides a way to add weighted padding to the beginning and end of a flexbox container without polluting the DOM. It uses pseudoelements to create the padding. The values for $before and $after will be used as the weights for flex-grow for each pseudoelement.
Parameters
| parameterName | parameterDescription | parameterType | parameterDefault value |
|---|---|---|---|
$before | —none | Number | 0 |
$after | —none | Number | 0 |
See
- [mixin]
flexible-container
flexible-container
@mixin flexible-container($direction: horizontal, $justify: flex-start) { ... }Description
Sets display: flex on an element, turning it into a flexbox container.
Parameters
| parameterName | parameterDescription | parameterType | parameterDefault value |
|---|---|---|---|
$direction | controls the axis upon which the container lays out its children | 'horizontal' or 'vertical' | horizontal |
$justify | value for | String | flex-start |
full-size
@mixin full-size() { ... }Description
A helper mixin for setting width and height to 100%. This should be used sparingly—most of the time, the same effect can be accomplished via flexbox, and explicitly setting the size of an element can mess with how flexbox lays out elements.
Parameters
None.