BlickCss - Best Tailwind Alternative

# Configuration

Here we come to the most interesting part. To be able to customize blick, you need to know how it works. blick is divided into 2 parts:

Functions that are needed to do the work, they perform parsing, create styles, analyze the code, and so on
A large object that contains everything you need to do the function, you can change this object as you like.

*If you are using the cdn version, then go to the console and write blick, press enter and you will see this object

That is, if you need to change something, just write

blick.class.flex = "new value"
blick.screen.md = 850
blick.time = true

But this is not very convenient to configure everything in one place, I recommend using blick.config({...}) , it does exactly the same thing, but it's just easier to write

blick.config({
    class: {
        flex: "new value"
    },
    screen: {
        md: 850
    },
    time: true
})

Now let's talk about what blickcss has to offer. The examples below show the default values.

# class

class: {
    m: { ... },
    bg: { ... },
    flex: { ... },
    ...
}

This is the object where you can change the classes used in blickcss.
Before changing classes read how to create them structure

# attr

attr: {
    text: { ... },
    flex: { ... },
    grid: { ... },
}

This is an object where you can change and add attributes used in blickcss.
Important!!! Before changing attributes, read how to create them structure
More

# states

states: {
    h: ":hover",
    c: ":checked",
    f: ":focus",
    ...
    dark: (sel) => ".dark " + sel
}

Here you can change and add abbreviations for states
Read more

# screen

screen: {
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200
}

Here you can change and add screen sizes
Read more

# colors

colors: {
    black: "#000",
    white:"#fff" ,
    red: {
        def: "#ef4444"
        1: "#fee2e2",
        2: "#fca5a5",
        ...
    },
    ...
}

Here you can change and add colors.
These colors are converted to CSS variables

:root{
    --black: #000;
    --white: #fff;
    --red: #ef4444;
    --red-1: #fee2e2;
    --red-2: #fca5a5;
    ...
}

They are also used when you set the transparency of a color

class="bg-$red/50" // background-color: #ef444480;

font: {
    main:  "system-ui,-apple-system,sans-serif",
    serif: "serif",
    mono:  "monospace",
    sans:  "sans-serif",
}

Here you can change and add fonts that you will use.
Just like colors, these fonts are converted to CSS variables

:root{
    ...
    --font-main: system-ui,-apple-system,sans-serif;
    --font-serif: serif;
    --font-mono: monospace;
    --font-sans: sans-serif;
    ...
}

--font-main is used as the default font.

# reset

reset: "*,::after,::before{box-sizing:border-box;..."

Рядок який додається на початок, відповідає за скидання та нормалізацію стилів. Ви можете написати свій або просто зробити його як null щоб видалити його.

# root

root: true

Responsible for adding colors and fonts to :root , if set to false then :root will not be added, but you can still use the colors bg-$red/50

# maxPrefix

maxPrefix: "m-"

String used to set max-width in media queries

# autoTheme (experimental)

autoTheme: false

Parameter responsible for automatic installation of the theme based on the system theme. If set to true , then <html> will be set to dark .
*Works only with the cdn version.

# autoFlex

autoFlex: true

If set to true , the following styles will be added to <style>

[class*="flex-"],
[class*="jc-"],
[class*="ai-"],
[class*="gap-"]{
    display:flex
}

This means that display: flex will be applied automatically to elements that have classes flex- , jc- , ai- or gap- .

# wrapper

wrapper: ".wrapper"

Selector for wrapper

# time

time: false

If set to true , the console will display the time for which blickcss generates styles (works only in the CDN version).

# version

version: "1.2.3"

Read only. blick.version

# Read next:

Functions
Properties
Values
States Media queries

BlickDocs