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
- 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) : https://youtu.be/TSHjpUm7TlY
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.)
We generated the styling framework used in the website using CSSify only!