These variables are scattered in different sections since each of them belongs to different families of classes. However, it may be easier to find them all in one place. Also note that these are local variables, so their operation is limited to the scope of their own class.
It is important to note that the function of these classes with their variables is to rewrite the default value or use an unassigned value in a class.
Allows you to put thickness and color to the border on all sides.
.be-bdr-var
--bdr-top: --bdr-bottom: --bdr-left: --bdr-right:
Allows you to put thickness and color to specified border side.
.be-margin
--margin:
Allows you to put margins.
.be-container
--padding:
Override the padding value left and right of this class.
.be-hero-text
--top:
Override the top value for Hero Header.
.be-hero
--height: --font-size:
Override the height value and font size for Hero Header.
How to use it
Example of a case: You need to give a width of 23em to a div. In beCSS you have the be-width- * classes ranging from 5 to 5 or 10 to 10 to 50em. So, there are no intermediate values. However, there is the be-width class that is not accompanied by any value. Instead it has a variable that can be modified.
What this class allows is to be able to use the desired value regardless of whether you want the type of measurement.
<div class="be-width" style="--width: 23em">
<div class="be-bdr-var" style="--bdr-left: 5px solid red">
<!-- using a variable Flat Color -->
<div class="be-bdr-var" style="--bdr-bottom: 10px dotted var(--turquoise)">
This is a h2 heading
Lorem ipsum dolor sit amet...
Please note that the be-bdr-var class cancels out the other existing borders. These variables should be used on components that do not contain borders.
