Blickcss
A small library for quick styling
Small library for quickly creating styles via classes and special attributes. An alternative to Tailwind.
Getting Started
Installation
Just add the script to <head>, that's all you need
<script src="https://unpkg.com/blickcss"></script>
OR
Just 2 commands to start using
npm i blickcss
npx blick
WEBSITE - Visit the website for more information
DOCS - Read the documentation to get started
PLAYGROUND - Try it right now
Features
- Converts class names to CSS properties based on a predefined object.
- Supports special attributes like flex, text, and grid for enhanced styling.
- Handles pseudo-classes and media queries.
- Provides dynamic values, constants, CSS variables, and percentages for flexible styling.
- Easy configuration options to customize the conversion object.
BlickCss vs Tailwind
tailwind: <div class="m-[25px]">
blickcss: <div class="m-25">
tailwind: <div class="text-[2em]">
blickcss: <div class="fs-2em or text-2em">
tailwind: <div class="text-[#ff0000]">
blickcss: <div class="c-#ff0000 or text-#ff0000">
tailwind: <div class="py-[10px] px-[30px]">
blickcss: <div class="p-10+30">
tailwind: <div class="bg-[--foo]">
blickcss: <div class="bg-$foo">
tailwind: <div class="w-[calc(23_/_85_*_100%)]">
blickcss: <div class="w-23/85">
WITH USING ATTRIBUTES:
tailwind: <div class="text-[23px] text-[#ff0000] font-bold text-center">
blickcss: <div text="23 #ff0000 bold center">
tailwind: <div class="flex gap-[15px] flex-col md:flex-row justify-center align-center">
blickcss: <div flex="15 col md:row center">
Conclusion
BlickCSS is a beginner-friendly JavaScript library that simplifies applying CSS styles using class names. With its intuitive syntax and support for special attributes, pseudo-classes, and media queries, BlickCSS empowers developers to easily create stylish and responsive web designs.
For more information and advanced usage, please refer to the BlickCSS Site.
License
BlickCSS is released under the MIT License.
Contact
If you have any questions, suggestions, or feedback, please feel free to reach out to us at telegram or e-mail.
Happy styling with BlickCSS!
