loading...
Cover image for Inviting frontend devs to FluidCSS!

Inviting frontend devs to FluidCSS!

nikhilmwarrier profile image Nikhil M Warrier Updated on ・2 min read

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.

Note: If you are looking for the website source code, it is in the gh-pages branch.

FluidCSS

FluidCSS_banner

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

Visit the site for more info


Contributions wholehartedly welcome!





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

pic
Editor guide
Collapse
iruoy profile image
Youri Wijnands

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
Nikhil M Warrier Author

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

Collapse
dennisfrijlink profile image
dennisfrijlink

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
Nikhil M Warrier Author

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

Collapse
loouislow profile image
Loouis Low

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
Nikhil M Warrier 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
Nikhil M Warrier Author

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
Nikhil M Warrier 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
Nikhil M Warrier 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
Nikhil M Warrier 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
Nikhil M Warrier Author

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

Collapse
officialzoka profile image
Mahmoud Ibrahiam

Docs pags has error

Collapse
nikhilmwarrier profile image
Nikhil M Warrier Author

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