It is a lightweight (~30kb) and extremely powerful CSS library
that generates styles based on
classes
and special
attributes.
class="h-123"
->
height: 123px
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
Use classes to style your elements
View moreclass="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;
}
}
Add styles to text using the attribute
View moretext="24 $blue bold up center"
[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;
}
Positioning of elements has become easier
View moreflex="20 center end"
[flex] {
display: flex;
}
[flex~="20"] {
gap: 20px;
}
[flex~="center"] {
justify-content: center;
align-items: center;
}
[flex~="end"] {
justify-content: flex-end;
}
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;
}
}
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;
}
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;
}