Adam Morse joined the show to talk about Functional CSS and his project Tachyons - a CSS Toolkit that lets you quickly build and design new UI without writing CSS. We talk about Scalable CSS, the difference between “Atomic”, “OOCSS”, “BEM” and others, semantic class names, and where we go from here.
Adam Morse: Yeah. Compositor started when Jackson and I, and this guy John Otander worked on CSS stats together. Jackson and I had launched a web app and we knew nothing about tech ops or DevOps, we knew nothing about servers, Jackson barely knew anything about JavaScript at the time, and this guy comes along and just starts refactoring all of our horrible code right away and making our website way more stable.
After I think the 10th amazing pull request in a two-day or three-day spin, I was like “Hey, do you wanna just own this project with us?” Then we all kind of got in a chat room, and… Yeah, every now and then we would do these sprints on CSS stats, and chat, and then sometimes we’d go dark for a few months. But then I started working on Tachyons a lot more and I was stumbling on trying to get certain things done with JavaScript in terms of like dynamic build things… So I asked John for help, and he started helping me out.
Jackson at the time was building lots of open source tools, everything from lots of different color tools, to his rebase library of stateless React components. So the three of us were all kind of still in the same chat room, and John and I worked together, and Jackson and I worked together professionally, but not a lot on dedicated open source projects…
That’s just kind of been our relationship for the last 4-5 years, kind of all infecting each other’s brain with ideas. John would listen to Jackson and I talk about CSS stats, and then he’ll go off and build something crazy. He built a service to download the top million websites’ CSS with snapshots in like one-month intervals, going back to 2005… So he has just graphed out the history of design systems in CSS on the internet, and it’s just awe-inspiring to go through these graphs and just see these trends at this 10,000-foot scale. That’s something we’ll make public later; we still have a bunch of things to clean up there.
It’s just a lot of fun working with them, but at the same time we all know that open source is difficult. There are things that we wish we could pay contractors to help us with, there are features that we totally want in that we don’t have time to build, but we think are valuable, especially in something like CSS stats.
[54:03] And for our own work, it’s like “How do you just make all of this sustainable so that people don’t burn out? I don’t know how many modules we have between the three of us.
So I think it was about this time last year when I set out to just say like “Okay, let’s just make this a company and start to string a lot of our open source things together and build some apps and some design tools that nobody else is building, like the way that we wanna work.”
I think Jackson and I have been together for five companies now. Most companies, big or small, have the same problems. Most places don’t ship the result of validated design. One design stumbles across the finish line. It’s not like you’re keeping six or seven things in parallel and doing a bunch of different user testing. So that’s kind of where our head’s at, it’s like “How do we create an environment where we can get the tools built that we wanna use to design stuff.” So this Compositors, that’s kind of what the company is about.
Our first product is Lab, and that’s basically a tool where you can build React components from scratch, you can build the design system, and set scales for typography, for spacing, for color pallet… And then, as you’re building out components, you can compose them together. And in your React app, we have a command line interface, and we’ll also be releasing a separate app for this, but you can tweak values in your design system or edit things about your component and see them editing in real-time. You can drag sliders on border radius so you can change colors, and it’s – yeah, it’d be like if you could edit sketch symbols and see that update at the same time and not have to switch between artboards. That’s always been my dream - to be able to edit things about a system and then see them propagate everywhere and know what’s gonna render, and not have it be unpredictable.
I’m really excited about Lab, because I am not good at JavaScript or React, so it’s helped me speed up my ability to build components and reason through that abstraction.