BLICKCSS - A SMALL ~30kb
CSS LIBRARY

build great websites and web apps quickly and easily

To get started, paste the code above into your <head> tag.

What is it?

It is a lightweight (~30kb) and extremely powerful CSS library
that generates styles based on classes and special attributes.

class="m-10+20"

margin: 10px 20px

blickcss was developed primarily for runtime, so it is highly optimized and very fast,
generates styles in just a couple of ms (check console).
There is also a npm version

Write your own values, not just the predefined ones. Complete freedom.

Use classes to style your elements

class="w-2/3 h-100 bg-$green md:r-10 m-10+20"

.w-2\/3 {
    width: 66.67%;
}

.h-100 {
    height: 100px;
}

.bg-\$green {
    background: var(--green);
}

.m-10\+20 {
    margin: 10px 20px;
}

@media (min-width:768px) {
    .md\:r-10 {
        border-radius: 10px;
    }
}

Use a special attribute to work with text

Add styles to text using the attribute

text="24 $blue bold up center"

hello world

[text~="24"] {
    font-size: 24px;
}

[text~="$blue"] {
    color: var(--blue);
}

[text~="bold"] {
    font-weight: 700;
}

[text~="up"] {
    text-transform: uppercase;
}

[text~="center"] {
    text-align: center;
}

There is also an attribute for working with flexbox

Positioning of elements has become easier

flex="20 center end"

[flex] {
    display: flex;
}

[flex~="20"] {
    gap: 20px;
}

[flex~="center"] {
    justify-content: center;
    align-items: center;
}

[flex~="end"] {
    justify-content: flex-end;
}

Responsive

Most people use a mobile browser, so responsive design is a must.

If you want the styles to have a specific size, just add a number in front of it.
For example 512:bg-red or use variables, md:bg-red.
Use m-512 or m-md to make it display on screens smaller than that size.

class="850:bg-green lg:bg-blue"

@media (min-width:850px) {
    .\38 50\:bg-green {
        background: green;
    }
}

@media (min-width:992px) {
    .lg\:bg-blue {
        background: blue;
    }
}

States

There are also states, i.e. pseudo-classes and pseudo-elements
Just write before the style hover:bg-red, focus:b-2
But writing full names is too much text, it is better to use variables h:bg-red, f:b-2
Try hover and click

class="h:bg-green a:round"

.h\:bg-green:hover {
    background: green;
}

.a\:round:active {
    border-radius: 9999px;
}

Values

The values are not so simple either.
You can make CSS variables - bg-$foo, any percentage - w-2/5,
color transparency - c-red/50 and combine it all - border-2+solid+$baz/75

class="bg-$brand/85 w-2/5 m-1em+20"

.bg-\$brand\/85 {
    background: #00aa66d9;
}

.w-2\/5 {
    width: 40%;
}

.m-1em\+20 {
    margin: 1em 20px;
}

These are not all the features of BlickCss,
please refer to the documentation for more information.

See Docs

Try it out!

Open in Fullscreen