# Attributes

In blickcss, by default, you can use 3 attributes

# text

This attribute is used for working with text, you can easily set the font size, color, weight, and other parameters.

<div text="20 red bold center"></div>

If you write any number, it can be a simple 20 or together with the 20px unit, as long as the first character is a number, then it will be font-size .

But sizes like 100, 200, 300, ... won't work because they are used for font-weight , you can get around it by writing 100px .

If you write a non-numeric value, such as red , #f0f , $blue , it will be color .

If you write 24/500 or 24/500/36 , it will create several additional properties.

<div text="... 24/500 ..."></div>
-------------
font-size: 24px;
font-weight: 500;

<div text="... 24/500/36 ..."></div>
----------------
font-size: 24px;
font-weight: 500;
line-height: 36px;

If we use red/50 it will mean the transparency of the color

<div text="... red/50 ..."></div>
-------------
color: #ff000080;

Works the same way as color/opacity, but only for color

Everything else is prescribed values that are taken from blick.attr.text

# flex

The flex attribute is used to work with display: flex .

<div flex="15 col center"></div>

If you write any number, it can be a simple 15 or together with the unit 15px , as long as the first character is a number, it will be gap .

<div flex="15 col center"></div>
--------------------
gap: 15px;
flex-direction: column;
justify-content: center;
align-items: center;

Everything else is prescribed values that are taken from blick.attr.flex

# grid

The grid attribute is used to work with display: grid .

<div grid="30 cols-2 rows-3"></div>

If you write any number, it can be a simple 30 or together with the unit 30px , as long as the first character is a number, it will be gap .

<div grid="30 cols-2 rows-3"></div>
--------------------
gap: 30px;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);

Everything else is prescribed values that are taken from blick.attr.grid

# Use with states and media queries

You can very easily use these attributes in combination with states and media queries

<div text="20 500:red bold sm:center"></div>
<div flex="15 m-md:col center"></div>

# Additionally

For example, so that you can write

<div flex="20+30"></div>

This will mean gap: 20px 30px , that is, everything is the same as in values

You can add custom attributes, read more about it here custom attributes