Releases: tachyons-css/tachyons
Box sizing additions and cms bug fix
Flex grow and shrink
The flexbox module now has support for flex-grow and flex-shrink.
4.8.1
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.
☉
Normalize 6.0.0 => 7.0.0
We introduced some breaking changes via normalize when upgrading to version 6.0.0. As the community has since cut a new release, 7.0.0, to "revert" the changes, we will do the same.
Apologies to any inconvenience this may've cause anyone. Happy 💻 ing.
Compile Error
For some reason looks in mirror the css wasn't properly compiled before releasing. 4.7.2 should fix normalize and flex updates not being included.
4.7.0
I'm very sad about the creator of the 808 passing away so to distract myself from epic sadness I am releasing some new Tachyons features.
For quite some time people have been requesting an additional step in the type scale for 12px / .75rem. While 12px isn't readable for body copy it does have it's place in limited usage so I've added it to core. Also added some classes for reversing column, row, and wrap in flexbox.
A big note of thanks and <3 to @dwyl for supporting Tachyons development.
- Add 7th step to type scale .f7 { font-size: .75rem }
- More flex: row, column, and wrap reverse have been added
- Add responsive classes for centering with margin auto .center
- Add classes for inheriting color values in skins, pseudo skins, and border modules
- Fix bug in media query declarations in outline module
- Update to normalize 6.0.0 (removes font-family declaration on form elements like buttons)
- Fix dead link in readme
Happy developing!
4.6.1: Jinx
I knew when I wrote that 4.6.0 might be the last release of 2016 that it was the best way to guarantee my code had a bug that I would have to fix before 2017 hit.
Deepest apologies for the bug!
In the skins-pseudo partial the new hover classes for black and white opacity levels were declaring color when they should have been declaring background color. This is now fixed. Thanks to @amytych for catching this. Also fixed a minor typo where helvetica was declared before helvetica neue in the sans-serif stack which is inconsistent with the helvetica class. Guessing no one noticed that one though. It's fixed now, thanks to @lachlanjc for noticing.
Yippee Ki Yay
Hey everyone! This is likely the last release of 2016 for Tachyons (but you never know.) While 2016 has largely been horrible, watching the Tachyons community grow and getting to work with @johnotander a bunch has been a blast. My favorite part about open source will always be the people. Appreciate everyones feedback over the last year as people tried tachyons out. All of the below additions are a result of conversations I've had with people in the community. So... here are the changes for 4.6.0.
Rotations
There is a new rotations module that allows you to rotate objects in 45 degree increments.
Negative margins
There is a new module for negative-margins. It uses the same scale as the spacing module.
Nested
I've added a module that should make it easier to style nested content. It likely won't cover everything you need but will hopefully provide a pattern that is easy to extend.
Glow
There is a new class in the hovers module to set an element to opacity: 1 on hover. Combined
with the opacity module, you can have elements set to your specified opacity and then animate them
to full opacity. Basically the opposite of the dim class.
Aspect ratios
Aspect ratios have been moved out of src/_utilities.css to src/_aspect-ratios
They've also been extended so you can set aspect ratios at each breakpoints.
Bug fixes
The shadow-hover class should now be fixed crosses fingers - thanks to @lowmess for helping with the fix.
There was a typo in one of border-radius classes for the medium media query. This has been fixed.
Update Normalize.css
Update normalize to 5.0.
Hope everyone has a wonderful holiday. Looking forward to what 2017 will bring.
Feel the Speed. Feel the Rush
v4.5.0
A small but powerful update.
Tl;dr
- More widths
- Background animation class
- Added debug classes for white and black
Widths
Due to popular demand added a few more width classes.
Classes for 30, 70, and 90% have all been added. Also added a w-two-thirds class
which will take up 2/3 of the width it's parent.
Documentation has been added to the homepage
Background animation
You can now combine bg- and hover-bg-* classes withbg-animation
if you want to animate background colors on hover & focus. Demos coming soon.
More debugging
.debug-white and .debug-black will now add outlines of white and black to all child elements.