# Introduction
BlickCss is a simple and small library for styling with classes and attributes. An alternative to TailwindCss. Focused on working with arbitrary values. Very easy to use, customize and extremely flexible.
# Installation
<script src="https://unpkg.com/blickcss@2.1.12"></script>
To start using it. Just put this script in <head> . That's all you need. Try it!
You should have something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/blickcss@2.1.12"></script>
<script>
blick.config({
// your configuration
})
</script>
</head>
<body>
<div class="sq-100 bg-$red"></div>
</body>
</html>
Recommend using this method
# Installing via NPM
You only need 2 commands to get started.
$ npm i blickcss
$ npx blick
After that, the script will create output.css , blick.config.js and start watching all html files in the src folder, of course, you can customize inputs and output file, disable watching or minify the output code.
# Playground
To avoid fiddling with files and commands, you can try it in browser
Play# Features and differences from TailwindCss
As mentioned earlier, this is an alternative to TailwindCss, so let's look at the differences.
1. Approach to writing classes. TailwindCss provides you with a theme where static sizes are specified, they have a gradation of 0.125rem , this has always been a strange decision for me. BlickCss has almost no static sizes, here you define what you want, w-100 means 100px , everything is clear at a glance.
2. Using attributes. To avoid writing too much code in classes, you can split it into special attributes
<div class="gap-20 flex-col flex-center fs-24 c-#fff m-10+20">
...
</div>
<!-- the same but using attributes -->
<div flex="20 col center" text="24 #fff" class="m-10+20">
...
</div>
3. Best practice with css variables. bg-$brand .
Learn more
4. The size of the library, it weighs approximately 30kb so it will not affect the performance and loading of your site. It's as if it's not there. It is also optimized, so I can safely recommend it for cdn version.
5. A special template for classes, if you want to change or add a new class, then write down the following
<script>
blick.config({
class: {
flex: "display: flex"
}
})
</script>
<div class="flex"></div> <!-- display: flex -->
But this is too simple and static, so we'd rather write it like this
<script>
blick.config({
class: {
m: {
_prop: "margin: $",
_unit: "px",
_vals: {
full: "100%"
},
foo: "margin: something"
}
}
})
</script>
<div class="m-20"></div> <!-- margin: 20px -->
<div class="m-3em"></div> <!-- margin: 3em -->
<div class="m-full"></div> <!-- margin: 100% -->
<div class="m-foo"></div> <!-- margin: something -->
This template is already much better, here instead of $ you will get your value and much more
This is only a small part of the features of BlickCss. Check out the other pages for more information.
# Read next:
Properties
Values
States
Media queries
More about classes
More about attributes
For advanced
Configuration
Parser
Functions
Structure of classes and attributes