Utility-First CSS

The Utility-First Approach is the one of most important functionalty of a CSS Framework

According to the JKCSS, Utility-First Approach is successfully working from v6.0.0 - 5 May 2024

Docs

# Colors (Text colors, Background Colors), # Font Weight

# Colors

Text Colors

This is the Text Color styles for components using Utility-First CSS in JKCSS

<div >
    <p class="text-blue"> JKCSS Utility-First Blue Text </p>
    <p class="text-red"> JKCSS Utility-First Red Text </p>
    <p class="text-green"> JKCSS Utility-First Green Text </p>
    <p class="text-yellow"> JKCSS Utility-First Yellow Text </p>
</div>

Output

JKCSS Utility-First Blue Text

JKCSS Utility-First Blue Text

JKCSS Utility-First Blue Text

JKCSS Utility-First Blue Text

Background Colors

This is the Background Color styles for components using Utility-First CSS in JKCSS

<div >
    <div class="bg-blue text-white"> JKCSS Utility-First Blue Text </div>
    <div class="bg-red text-white"> JKCSS Utility-First Red Text </div>
    <div class="bg-green text-white"> JKCSS Utility-First Green Text </div>
    <div class="bg-yellow text-red"> JKCSS Utility-First Yellow Text </div>
</div>

Output

JKCSS Utility-First Blue Text JKCSS Utility-First Blue Text JKCSS Utility-First Blue Text JKCSS Utility-First Blue Text

Some Color Variations

use Following color styles for Variations

for text color Variations

Light: <div class="text-COLOR_NAME-light-NUMBER"> ... </div>
Dark: <div class="text-COLOR_NAME-dark-NUMBER"> ... </div>

for Background color Variations

Light: <div class="bg-COLOR_NAME-light-NUMBER"> ... </div>
Dark: <div class="bg-COLOR_NAME-dark-NUMBER"> ... </div>

Inorder to use Color Variations Follow the following Steps

1. in Abouve Example COLOR_NAME should be change to color name

2. in Abouve Example NUMBER should be change to between 1 - 9

Supported Colors

                        $colors: ( 
                            "blue": blue,
                            "red": red,
                            "pink": pink,
                            "yellow": yellow,
                            "orange": orange,
                            "green": green,
                            "white": white,
                            "black": black,    
                        );

# Font Weight

Font Weight

This is the Font Weight styles for components using Utility-First CSS in JKCSS

<div >
    <p class="font-light"> JKCSS Utility-First </p>
    <p class="font-normal"> JKCSS Utility-First </p>
    <p class="font-medium"> JKCSS Utility-First </p>
    <p class="font-semibold"> JKCSS Utility-First </p>
    <p class="font-bold"> JKCSS Utility-First </p>
    <p class="font-bolder"> JKCSS Utility-First </p>
</div>

Output

JKCSS Utility-First

JKCSS Utility-First

JKCSS Utility-First

JKCSS Utility-First

JKCSS Utility-First

JKCSS Utility-First 

                    $weights: (
                        "light": 300,
                        "normal": 400,
                        "medium": 500,
                        "semibold": 600,
                        "bold": 700,
                        "bolder": 800,  
                    )