Css
utility classes

COLORS
Colors vary from bright to dull colors. While we have primary and secondary colors, there are even more advanced color shades that are discovered through different color mixtures. The basic colors are the primary colors which are Red Blue and Green colors. From these colors, other colors are derived. The local color library does not distinguish between any of these color through their color categories or classifications. Rather, colors are measured with either the shade of white (-l, -ll) or darkness (-d, -dd). Some colors which are naturally dark, for example green, use the shade of white (i.e -l or -ll) to become brighter while others which are bright use -d or -dd to specify the darkness. However, brown is the only color which has been defined to have both a lighter and a darker utility class selector. The following colors are available for use:
blackwhiteoff-whiteblue red yellow greenorangepurple bronzesilvergoldbrown indigopinkaquagrey slate-greyivorylimemagenta maroonred-orangesea-greensea-blue sky-blue dry-bluesteel-bluedodger-blue deep-blue deeper-blueblue-violettan teal. Colors are either classified as dark colors or bright colors based on the aforementioned colors. The dark colors uses the light -l and lighter -ll "" directives to get brighter, while bright colors use the dark -d or darker -dd directive to get darker.

Dark Colors
There are only few dark colors that are supported by the local color library. Examples of these colors are listed below
black green and brown colors. Hence, the following are acceptable

black black-l black-ll
green green-l green-ll
brown brown-l brown-ll

Bright Colors
All other colors metioned apart from the dark colors are classified as bright colors. Examples of these colors are listed below

white white-d white-dd
off-white off-white-d off-white-dd
red red-d red-dd
blue blue-d blue-dd
dodger-blue dodger-blue-d dodger-blue-dd
dry-blue dry-blue-d dry-blue-dd
deep-blue deep-blue-d deep-blue-dd
deeper-blue deeper-blue-d deeper-blue-dd
steel-blue steel-blue-d steel-blue-dd
blue-violet blue-violet-d blue-violet-dd
yellow yellow-d yellow-dd
orange orange-d orange-dd
pink pink-d pink-dd
purple purple-d purple-dd
rebecca-purple rebecca-purple-d rebecca-purple-dd
bronze bronze-d bronze-dd
silver silver-d silver-dd
gold gold-d gold-dd
indigo indigo-d indigo-dd
aqua aqua-d aqua-dd
grey grey-d grey-dd
slate-grey slate-grey-d slate-grey-dd
ivory ivory-d ivory-dd
olive olive-d olive-dd
lime lime-d lime-dd
magenta magenta-d magenta-dd
maroon maroon-d maroon-dd
crimson crimson-d crimson-dd
tan tan-d tan-dd
teal teal-d teal-dd
sea-blue sea-blue-d sea-blue-dd
sea-green sea-green-d sea-green-dd
red-orange red-orange-d red-orange-dd
brown brown-d brown-dd

Color Usage
The format of the dark and bright colors cannot be applied naturally unless its puporse is strictly defined. The in order words mean that we need to specify where the colors should be applied. Colors can be applied for texts c, backgrounds color bcbh, borders bd and outlines ocohoo. The following syntaxes defines the purpose of a color:

text c- - text color
text opacity co- - text color opacity
text:hover ch-- text hover color
text opacity cho- - text color hover opacity
background bc-- background color
background opacity bco- - background color opacity level
background:hover bh- - background hover color
background opacity bho- - background hover opacity level
border bd- - border (color, thickness)
border opacity bdo- - border opacity (color)
border:hover bdh- - border hover (color)
border opacity bdho- - border hover opacity (color)
outline och- - outline color (color, thickness)
outline opacity oco- - outline color opacity
outline:hover och- - outline hover color
outline opacity oho- - outline hover opacity (color)
outline offset oo- - outline offset
outline offset ooh- - outline offset hover
Colors can be applied by first definining its function before application. For example, to apply a text color of green, the text color identifier of c- will be merged with the green color green to give c-green. This method can also be applied for color shades. For examle a light green will used c-green-l and a lighter green will use c-green-ll. In this way, it becomes easier to identify colors.
The illustration above reveals all the acceptable colors.

