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.
nikhilmwarrier
/
fluidcss
A minimal, hackable css library with responsive design in mind.
FluidCSS v0.7
Welcome to FluidCSS v0.7!
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!
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.
Top comments (18)
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.
It's not about file size. It's about convenience and customisation, though file size is a factor...
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.
Nope. The other way round. Focusing more on components.
PurgeCSScan 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.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.
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/
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.
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?
Hey Francis Rubio!
Glad you liked it! Currently I am planning to integrate Dark Mode. Your contribution will be really helpful!
Thank you!
Could you please let me know by opening an issue in GitHub?
Done! :D
Hey! i like the idea, can you provide some docs in the Github readme to tweak it out?
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!
Docs page is getting a 404
Umm it's not ready yet... It will be done soon
Docs pags has error
Hey! The docs page isn't quite ready yet. I am working on it and will let you know when it's done!