Background
The .bg class can be used to set backgrounds, depending on the selected
variant css variables will be changed, so all colors used inside will fit to
the background.
Colors
<div class="bg bg-black" style="min-height: 100px"></div>
<div class="bg bg-white" style="min-height: 100px"></div>
<div class="bg bg-blue" style="min-height: 100px"></div>
<div class="bg bg-gray" style="min-height: 100px"></div>Black
<div class="bg bg-black" style="min-height: 100px"></div>White
<div class="bg bg-white" style="min-height: 100px"></div>Blue
<div class="bg bg-blue" style="min-height: 100px"></div>Gray
<div class="bg bg-gray" style="min-height: 100px"></div>Control
The .control class is used as base for all controls either by extending or using the class directly.
<a class="control">Link control</a><br>
<button type="button" class="control">Button control</button><br>
<button type="button" class="control" disabled>Button control disabeled</button><br>
<button type="button" class="control no-hover">Disable hover effect</button><br>Margin
Using margin to add margins top, right, bottom and left to your element.
Possible variables are:
- --[space] - set direclty a spacing unit
- --space-[space] - set a predefined space
Possible
- mt - margin-top
- mr - margin-right
- mb - margin-bottom
- ml - margin-left
<div class="bg bg-black" style="display: flow-root;">
<div class="margin bg bg-white">text</div>
</div>Margin top
Using mt to add margin top to your element.
Possible variables are:
- --mt - set direclty a spacing unit
- --space-mt - set a predefined space
<div class="bg bg-black" style="display: flow-root;">
<div class="mt bg bg-white">text</div>
</div>Margin right
Using mr to add margin right to your element.
Possible variables are:
- --mr - set direclty a spacing unit
- --space-mr - set a predefined space
<div class="bg bg-black" style="display: flow-root;">
<div class="mr bg bg-white">text</div>
</div>Margin bottom
Using mb to add margin bottom to your element.
Possible variables are:
- --mb - set direclty a spacing unit
- --space-mb - set a predefined space
<div class="bg bg-black" style="display: flow-root;">
<div class="mb bg bg-white">text</div>
</div>Margin left
Using ml to add margin left to your element.
Possible variables are:
- --ml - set direclty a spacing unit
- --space-ml - set a predefined space
<div class="bg bg-black" style="display: flow-root;">
<div class="ml bg bg-white">text</div>
</div>Margin y-axis and x-axis
Using mxy to add margin for the x and y axies to your element.
Possible variables are:
- --[space] - set direclty a spacing unit
- --space-[space] - set a predefined space
Possible
- my - margin-top and margin-bottom
- mx - margin-left and margin-right
<div class="bg bg-black" style="display: flow-root;">
<div class="mxy bg bg-white">text</div>
</div>Margin y-axis
Using my to add margins tob and bottom with same size to your element.
Possible variables are:
- --my - set direclty a spacing unit
- --space-my - set a predefined space
<div class="bg bg-black" style="display: flow-root;">
<div class="my bg bg-white">text</div>
</div>Margin x-axis
Using mx to add margins left and right with same size to your element.
Possible variables are:
- --mx - set direclty a spacing unit
- --space-mx - set a predefined space
<div class="bg bg-black" style="display: flow-root;">
<div class="mx bg bg-white">text</div>
</div>Padding
Using padding to add paddings top, right, bottom and left to your element.
Possible variables are:
- --[space] - set direclty a spacing unit
- --space-[space] - set a predefined space
Possible
- pt - padding-top
- pr - padding-right
- pb - padding-bottom
- pl - padding-left
<div class="padding bg bg-black"><div class="bg bg-white">text</div></div>Padding top
Using pt to add padding top to your element.
Possible variables are:
- --pt - set direclty a spacing unit
- --space-pt - set a predefined space
<div class="pt bg bg-black"><div class="bg bg-white">text</div></div>Padding right
Using pr to add padding right to your element.
Possible variables are:
- --pr - set direclty a spacing unit
- --space-pr - set a predefined space
<div class="pr bg bg-black"><div class="bg bg-white">text</div></div>Padding bottom
Using pb to add padding bottom to your element.
Possible variables are:
- --pb - set direclty a spacing unit
- --space-pb - set a predefined space
<div class="pb bg bg-black"><div class="bg bg-white">text</div></div>Padding left
Using pl to add padding left to your element.
Possible variables are:
- --pl - set direclty a spacing unit
- --space-pl - set a predefined space
<div class="pl bg bg-black"><div class="bg bg-white">text</div></div>padding y-axis and x-axis
Using pxy to add padding for the x and y axies to your element.
Possible variables are:
- --[space] - set direclty a spacing unit
- --space-[space] - set a predefined space
Possible
- my - padding-top and padding-bottom
- mx - padding-left and padding-right
<div class="pxy bg bg-black"><div class="bg bg-white">text</div></div>Padding y-axis
Using py to add paddings tob and bottom with same size to your element.
Possible variables are:
- --py - set direclty a spacing unit
- --space-py - set a predefined space
<div class="py bg bg-black"><div class="bg bg-white">text</div></div>Padding x-axis
Using px to add paddings left and right with same size to your element.
Possible variables are:
- --px - set direclty a spacing unit
- --space-px - set a predefined space
<div class="px bg bg-black"><div class="bg bg-white">text</div></div>Text
Set text specific styles
Colors
Use the .tc class in combination with a color to set the text color.
<div class="tc tc-white">Text color white</div>
<div class="tc tc-black">Text color black</div>
<div class="tc tc-gray">Text color gray</div>Width (Content)
Limit width of content. Use the --width-content variable to set the width and the --width-min-offset-x to
set the minimum required space on the left and right side. If you want to offset the content a little bit but
keep the same settings from --width-content and --width-min-offset-x you can use the --width-content-offset
variable.
Width base/default
<div class="width-content">
<div class="bg bg-black" style="min-height: 1em"></div>
</div>Width small
<div class="width-sm">
<div class="bg bg-black" style="min-height: 1em"></div>
</div>Width large
<div class="width-lg">
<div class="bg bg-black" style="min-height: 1em"></div>
</div>Width full
<div class="width-full">
<div class="bg bg-black" style="min-height: 1em"></div>
</div>