cssuals

The best HTML, CSS, and JavaScript framework for developing responsive projects on the web with less code. By using this framework, JS and CSS code will be decreased. So many resources will be saved after using this framework

Versions

latest version(beta) not stable: cssuals@v1.0.3
Stable version will be released from 1.1.0

Installation

add one of below tag in head section of html by choice of your method (either offline or online method or minfied or original)

Online Method

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hahsanayub/cssuals@v1.0.3/cssuals.css">

minified version
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hahsanayub/cssuals@v1.0.3/cssuals.min.css">

Offline Method

Download from url version v1.0.3, extract and placed it in your project. https://github.com/hahsanayub/cssuals/archive/refs/tags/v1.0.3.zip

<link rel="stylesheet" href="./cssuals-1.0.3/cssuals.css">

minified version
<link rel="stylesheet" href="./cssuals-1.0.3/cssuals.min.css">

Documentation

Typography

• Font size

  There is a class ft-px-1. it set the the font-size: 1px;. From 1 to 100 pixl font-size can be set ft-px-* In * replace from 1 to 100 to set font size of text
  
  Examples:
  <p class="ft-px-1">Text of font size 1px</p> output: Text of font size 1px
  <p class="ft-px-2">Text of font size 2px</p> output: Text of font size 2px
  <p class="ft-px-3">Text of font size 3px</p> output: Text of font size 3px
  ......upto ft-px-100
<p class="ft-px-100">Text of font size 100px</p>
  
  

  • Font Color

    There are 24 classes for font colors:
    clr-white, clr-black, clr-grey, clr-silver, clr-maroon, clr-red, clr-purple, clr-fuchsia, clr-green, clr-blue, clr-orange, clr-yellow, clr-dark, clr-dark-light, clr-primary, clr-primary-light, clr-danger, clr-danger-light, clr-success, clr-success-light, clr-warning, clr-warning-light, clr-info , clr-info-light
    
    Note: bg-black is for background color black. I added in clr-white to get visible white color
    
    Examples:
    <p class="clr-white bg-black">white</p> Output: white
    <p class="clr-black">black</p> Output: black
    <p class="clr-grey">grey</p> Output: grey
    <p class="clr-silver">silver</p> Output: silver
    <p class="clr-maroon">maroon</p> Output: maroon
    <p class="clr-red">red</p> Output: red
    <p class="clr-purple">purple</p> Output: purple
    <p class="clr-fuchsia">fuchsia</p> Output: fuchsia
    <p class="clr-green">green</p> Output: green
    <p class="clr-blue">blue</p> Output: blue
    <p class="clr-orange">orange</p> Output: orange
    <p class="clr-yellow">yellow</p> Output: yellow
    <p class="clr-dark">dark</p> Output: dark
    <p class="clr-dark-light">dark-light</p> Output: dark-light
    <p class="clr-primary">primary</p> Output: primary
    <p class="clr-primary-light">primary-light</p> Output: primary-light
    <p class="clr-danger">danger</p> Output: danger
    <p class="clr-danger-light">danger-light</p> Output: danger-light
    <p class="clr-success">success</p> Output: success
    <p class="clr-success-light">success-light</p> Output: success-light
    <p class="clr-warning">warning</p> Output: warning
    <p class="clr-warning-light">warning-light</p> Output: warning-light
    <p class="clr-info">info</p> Output: info
    <p class="clr-info-light">info-light</p> Output: info-light