chromacss

v1.0.9

Published

a year ago

A vibrant utility-first CSS framework

0High
0Medium
0Low

burhanuddinhamzabhai

css utility-first framework scss postcss frontend

ChromaCSS

ChromaCSS is a vibrant utility-first CSS framework designed for rapid and flexible frontend development. Built with Sass and PostCSS, it offers a modern developer experience with features such as Just-In-Time (JIT) utilities, customizable themes, and advanced responsiveness.

Features

Utility-First: A rich set of utilities to build your UI faster.
Customization: Easily override themes, colors, spacing, and more.
Sass-Powered: Full SCSS support for modular and reusable design.
PostCSS Workflow: Optimized for performance with PurgeCSS and CSSNano.
Responsive Design: Grid, flexbox, and utilities for modern layouts.

Installation

NPM

npm install chromacss

Yarn

yarn add chromacss

CDN (Production)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chromacss@latest/dist/style.css">

Usage

Basic Setup

Import ChromaCSS into your project:
```
import 'chromacss/dist/style.css';
```

Add utilities directly in your HTML:

<div class="bg-blue-500 text-white p-4">
    Hello, ChromaCSS!
</div>

Theming

ChromaCSS supports theming through its SCSS variables:

// src/scss/base/_variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;

Rebuild CSS to reflect changes:

npm run build:css

Commands

Here are some useful scripts included in package.json:

Build CSS:
```
npm run build:css
```
Watch for Changes:
```
npm run watch
```
Lint SCSS:
```
npm run lint
```
Run Tests:
```
npm run test
```

Configuration

ChromaCSS allows you to generate a configuration file (chroma.config.js) for custom setups.

Generating `chroma.config.js`

Run the following command to generate the default chroma.config.js:

npm run build:config

Customizing `chroma.config.js`

Edit the file to modify your design tokens, breakpoints, and other settings:

module.exports = {
    theme: {
        colors: {
            primary: '#3498db',
            secondary: '#2ecc71',
            danger: '#e74c3c',
        },
        spacing: {
            sm: '8px',
            md: '16px',
            lg: '24px',
        },
    },
    variants: {
        extend: {
            backgroundColor: ['hover', 'focus'],
            textColor: ['hover', 'focus'],
        },
    },
    purge: ['./src/**/*.html', './src/**/*.js'],
};

JIT Mode

ChromaCSS supports Just-In-Time (JIT) utility generation to ensure only the utilities you use are included in your final CSS file.

Enabling JIT Mode

To enable JIT mode, simply run the jit.js script:

npm run jit

This dynamically generates utilities based on your project's HTML files and significantly reduces the final CSS size.

Folder Structure

chromacss/
├── bin/                # CLI tools
├── dist/               # Compiled CSS
├── docs/               # Documentation files
├── src/
│   ├── scss/           # SCSS source files
│   ├── components/     # UI components
│   ├── utilities/      # Utility classes
├── theme/              # Default themes & presets
└── test/               # Unit tests

Contributing

We welcome contributions! Please submit bugs or feature requests via GitHub Issues.

License

ChromaCSS is proprietary software. Redistribution or modification is prohibited without prior permission from the author.

For inquiries, contact Burhanuddin Mulla Hamzabhai.