Documentation
Use the class names into your HTML elements to apply its attributes.
Ex. If you want to apply a large paragraph text, you have to use text-l as a class name into your <p> element as follow: <p class="text-l"> Hello World! </p>
Globaly you can use our messure as the following: [ s for Small - m for Medium - l for Large - xl for XLarge - xxl for XXLarge ]
Text
// - Sizes
| Class Names | Attributes | Samples |
|---|---|---|
| .text-s | 14px | Hello Fless |
| .text-m | 16px | Hello Fless |
| .text-l | 18px | Hello Fless |
| .text-xl | 22px | Hello Fless |
| .text-xxl | 30px | Hello Fless |
// - Effects
| Class Names | Attributes | Samples |
|---|---|---|
| .text-shadow-black | text-shadow: -1px 1px 2px #898686e0 | Hello Fless |
| .text-shadow-white | text-shadow: -1px 1px 2px #e7e3e3e0 | Hello Fless |
| .text-shadow-blue | text-shadow: -1px 1px 2px #7947eee0 | Hello Fless |
| .text-shadow-red | text-shadow: -1px 1px 2px #ee4747e0 | Hello Fless |
| .text-shadow-3d | color:rgba(240, 237, 237, 0.87) | text-shadow: -1px 1px 2px #ee4747e0, 1px 1px 2px #478aeee0 | Hello Fless |
Themes
| Class Names | Attributes | Samples |
|---|---|---|
| .dark-theme | color: rgb(223, 226, 226) | background-color: rgba(0, 0, 0, 0.76) | Hello Fless |
| .light-theme | color: rgb(29, 31, 31) | background-color: rgba(247, 255, 253, 0.76) | Hello Fless |
| .code-theme | color: rgb(29, 31, 31) | background-color: rgba(196, 219, 170, 0.76) | Hello Fless |
| .blue-theme | color: rgb(223, 226, 226) | background-color: rgba(42, 29, 163, 0.76) | Hello Fless |
| .red-theme | color: rgb(223, 226, 226) | background-color: rgba(163, 29, 29, 0.76) | Hello Fless |
Functional
| Class Names | Attributes | Explanation |
|---|---|---|
| .stick-on-top | position: fixed | width: 100% | top: 0 | z-index: 99 | Use it to stick an element on the top |
// - Submit Button
| Head | Body | Sample |
|---|---|---|
| <script src="https://kit.fontawesome.com/199e2b799f.js" crossorigin="anonymous"></script> | <button class="button"> <span class="text">Submit</span> <i class="fa-solid fa-check icon"></i> </button> |
| Head | <script src="https://kit.fontawesome.com/199e2b799f.js" crossorigin="anonymous"></script> |
|---|
| Body | <button class="button"> <span class="text">Submit</span> <i class="fa-solid fa-check icon"></i> </button> |
| Sample |