Inviting frontend devs to FluidCSS!
nikhilmwarrier

nikhilmwarrier @nikhilmwarrier

About: Developer and FOSS enthusiast

Location:
Middle of Nowhere
Joined:
Sep 24, 2020

Inviting frontend devs to FluidCSS!

Publish Date: Nov 12 '20
34 18

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.

Comments 18 total

  • Francis Rubio
    Francis RubioNov 12, 2020

    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?

    • nikhilmwarrier
      nikhilmwarrierNov 12, 2020

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

    • nikhilmwarrier
      nikhilmwarrierNov 12, 2020

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

  • Youri Wijnands
    Youri WijnandsNov 12, 2020

    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.

    • nikhilmwarrier
      nikhilmwarrierNov 12, 2020

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

  • Louis Low
    Louis LowNov 12, 2020

    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.

  • Dennis Frijlink
    Dennis FrijlinkNov 12, 2020

    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.

    • nikhilmwarrier
      nikhilmwarrierNov 12, 2020

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

  • nikhilmwarrier
    nikhilmwarrierNov 12, 2020

    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.

  • Mahmoud Ibrahiam
    Mahmoud IbrahiamNov 12, 2020

    Docs pags has error

    • nikhilmwarrier
      nikhilmwarrierNov 13, 2020

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

  • Cesar Zapata
    Cesar ZapataNov 12, 2020

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

  • ItsThatHexagonGuy
    ItsThatHexagonGuyNov 12, 2020

    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.

  • Christopher Wray
    Christopher WrayNov 12, 2020

    Docs page is getting a 404

    • nikhilmwarrier
      nikhilmwarrierNov 13, 2020

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

Add comment