Turning 4(.8.0)
4.8.0
The beginning
The first public commit to what would become Tachyons was on August 23rd, 2013. I had been experimenting with a few different patterns for rapidly building responsive sites while designing in the browser. Some things worked. Some things didn't. At the time I had been starting to study various aspects of css performance. Mainly download time and rendering time. One of the tools I stumbled across was css lint. Running my code through the cli tool - the first error I remember seeing was that I had more than 10 float declarations. I wondered if this number was arbitrary or if it was directly tied to code quality. I started to experiment with testing various patterns and architectures with https://www.chromium.org/developers/telemetry/run_locally. At the time I wrote most of my css with content-semantic class names. I liked big monolithic classes and writing selectors that traversed the DOM. So I was a bit dismayed that this linting tool was telling me my code was wrong and the performance testing I was doing reflected the same message: I had too many floats and it was slowing down rendering time on some screens.
As I was pondering my existence and everything I knew about css - I started reading Nicole Sullivans work because she was one of the people behind css lint. Her writing was a revelation. And there was so much of it. I believe (although I can't find it at the moment) I also found a code example where she had a padding and margin scale, with pvs, pvm, pvl class names (for those of you who remember tachyons v1-3). This pattern was against everything I knew, but at the same time - it made sense. A few days later I found SUITcss by Nicholas Gallagher. The eureka moment was looking at how he handled grids. He had classes that would set the width of a column only at a certain breakpoint. A lightbulb went off. I wanted that pattern for almost everything. Spacing, font-sizes, display, borders, text alignment, etc. So I started to build out a set of things I thought I might need.
It was a great exercise for me because it made me think even more about how values relate to each other, and which scales would compose well and which ones wouldn't. There was a lot of experimentation. I built a lot of pages, components, and sites. I kept learning what I liked what I didn't. Which class names I could never remember for some reason, and which ones people I collaborated with were able to grok easily.
In the beginning tachyons was an experiment to answer two questions:
- What is the absolute fastest you can get an interface to render
- Could I stop repeating myself and writing the same css over and over again for every single project. If I had a solid design system and could easily target any breakpoint, could I build lots of different looking websites with a wide variety of aesthetics, without changing any css. Could you make a system reusable from project to project, only needing to potentially customize colors and font-families, and if that?
At first, almost everyone I showed it to hated it. @jxnblk and I were talking a lot about design systems at the time and how to help design teams iterate more quickly in the browser - and how to make it easier to write code. He was experimenting with various patterns that turned into basscss.com over at Kickstarter. I spent time doing small workshops and sessions with various designers around San Francisco as well as at Salesforce. I spent a lot of time just observing how different people designed in the browser. What they could do quickly, what they spent a lot of time on unnecessarily. It was around this time I became more interested in how patterns in Tachyons could increase developer velocity. What adjustments could I make to tachyons and its ecosystem that would allow it to be usable by more people? It started to become more than css, it also started to become a base for me to experiment with design systems, composition, designing with modular scales, grid systems, timeless patterns in typography, and automated documentation. I never expected people to use it, but I did want to do the work out in the open.
A lot has changed in the last four years. Atomic css, functional css, oocss, are all a bit less taboo. While not everyone uses these patterns, there are a number of teams who have found success using them. None the less it's still always a surprise and a delight when someone says they use tachyons and don't loath everything about the experience.
A lot of people have helped get Tachyons to where it is. The pull requests that don't get merged, are still great contributions to the project that I learn from. Thanks to all of you who have supported me financially, emotionally, and technically over the last four years. While open source can sometimes be a drag, it can also be filled with lots of inspirational people and moments. I'm grateful for all of them.
Now onto the less boring stuff.
Since we're turning 4, I figured the version number would be better as 4.8.0 then 4.7.4 - it includes a few new treats and a couple of bug fixes.
Changes
- Added an option for text-align: justify
- Added open to set margin-right|left to auto (useful for flex box)
- Fixed bug with shadow hover when used in conjunction with children that have a border-radius
- Fixes typo in skins-pseudo
- Changes debug-grid image to gif (reduces file size)
- Moves list of sites built with tachyons to sites.md
- Adds no wrap and wrap-reverse to flex box module
Hopefully no new bugs were added.
☉