Using CSS frameworks always come with a trade-off - you need to choose between a steep learning curve, limited feature sets, and large file sizes. While preprocessors like Sass improved modularity, overcoming all three obstacles at once seems to be a challenge. That is, until now.

What it does

CSSify provides a solution to all these problems, by offering a rock solid base which is customisable in all it's aspects. Common tasks such as defining layouts, brand colors, spacing utilities, breakpoints, typography, etc can now be completed with a few clicks with a live preview- enormously boosting your creative speed.

How we built it

Our team functioned closely, by staying in touch through GitHub, Discord and video conferences. We worked parallely to build the backend and front-end, both of which posed their own difficulties. The front-end reactive system is built on React and Recoil, while the backend uses Express. All the form handling was done through React JSON Schema Form We hacked this together over the span of two-and-a-half days.

Challenges we ran into

One major problem was figuring out how to maintain a global state. However, we solved this problem using Recoil :D. Another blocker was the fact that SCSS does not support dynamic imports, so figuring out how to import exactly what the user wants was tricky.

Accomplishments that we are proud of

  • Figured out conditional imports in css which reduce the file size substantially
  • Created a minimal state management system using recoil
  • Managed to figure out a minimal and simplistic UI

What we learned

  • A deeper knowledge of React
  • The react recoil library
  • Working with React JSON Schema Form

Video Link (teaser + demo) :

What's next for CSSify

The possibilities are endless, here. However, on our todo list:

  • [ ] user-defined class-names
  • [ ] more variables for users to play with
  • [ ] generate custom web components (eg. for reactjs, vuejs, etc.)

Fun Fact

We generated the styling framework used in the website using CSSify only!

Built With

Share this project: