JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 31
  • Score
    100M100P100Q43493F
  • License MIT

a lightweight CSS framework to design aesthetically-pleasing websites

Package Exports

  • croffle-css
  • croffle-css/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (croffle-css) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

croffle-css

a lightweight CSS framework to design aesthetically-pleasing websites

header

npm version install size npm bundle size npm downloads

Vercel

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.

Contributing

If you would like to contribute to croffle-css, please follow the guidelines outlined in the CONTRIBUTING.md file.

License

croffle-css is released under the MIT License.