Başlarken

Bu bölümde, EffCSS'i yükleyip sayfanıza bağlayacağız. Ardından, basit bir stil sayfası oluşturma fonksiyonu yazıp bunu uygulayacağız.

Yükle

Terminalinize şunu yazın:

# npm
npm i effcss

# pnpm
pnpm add effcss

# yarn
yarn add effcss

Bağlantı

EffCSS kullanmak için bir Style provider edinmeniz gerekir. Bunun için sadece useStyleProvider fonksiyonunu çağırmanız yeterlidir:

import { useStyleProvider } from 'effcss';

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

Style provider yapılandırılabilir. Mevcut tüm ayarları ve öznitelikleri ilgili bölümde inceleyebilirsiniz.

Kullanım

CSS stil sayfası 'StyleSheet maker' tarafından oluşturulabilir. Bu yalnızca nesneyi veya dizeyi stillerle döndürmesi gereken bir işlevdir:

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',
            },
        },
    };
};

CSS özellik adlarının camelCase stilinde yazılabileceğini lütfen unutmayın.

Ardından, bu stil sayfasını sayfaya eklemek için sağlayıcıyı (provider) şu şekilde kullanın:

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

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

Tebrikler! Stilleriniz sayfaya uygulandı. Basit, değil mi?

Aslında EffCSS, utilities argümanı sayesinde stil sayfası oluşturma sürecinizi basitleştirebilir. Ayrıntılar için sonraki bölüme göz atın.