CSSify

Inspiration

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.