Building Your First Open Source CSS Project: Lessons Learned and How to Avoid My Mistakes

So, you're thinking of creating your own open source project? That's awesome! I recently dove headfirst into building a CSS framework called Stratum, and while it didn't quite reach world domination, I learned a ton. This isn't a how-to guide as such, but more like a "how-not-to" guide based on my experiences. Learn from my mistakes and avoid the pitfalls of solo open source development!

The Allure of "Building My Own": Why I Created a CSS Framework

Like many developers, I had the urge to build something from scratch rather than relying on existing tools. Specifically, I wanted more control over my CSS. I was using Skeleton, a Tailwind-powered design system, but found myself using only a fraction of its components. The result of this endeavour was stratum, a minimalist css framework.

The Fun Part? Overambition and Scope Creep

My initial vision was grand: strip down Skeleton, add my own styles, create Svelte components, build a community. In short, a complete CSS framework. The goal was a minimalist css framework, but I had delusions of grandeur. Looking back, this was my first mistake. There's a huge difference between brainstorming and executing!

The Learning Curve: Monorepos, Tailwind, and Accessibility

I decided to "do it right," which meant diving deep into a whole host of new technologies. I was soon learning about :

• Monorepos: Setting them up and managing dependencies.
• Tailwind CSS: Creating custom utilities.
• Cross-browser compatibility: Ensuring consistent styling.
• Accessibility (A11y): Creating inclusive components. This part was fun, but also overwhelming.

Reality Check: Trimming the Fat From a CSS Framework

I quickly realized I was in over my head building my own css framework. I was the only developer and the workload was enormous. The issue tracker ballooned as I encountered new problems. To even finish the project, I regretfully made the decision to cut features. I abandoned the Svelte components plan; and eliminated entire projects.

Beyond the Code: The Unexpected Workload of Open Source

Releasing v0.1.0 felt like a victory—but quickly became bittersweet. I hadn't considered all the non-coding aspects of open source, namely:

• Automation: Version bumping and changelog generation
• Community Management: Handling contributions, PRs, and issues
• Promotion: Discord, YouTube, and project advertising
• Maintenance: Documentation and migration guides

I faced up to reality and realized it wasn't worth the effort that I was putting in for this pet project.

Lessons Learned: If I Were To Make A CSS Framework Again

Despite not achieving open-source fame, the experience was invaluable. If I were to tackle a similar project, here's what I'd do differently:

• Team Up: Even one extra developer can make a huge difference by offering insight and reducing workload.
• Be Realistic: Before even starting, assess the time and effort you can realistically dedicate to the project.

A Salute to Open Source Maintainers

My newfound respect for open source maintainers cannot be overstated. Sure, some are funded or gain reputation, but their work is still work. I want to thank all maintainers for their tireless contributions and promise to donate to projects that prove useful to me (when I'm not broke).

Even though Stratum didn't become the CSS framework of my dreams, I learned a lot and am happy using it for my personal projects.