Croffle-css NPM

croffle-css

a lightweight CSS framework to design aesthetically-pleasing websites

header

croffle-css is a lightweight CSS framework designed to add a touch of aesthetic and cuteness to your web projects. It provides a collection of utility functions in the utils module that can be used to enhance the design and layout of your website.

official documentation

To learn how to utilize this npm package, kindly view its official documentation here: https://saemirii.gitbook.io/croffle-css

community

Want to partake in discussions regarding croffle-css? Feel free to join the discord server: https://discord.gg/z4MGaEBCda

Installation

You can install croffle-css via npm by running the following command:

npm install croffle-css

Alternatively, you can include it directly in your HTML by adding the following line:

<link rel="stylesheet" href="path/to/croffle.min.css">

Replace "path/to/croffle.min.css" with the actual path to croffle.min.css in your project or repository.

Usage

Once installed, you can start using croffle-css in your HTML files. Here are some of the utility functions available in the utils module:

crayon utils

`applyPastelColor("class", "hex color")`

Converts any color to a pastel shade.

document.addEventListener('DOMContentLoaded', () => {
    applyPastelColor('.card', '#4287f5'); // Apply pastel color to elements with class "card"
});

button animation classes

`btn-lift, btn-shadow-lift, btn-slide-fill`

Applies an aesthetic and simple button animation to a button class.

<button class="btn-2">Click me!</button>
<div class="btn-shadow"></div>

These are just a few examples of the utility functions provided by croffle-css. For a complete list of available functions and their usage, please refer to the official documentation.