Creating my ideal CSS Framework: Cutestrap

Hello, who are you and what are you working on?

Hey there! I'm Tyler Childs and I've been doing web development since about 2007. For some fun perspective, IE7 was still fresh back then, Firefox wasn't doing silent updates and Chrome wasn't even released.

I'm currently working at Netflix on the Acquisition UI team, but my main passion and side project has been Cutestrap. From surviving clearfix and other CSS hacks to experiencing the advent of CSS3, and discovering the power of raw CSS in 2019, I'm just in awe of how far we've come. I want Cutestrap to be a reflection of what CSS can do in 2019.

Why did you start Cutestrap?

I originally created Cutestrap to be everything I wanted when starting a fresh side-project - completely decoupled from JavaScript, a solid visual foundation to work with semantic HTML or Markdown, and providing a few boilerplate classes and styles such as forms, grid, wrappers and utilities.

The latest version that was just released, took all of what I thought made the first iteration great and turned it up to 11. I added a bunch of documentation around some of the more hidden features but left the core styles and API very much the same. This is also when I switched away from Sass to pure CSS, since Custom Properties are more widely supported now, with about 85% global market share (and growing!).

What were the early days like?

The early days were really simple. Since Cutestrap was a project I was building for myself, I had no deadlines and no rigid structure to follow for what I built or why things were done a certain way other than "this is how I like things". I was just sitting in my bed coding when I had some free time because I found this project fun and useful.

When I was pretty happy with where I was at, I decided to get feedback and I posted it to Reddit, expecting harsh, critical and yet still misguided feedback. But people kinda liked it. So much so that someone else posted it over on Hacker News, where I got about 10k hits in one day and pretty close to 1k stars on GitHub shortly after.

How do you manage the workload and the community?

After Cutestrap went a little viral, there were quite a few issues that were opened on GitHub, people forking the repo, creating PRs and chatting on the Gitter I threw into the Readme. But I really dropped the ball on managing both the workload and the community because I just got overwhelmed.

The little project I built for myself had taken on a life of its own. People enjoyed it enough to want to help it along. They had use cases and issues I hadn't even considered. Some of them really challenged some fundamentals of what I had built.

What is an abstraction that belongs in my framework versus what is an implementation detail for a specific project? That was the main question I struggled with for years as I watched the community fall away and people wonder if Cutestrap was dead.

What are the biggest obstacles you've had to overcome?

The biggest obstacle for me was finally settling on what Cutestrap is and what it aims to solve. It took years to get there, from being busy with work or life or whatever.

So deciding the what was the first part, but the real challenge is the how. I had the first iteration as a foundation, but the landscape of CSS frameworks has completely changed, with many people leaning towards CSS-in-JS solutions (such as Emotion or Styled Components) or atomic CSS (like Tailwind or Tachyons).

At the end of the day, I decided Cutestrap is still a traditional CSS framework, with the real power coming from CSS itself in the form of Custom Properties. To me, the biggest obstacle going forward is fighting for CSS in general.

How have you grown Cutestrap's usage?

I was really lucky that the first version went viral. I didn't need to do anything to grow the usage back then, but I should have been more active in engaging my contributors instead of neglecting the project entirely.

This time around with v2 I posted it to a few places, like Reddit and Hacker News, but it's not the same instant explosion like it had before. I've been following up with publications that had built articles around Cutestrap or featured it in a CSS Frameworks round up.

Some of those places have already created new content, others have it queued up. I've also got a CSS Tricks article that will be coming out later this month that details some of the techniques I used when building Cutestrap. We'll have to wait and see if any of these boost the usage of Cutestrap, but I'm optimistic.

How much time do you devote to Cutestrap?

The first version, I probably only spent about 16 hours on, since it was really just grabbing snippets I had laying around from a few other projects, normalizing them and throwing them into a single splash page.

The second version, it's been sporadic, but some weeks I put up to 20 hours on the side into fleshing out edge cases or writing documentation. Most weeks I probably just spend about 6-8 hours on it. Going forward, I'd probably like to do less than 4 hours a week and even that seems a little on the excessive side.

What are your hopes for the future of Cutestrap?

Honestly, I don't have too many hopes for the future of Cutestrap itself. I'll still work on improving the docs and helping people to gain a better understanding of what it is trying to solve.

I like to think Cutestrap is a solution to a certain set of problems, but not a solution to every problem. If you need to get something that looks custom-tailored, with simple and consistent patterns, and ready in a few minutes, Cutestrap is the only way to go.

What advice do you have for other open source projects and maintainers?

If you have people willing to engage with you and work on your project, take the time to work with them. It takes way more effort for them to begin to engage with you than it does for you to engage with them. Never take any questions, comments, considerations, issues, or pull requests for granted, because they are special.

Also, don't burn yourself out. It's okay to do things other than code.


Editor's note: Cutestrap is a powerful CSS framework that weighs in at only 2.7kb; if you're looking for a CSS framework for your next project, check out the docs to get started. You can also star the project on GitHub to save it for later.