Using Stylet (colors)>

We've discussed on how you can get stylet, if you have issues installing stylet or using stylet, you can report it here. Now let's talk about Using Stylet.Stylet is easy to use, fun to use and easy to understand, Let's look at some things we can do using Stylet.


What is a website without Colors ? Stylet.css offers alot of colorations, currently in version 1.0.0, Stylet has 37 different colors and about 374 color combinations to use.


<div class="purple-bg pad-3 text-center">Purple</div>
<div class="gold-bg pad-3 text-center">Gold</div>
<div class="tomato-bg pad-3 text-center">Tomato</div>
<div class="maroon-bg pad-3 text-center">Maroon</div>
<div class="inkwell-bg pad-3 text-center">Inkwell</div>
<div class="smooth-bg pad-3 text-center">Smooth</div>
<div class="royal-blue-bg pad-3 text-center">Inkwell</div>

To use Stylet colors are simple once you understand stylet's color names, you can use those names for background colors, text colors, borders and so on.

red, light-red, dark-red, tomato, blue, light-blue, dark-blue, royal-blue, white, lavenderblush, cyan, gold, yellow, orange, smooth, grey, inkwell, maroon, purple, plum, chocolate, green, light-green, dark-green, violet, pink, raspberry, fuchsia, brown, ash, sand, wine, cornsilk, dark, black, palegoldenrod, amethyst-orchid.

Now that we know the color combinations, we can use it to create text colors, background colors and even border colors.
The principle is simple, because stylet has standard coloration which make it easy for you, so for example if you want to give color to a text it would go like this text-{stylet's_color}, so if we wanted a grey text, we would put it as text-grey.

I am golden

I am red

I am white

I am orange

I am green

I am dark green

<div class="text-center dark-blue-bg roundest-border">
<p class="text-gold">I am golden </p>
<p class="text-red">I am red </p>
<p class="text-white">I am white </p>
<p class="text-orange">I am orange </p>
<p class="text-green">I am green </p>
<p class="text-dark-green">I am dark green </p> </div>

From the examples above, you can see how easy it is to create colors. Let's look at some background colors.

Background colors

In the case of background colors, the Syntax goes like this {stylet's_color}-bg, so if we wanted to create a yellow background color we would give a class name of yellow-bg.

i have a purple background
i have a orange background
i have a brown background
i have a pink background
i have a raspberry background

<div class="pad-3 purple-bg text-center text-white">i have a purple background</div>
<div class="pad-3 orange-bg text-center text-white">i have a orange background</div>
<div class="pad-3 brown-bg text-center text-white">i have a brown background</div>
<div class="pad-3 pink-bg text-center text-white">i have a pink background</div>
<div class="pad-3 raspberry-bg text-center text-white">i have a raspberry background</div>

Multiple Background colors

We can also create background with two colors, using the same standard color

From purple to orange
From purple to royal blue
From red to orange
From maroon to purple
From royal blue to blue
From dark blue to dark red
<div class="purple-to-orange-bg pad-3 text-center text-white">From purple to orange</div>
<div class="purple-to-royal-blue-bg pad-3 text-center text-white">From purple to royal blue</div>
<div class="red-to-orange-bg pad-3 text-center text-white">From red to orange</div>
<div class="maroon-to-purple-bg pad-3 text-center text-white">From maroon to purple</div>
<div class="royal-blue-to-blue-bg pad-3 text-center text-white">From royal blue to blue</div>
<div class="dark-blue-to-dark-red-bg pad-3 text-center text-white">From dark blue to dark red</div>

We can also add Hover color Effects on text and background. Changing background colors or colors when we hover over.

Note: The hover effects only work on PCs, if you are using a mobile device, you won't be able to see it. What happens is when we hover over the HTML element with our cursor with the effect, the effect is triggered.

Hover over me and see my red bg
Hover over me and see multiple background bg
Hover over me and see text change
<div class="hover-red-bg pad-4 text-center border">
Hover over me and see my red bg
<div class="hover-purple-to-royal-blue-bg pad-4 text-center border">
Hover over me and see multiple background bg
<div class="hover-text-purple pad-4 text-center border">
Hover over me and see text change