How fast do you like it?
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.
tl;dr
- 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
Colors
Before
After
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
Background-position
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
A11y
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.
60fps
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!
Cheers.
The Tachyons Team