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.
Colors
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.
<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
<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.
<div class="hover-red-bg pad-4 text-center border">
Hover over me and see my red bg
</div>
<div class="hover-purple-to-royal-blue-bg pad-4 text-center border">
Hover over me and see multiple background bg
</div>
<div class="hover-text-purple pad-4 text-center border">
Hover over me and see text change
</div>