Getting started

In this section, we'll install and connect EffCSS to your page. Then we'll write a simple stylesheet maker function and apply it.

Install

Type in your terminal:

# npm
npm i effcss

# pnpm
pnpm add effcss

# yarn
yarn add effcss

Connect

To use EffCSS you need to get a Style provider. Just call useStyleProvider function:

import { useStyleProvider } from 'effcss';

const provider = useStyleProvider({
    // you can pass custom settings here
});

Style provider can be configured. See all the available settings and attributes in the corresponding section.

Use

CSS stylesheet can be created by StyleSheet maker. It is just a function that should return object or string with styles:

import { TStyleSheetMaker } from 'effcss';

export const maker: TStyleSheetMaker = () => {
    const flexColumn = {
        display: 'flex',
        flexDirection: 'column',
    };
    return {
        html: {
            fontSize: '16px',
        },
        '.card': {
            width: '10rem',
            ...flexColumn,
            '.card__header': {
                height: '2rem',
            },
            '.card__body': flexColumn,
            ':hover': {
                borderRadius: '1rem',
            },
        },
    };
};

Please note that CSS property names can be described in camelCase style.

Then use provider to add this stylesheet to the page using:

import { useStyleProvider } from 'effcss';
import { maker } from './maker';

const provider = useStyleProvider();
provider.use(maker);

Congratulations! Your styles have been applied to the page. Simple, isn`t it?

In fact, EffCSS can simplify your stylesheet makers via utilites argument. See the following section for details.