DEV Community

loading...
Cover image for FluidCSS v0.5 released!

FluidCSS v0.5 released!

nikhilmwarrier profile image Nikhil M Warrier ・2 min read

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:

GitHub logo nikhilmwarrier / fluidcss

A minimal, hackable css library with responsive design in mind.

Jump to:

Shoutout to all stargazers and contributors!

Forkers repo roster for @nikhilmwarrier/fluidcss

Stargazers repo roster for @nikhilmwarrier/fluidcss

FluidCSS

FluidCSS_banner

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:

Alt Text

Alt Text

Alt Text

Alt Text

Alt Text

Discussion (0)

pic
Editor guide