Color Library
black
black-l
black-ll
white
white-d
white-dd
off-white
off-white-d
off-white-dd
blue
blue-d
blue-dd
red
red-d
red-dd
yellow
yellow-d
yellow-dd
orange
orange-d
orange-dd
red-orange
red-orange-d
red-orange-dd
purple
purple-d
purple-dd
violet
violet-d
violet-dd
magenta
magenta-d
magenta-dd
teal
teal-d
teal-dd
lime
lime-d
lime-dd
dodger-blue
dodger-blue-d
dodger-blue-dd
dry-blue
dry-blue-d
dry-blue-dd
deep-blue
deep-blue-d
deep-blue-dd
deeper-blue
deeper-blue-d
deeper-blue-dd
steel-blue
steel-blue-d
steel-blue-dd
sea-blue
sea-blue-d
sea-blue-dd
blue-violet
blue-violet-d
blue-violet-dd
indigo
indigo-d
indigo-dd
rebecca-purple
rebecca-purple-d
rebecca-purple-dd
pink
pink-d
pink-dd
aqua
aqua-d
aqua-dd
bronze
bronze-d
bronze-dd
silver
silver-d
silver-dd
grey
grey-d
grey-dd
slate-grey
slate-grey-d
slate-grey-dd
gold
gold-d
gold-dd
brown
brown-d
brown-dd
brown-l
brown-ll
crimson
crimson-d
crimson-dd
maroon
maroon-d
maroon-dd
ivory
ivory-d
ivory-dd
olive
olive-d
olive-dd
sea-green
sea-green-d
sea-green-dd
tan
tan-d
tan-dd
The colors with their shade all together form eighty (110) colors that can be applied on texts, borders, outlines and backgrounds and even for opacity. This is created to provide a wide range of color selection. The entire use case of these color are at a minimum of at least 10,000 applicable ways and the ability to use color mixing through opacity even raises this level.

COLOR HOVERS
It is a commonly used feature to switch between colors when hovering on html contents such as text colors or background colors. In order to apply an hover color, any of the hover utitity classes mentioned earlier should be applied. For example the color grey can be applied a font color of c-grey and hover color ch-grey. For example when we hover on "This is a text" in the figure below, the color becomes darker:
Hover to change font color
This is a beautiful text

As we might have noticed, the hovering effect is very fast. We can make this faster by applying the bc class. This slows down the animation speed, making it smoother just as show below:
Hover to change font color
This is a beautiful text

COLOR OPACITY
The color opacity of elements can be set for borders, outlines, backgrounds and text using predefined relative utility class. The color opacity level runs from 0.1 to 0.9. Hence we the opacity classes with ending values -1 -2 -3 -4 -5 -6 -7 -8 and -9. The -1 reflects the lowest level of transparency at 0.9 while -9 relfects the highest highest of transparency at 0.1. The code below is an example of background opacity set for an element. The transition effect is applied though the bc class while a background hover color opacity of 3 (ie bho-3).

Hi hover on the black color
In the code above, the text is not affected by the background color transparency this is because the effect of the transparecy only falls on the background color. Now that we have seen the effect of colors let's see if we can created a cool button.


The button above is achieved through the use of untility classes along with the box-shadow css property. The code structure is show below: 
 <button class="in-flex-btn rad-r bc bc-purple bh-purple-dd oc-purple oc-1 oh-4 oo-5 ooh-7 c-white pxv-10 mxv-20" style="box-shadow: 0 0 0 10px rgb(var(--silver-d)), 0 0 0 14px purple;">
    Click me
 </button>


The utility classes seems a bit longer than usual. This is required given that the utility classes performs different kinds of operation. The following list explains the function of each class.
  • in-flex-btn is a flex display type used for buttons.
  • rad-r sets an element's border to round shape
  • c-white sets text color to white
  • bc sets a slower transition effect
  • bc-purple sets an elements background color to purple
  • bc-purple-dd sets an elements background color to darker purple when hovered upon
  • oc-purple sets outline color to purple
  • oc-1 sets outline thickness to 1
  • oh-4 sets outline thickness to 4 when hovered upon
  • oo-5 sets outline offset to 5
  • ooh-7 sets outline offset to 7 when hovered upon
  • pxv-10 sets padding to 10 pixel
  • mxv-20 sets a margin of 20 pixels all around the horizontal (x-axis) and vertical (y-axis)
In the situation where certain html attributes are longer, developers may employ the use of x-attr template directive for recurring attributes.

COLOR MIXING
Color mixing can be achieved through layers of colors. Since in reality, color mixing involves the addition of separate colors together gives room for new colors, color mixing can be achived by stacking layers of different colors on each other to achive a new color. Each layer is given a specific range of opacity level in which a lower layer can reflect through. The color below is an example of this.


HI

In the image above, different layers of colors were mixed using different levels of color transparency. We can see different color variations achieved by the colors just by setting the transparency. As we can see, the text is not affected because transparency is only set on the background-color of the div items not its contents itself. The code structure is shown below:

The button above is achieved through the use of untility classes along with the box-shadow css property. The code structure is show below:
Example: color mixing 
 
  <div class="bc-silver relative c-white">
    <div class="flex midv pxs-20 relative" style="height:50px">
    <div class="pxv-10 box-full bc-black bco-7" style="width:120px"></div>
        <div class="bc-red bco-7 c-white pxv-10 absolute" style="top:-20px; width: 80px; height: 60px">

        </div>
        <div class="bc-red bco-7 c-white pxv-10 absolute grid-center" style="left:40px; bottom:-8px; width:80px; height: 100px">
            HI           
        </div>
    </div>
 </div>