Introducing utility CSS — A very small CSS library.
A minimal CSS library that consists of small classes to make modern components of your website.
Why we made this
It started with a plan to make a CSS library that is highly reusable and immutable at the core. Instead of looking for the fancy features like modals and dropdowns. We tried to make something is easy to integrate into projects. It is so small that you can learn the whole library in minutes (look at Cheat-sheet).
looks bookish, it will because it is extracted from README.md.
let me tell you what really happened.😉
A couple of days ago, I saw an article [link] about SoC (Separation of Concerns). It basically says that you should separate your views(HTML), Styles (CSS) and behavior(JavaScript) in different files.
The author was saying about how this makes CSS less re-usable because they become, for example - the button class has some padding and margin classes but in a card or any other class they are duplicated and how difficult it becomes to change them. soon they become legacy and create bloat in websites.
I was so influenced that I tried to make something like that on my own. This was tough at first, but after that period I made it and in coming few days I wrote some documentation for it. It was not a big enough 2.5KB minified so I don’t need to write a book about it.
Why I’m telling this😁
that’s because when I was playing with utility.css [link]. I was totally amazed how good thing I have made. It can be learned in minutes, used easily, doesn’t clash with other libraries and easily used in projects. just look at this:
I also made some buttons, because as I told you above that we use composition of common CSS properties in short we use classes for padding, margin, background for buttons:
As you can see colors are inspired from Bootstrap.
I also made some notification boxes.
you may have guessed the class-names convention but still, I need to tell you:
- All utility classes start with
—for example:-px-smfor padding small on X axis. - All hover classes start with
-h-{property-name}for example:-h-shadowfor shadow on hover. - we have some color classes for a color like:
-bg-infofor blue background color and-txt-dangerfor red text color.
What about using it in projects✌
Using it in projects is really easy, just follow the steps:
- add your CDN: https://gitcdn.xyz/repo/itsjzt/utility-CSS/master/build/utility.css in your HTML.
- now you can refactor your project to use utility CSS
- It is recommended to use normalize.css and some grid library because we don’t support it yet.
Can I help you? 🙋
Yeah! sure. We still have a lot to get done now and we will genuinely appreciate if someone can give their valuable time to our project. We will try to be as helpful as possible for beginners. be sure to read our contribute.md.You can read our todo.md and try out hands on the code or docs.
GitHub Repository: https://github.com/itsjzt/utility-CSS
if you appreciate my efforts 👏 clap for this or share, so other can find it helpful too.
