Small library for quickly creating styles via classes and special attributes. An alternative to Tailwind.
Just add the script to <head>, that's all you need
<scriptsrc="https://unpkg.com/blickcss"></script>OR
Just 2 commands to start using
npm i blickcssnpx blickWEBSITE - Visit the website for more information
DOCS - Read the documentation to get started
PLAYGROUND - Try it right now
- 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.
tailwind: <divclass="m-[25px]">
blickcss: <divclass="m-25">
tailwind: <divclass="text-[2em]">
blickcss: <divclass="fs-2em or text-2em">
tailwind: <divclass="text-[#ff0000]">
blickcss: <divclass="c-#ff0000 or text-#ff0000">
tailwind: <divclass="py-[10px] px-[30px]">
blickcss: <divclass="p-10+30">
tailwind: <divclass="bg-[--foo]">
blickcss: <divclass="bg-$foo">
tailwind: <divclass="w-[calc(23_/_85_*_100%)]">
blickcss: <divclass="w-23/85">
WITH USING ATTRIBUTES:
tailwind: <divclass="text-[23px] text-[#ff0000] font-bold text-center">
blickcss: <divtext="23 #ff0000 bold center">
tailwind: <divclass="flex gap-[15px] flex-col md:flex-row justify-center align-center">
blickcss: <divflex="15 col md:row center">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.
BlickCSS is released under the MIT License.
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!