Hey!
I have been working on a CSS library called FluidCSS, and after a fortnight of hard-coding, v0.5 is here!
Ideals behind FluidCSS
FluidCSS is a CSS library designed for customisability, and is especially aimed at designers/developers who want to quickly make a working prototype of their design.
Which means, it has all the stuff you might need, like toggle switches, custom not-ugly checkboxes, radio buttons, modals, etc.
Another highlight is full customisability with css variables without any preprocessors [like sass, less, etc.]
What is doesn't have is a solid layout system. And it was on purpose. This removes memorising of unnecessary class names and stuff that would require a steep learning curve.
If you are asking why FluidCSS exists when there are viable alternatives like Bootstrap or Bulma, there are two reasons:
A. It's like comparing Photoshop to MS Paint. Photoshop is an advanced tool with a really steep learning curve, but Paint is a simple and intuitive tool. If you want to quickly crop a photo, which one would you rather choose?
B. The second reason is rather personal: I was dead bored, thanks to COVID-19.
Here is the GitHub repo:
nikhilmwarrier
/
fluidcss
A minimal, hackable css library with responsive design in mind.
Jump to:
Shoutout to all stargazers and contributors!
FluidCSS
A minimal, hackable css library with responsive design in mind.
Project Roadmap
[After all the additons listed below are marked ready, FluidCSS will enter v0.5 (beta)]
Note:
*implies that that particular feature requires JS
| Feature | Status |
|---|---|
| Base CSS with CSS custom properties | Ready |
| Toggle switches | Ready |
| Primary and Secondary buttons | Ready |
| Navbar | Ready |
| Dropdown Navigation* | Ready |
| CSS Font Variables | Ready |
| Google Material Icons | Ready |
<aside> element for fixed sidebar |
Ready |
| Documentation base template | Ready |
| Custom Scrollbar | Ready |
<code> element customization |
Ready |
| Checkboxes | Ready |
| Radio Buttons | Ready |
| Pure CSS Tooltips | Ready |
<form> and <input>* |
Ready |
| Pure CSS Modal | Ready |
Fulscreen templates using <section>
|
Ready |
CSS variable for border-radius property |
Ready |
Contribution Guidelines
- Start by forking this repo
- Check the Project Roadmap for features that have to be implemented
- If you want to add a new feature…
The project is live at https://nikhilmwarrier.github.io/fluidcss
Contributions very wholehartedlly welcome!
PS: Also, be sure to check out the animated gradient on the Homepage!
Some Screenshots:
Discussion (0)