# Structure of classes and attributes

# Key

flex: 'display:flex'

The key of the object defines its name, if we write class="flex" we will get display: flex .

But this is too simple, if you need to set values, for this we have to write the class as an object

# Prop & Unit

m: {
    _prop: "margin:$",
    _unit: "px"
}

We can use different parameters in the object, one of them is _prop .
Parameters that start with _ are service parameters

_prop is responsible for dynamic values, it can contain $ which will be replaced by your value

m-25     = margin: 25px
m-auto   = margin: auto
m-20+30  = margin: 20px 30px
m-1em+30 = margin: 1em 30px

_unit is added to a separate value if it is a number

# multi values

mx: {
    _prop: `
        margin-left:$1;
        margin-right:$2
    `,
    _unit: "px"
}

Together with $ you can use a number that indicates the order of the values written with +

mx-10    = margin-left: 10px; margin-right: 10px
mx-10+20 = margin-left: 10px; margin-right: 20px

_unit can be an array, then each element will correspond to a number near $

_unit: ['px', 'em']

mx-10    = margin-left: 10px; margin-right: 10px
mx-10+20 = margin-left: 10px; margin-right: 20em

But again, if the value contains anything other than numbers, then _unit will not be added

mx-1em    = margin-left: 1em;  margin-right: 1em
mx-10+20% = margin-left: 10px; margin-right: 20%

# Vals

w: {
    _prop: "width:$",
    _unit: "px",
    _vals: {
        full: "100%"
    }
}

_vals are some ready-made values that replace $ , they have a higher priority over dynamic values, which means that the script will first look for values in _vals

w-full = width: 100%
w-500  = width: 500px

# One

flex: {
    _prop: "gap:$",
    _unit: "px",
    _one: "display:flex"
}

_one will be used if there is no value, that is, you just write the name of the key

flex-15 = gap: 15px
flex    = display: flex

# Selector

space: {
    _prop: "margin-left:$",
    _unit: "px",
    _selector: "$ > * + *"
}

Rarely, but if you need to define a selector, there is a _selector parameter, here also $ will be replaced by a selector

space-10 = .space-10>*+* { margin: 10px }

# Join

tf: {
    ...
    scale: {
        _prop: "transform:scale($)",
        _join: ", "
    }
    ...
}

But + can be more than just a space, it can be changed to anything. For example, in some cases, values separated by a comma

tf-scale-1+2 = transform: scale(1, 2)

# Function

text: ({ value }) => {
    return {
        _prop: +value[0] ? "font-size: $" : "color: $",
        _unit: "px",
        ...
    }
}

instead of an object with the above parameters, you can use a function that will return the same object, which gives you unlimited freedom in creating styles

text-24  = font-sise: 24px
text-red = color: red

# Nested classes

flex: {
    _prop: "gap:$",
    _unit: "px",
    _one: "display:flex",
    col: "flex-direction:column",
    row: "flex-direction:row",
    foo: {
        _prop: "test:$",
        baz: "something: 123"
    }
}

In addition to special parameters, you can write absolutely any other parameters next to it, it will be a nested class, they have the same structure as described above, and to get to the next one you just need to write it as a chain separated by -

flex         = display: flex
flex-20      = gap: 20px
flex-5em     = gap: 5em
flex-col     = flex-direction: column
flex-foo-15  = test: 15
flex-foo-baz = something: 123

# Attributes

The structure of the attributes is the same as listed above, but there is also _else , this is a function that is executed when the script goes through all the options and finds nothing

flex="20"

Here 20 is a dynamic value generated by the _else function

The attribute structure has one more additional parameter _using , it adds styles if the attribute is used For example, the flex attribute has the following parameter

_using: "display:flex"

You can add your own attributes inside a config

blick.config({
    attr: {
        color: {
            _using:"font-size:20px",
            _else: function({ style }){
                return "color:" + style
            },
            foo: {
                _prop: "test:$"
            },
            baz: "something: 123"
        }
    }
})

then use it like

color="red foo-123 baz"
------------------------
red     = color: red
foo-123 = test: 123
baz     = something: 123

Learn more about the existing attributes