4.6.1: Jinx

@mrmrs mrmrs released this Dec 14, 2016 · 7 commits to master since this release

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

@mrmrs mrmrs released this Dec 13, 2016 · 9 commits to master since this release


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.


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.


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.


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

@mrmrs mrmrs released this Sep 17, 2016 · 61 commits to master since this release


A small but powerful update.


  • More widths
  • Background animation class
  • Added debug classes for white and black


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

screen shot 2016-09-17 at 4 08 14 pm

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.


How fast do you like it?

@mrmrs mrmrs released this Sep 15, 2016 · 81 commits to master since this release

Well 4.4.0 had a small bug in it so that got quickly patched and we are now ready to drop 4.4.1.


  • Tweaked some colors & added some colors
  • Added a width class for calc(100%/3) called w-third
  • Added two base min-height classes for 100% and 100vh
  • Added new module for setting background-position
  • Made the shadow-hover animation more performant. 60fps ftw.
  • Added button reset in form module
  • Better focus styles on links
  • Hover utilities all cover focus now as well



screen shot 2016-09-15 at 4 20 28 pm


screen shot 2016-09-15 at 4 22 43 pm

Let’s paint some bikesheds! After some tweaks to color values and adding a couple colors we’ve expanded the amount of available color combinations that meet accessibility standards for contrast ratio. We now have reds and greens that you can use white or black text on (amongst others)

The breakdown:

  • 14 More AA Large combos
  • 26 More AA combos
  • 26 More AAA combos

Widths & Heights

  • Added a width utility for setting elements to a third of it’s parent element.
  • Added min-height classes set to 100% and 100vh. They can be found in the heights module


New module! We now have some background-position utilities for setting images to be aligned to the top, right, left, or bottom of the image (while centered on the opposite axis). Check out the source code in src/_background-position.css


Some of the hover classes didn’t also have focus attached. That is now fixed. In addition, we have added some outlines on links when they are focused along with a button reset class for form elements. All of these should aid in making a better experience when using the keyboard for navigation. Shout out to @jasonli for helping with that.


After reading an excellent blog post about how to make your box-shadow animations more performant, I had to refactor the shadow-hover class a bit. It should now be a bit smoother and run at 60fps.

The Future

We’re working on (a bunch of things) but a huge priority is building a custom generator for everyone to use. It will allow you to set your own colors, type scale, media queries, and more to generate your own version of tachyons. It seems that changing the values of tachyons is proving to be a painpoint and we definitely don’t want it to be. Hopefully we’ll have something soon!


The Tachyons Team


A comedy of trial and error

@mrmrs mrmrs released this Sep 7, 2016 · 104 commits to master since this release


New features

Aspect ratios

Added a bunch of aspect ratios for fluid embeds. You can now choose between

  • 1:1 Square
  • 6:4
  • 4:6
  • 8:5
  • 5:8
  • 4:3
  • 3:4
  • 16:9
  • 9:16
  • 7:5
  • 5:7

Allows you to make things like this where you don't know each image is the same size but you know the desired aspect ratio:

border-colors.css has more comments!

Added some more comments to the border-colors file. Makes it more consistent with the rest of the docs.

Athelas is so gorgeous

Athelas is pretty great and it's a system font on mac so I added it to the available font-family classes.
I've recently been redesigning http://mrmrs.io/writing with it. I definitely stole the idea from @Jxnblk
screen shot 2016-09-07 at 4 56 15 pm


Ugh bugs. I thought I fixed something. It doesn't seem I did. NOW we should have some smooth animations with the grow class. Fingers crossed.


Comments: There is no substitute

@mrmrs mrmrs released this Sep 5, 2016 · 111 commits to master since this release

This patch fixes a small bug in class naming and also adds comments to the css partials in the src/ directory.

After making another pass through the source code I was horrified to find how many glaring inconsistencies there were in the code comments for each module. Especially regarding naming systems. It never ceases to amaze me how bad past me is at writing code.

In an effort to not have poorly documented code I woke up this morning, made some coffee, and tried to make the comments more clear and more consistent. They aren't perfect yet. But
they are less glaringly awful. I hope.

Bug fix

There were two different classes called striped--moon-gray which is very silly because they were set to different values. So that has been fixed. No more duplicative classes and the class striped--light-gray has been added in as originally intended.

4.3 news

Next up I'll be adding some more table striping utilities along with some additional aspect ratios used for fluid embeds.