DEV Community

Cover image for Inviting frontend devs to FluidCSS!
nikhilmwarrier
nikhilmwarrier

Posted on • Updated on

Inviting frontend devs to FluidCSS!

FluidCSS

Hey there!

I used to use stuff like Bootstrap and other CSS libraries, but I noticed that there were a lot of stuff that actually wasn't used, but negatively contributed on file size and loading speeds.

Check out this video from Gary Simon at Design Course. This video goes more in-depth on this particular topic, and is one of my sources for inspiration.


Due to these reasons, I decided to create a frontend CSS framework that was focused on customisability and speed, and removing stuff that won't be used.

After a lot of abstract thoughts, I created FluidCSS.

FluidCSS is designed to be easy to customize, and has all the basic stuff you will need, but you must code everything else yourself.

For example, there is a class to create a toggle switch, but there is no grid layout system.

This drastically changes everything.

For one, the file size is a lot less.
Also, beginner developers will not be overwhelmed by the CSS and it will encourage them to tweak the styles.

It will also help more experienced developers to rapidly prototype their designs without worrying about re-creating the same old components or adding a new color scheme.

GitHub logo nikhilmwarrier / fluidcss

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

FluidCSS v0.7

Welcome to FluidCSS v0.7!

FluidCSS Banner

Changelog

This is a complete rewrite and overhaul. Some key changes are underlined below:

  • New Build System

    FluidCSS is now written in Sass! [More specifically SCSS] (This was mainly due to maintainability issues while writing a big library in vanilla CSS.)

  • We now have a Responsive Grid system!
  • Added a better button ripple animation [as seen in Material Design]

Shoutout to all stargazers and contributors!

Forkers repo roster for @nikhilmwarrier/fluidcss

Stargazers repo roster for @nikhilmwarrier/fluidcss




Be sure to share your opinions in the comments secton!

PS: I really need contributors to this project URGENTLY!!!

EDIT:
Everyone is commenting about PurgeCSS. I actually meant to make something that can easily be customized, but provides enough components, like toggle switches, so that the developer can focus on more client-specific things like layouts and save time, but not end up with a generic bootstrapped website.

Discussion (18)

Collapse
iruoy profile image
Youri Wijnands • Edited on

This is literally fixed by PurgeCSS already.

It'll let you use any CSS framework you like and when you generate a production build it'll remove all the things you didn't use.

It's even built into TailwindCSS: tailwindcss.com/docs/controlling-f...

Edit: I'm not saying you shouldn't create a new CSS framework. If you have a good reason/idea you should. I'm just not sure what the direction is for this project. If it's only about file size PurgeCSS is the solution.

Collapse
nikhilmwarrier profile image
nikhilmwarrier Author

It's not about file size. It's about convenience and customisation, though file size is a factor...

Collapse
dennisfrijlink profile image
Dennis Frijlink • Edited on

I recommend using PurgeCSS. It's compatible with almost every framework/library and works perfect.

Maybe it's an idea to make a minimal library for pure layout tools instead of components. Think of useful sass mix-ins, responsive flex columns, defined breakpoints and so on.

For example: github.com/dennisfrijlink/flexboxgrid. It is a small css file based on the columns of bulma. Perfect for making a responsive website. With PurgeCSS I delete the classes I don't use.

Collapse
nikhilmwarrier profile image
nikhilmwarrier Author

Nope. The other way round. Focusing more on components.

Collapse
louislow profile image
Louis Low • Edited on

PurgeCSS can strip down any excessed CSS libraries or frameworks. Don't care if the CSS file size is 100GB. It's even built into Yogurt CSS as well.

Collapse
xyn profile image
Mydrax

This kind of project would really benefit from a demo site, and I feel like you need to concentrate a little more on docs and a roadmap so that contributors can get behind the idea.

It sounds like a really cool project to work on, because I've faced a lot of the same issues when making rapid prototypes, you might not want a component framework and at the same time smthing like tailwind can get a little testy once you have all these class names so you need something else to make it neat.

Collapse
nikhilmwarrier profile image
nikhilmwarrier Author

Hey Mydrax!
Glad you liked it! Roadmap is on the way, along with some docs, and the demo site is live! nikhilmwarrier.github.io/fluidcss/

Collapse
nikhilmwarrier profile image
nikhilmwarrier Author • Edited on

Everyone is commenting about PurgeCSS. I actually meant to make something that can easily be customized, but provides enough components, like toggle switches, so that the developer can focus on more client-specific things like layouts and save time, but not end up with a generic bootstrapped website.

Collapse
teacherbuknoy profile image
Francis Rubio

Hi, I think this is a great idea. I am interested in contributing. Are there any roadmaps or new feature that we want to work on here?

Collapse
nikhilmwarrier profile image
nikhilmwarrier Author

Hey Francis Rubio!
Glad you liked it! Currently I am planning to integrate Dark Mode. Your contribution will be really helpful!
Thank you!

Collapse
nikhilmwarrier profile image
nikhilmwarrier Author

Could you please let me know by opening an issue in GitHub?

Collapse
teacherbuknoy profile image
Francis Rubio

Done! :D

Collapse
nosoycesaros profile image
Cesar Zapata

Hey! i like the idea, can you provide some docs in the Github readme to tweak it out?

Collapse
nikhilmwarrier profile image
nikhilmwarrier Author

Hey! The site is live at nikhilmwarrier.github.io/fluidcss/ !
Feel free to check it out. I'm writing the docs for this project currently, and it will be live soon!

Collapse
cwraytech profile image
Christopher Wray

Docs page is getting a 404

Collapse
nikhilmwarrier profile image
nikhilmwarrier Author

Umm it's not ready yet... It will be done soon

Collapse
_zoka profile image
Mahmoud Ibrahiam

Docs pags has error

Collapse
nikhilmwarrier profile image
nikhilmwarrier Author

Hey! The docs page isn't quite ready yet. I am working on it and will let you know when it's done!