Skip to content

Migrate to Tailwind plugin, use @low and @high priorities, new docs, and more

Latest
Latest
Compare
Choose a tag to compare
@milesmcc milesmcc released this 28 Dec 21:47
· 23 commits to master since this release
v0.10.1
4dd8c86
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

This large update to a17t migrates it from a traditional CSS library to a Tailwind CSS plugin! This is an incredibly exciting update, which will make a17t an even more compelling way to build interfaces.

With such a large update, though, come some fundamental changes.

Major Changes

  • There are only two priorities: @low and @high. I made this change because the middle priority — @normal — often felt forced. In many cases, the @low priority variant also didn't make much sense. In this update, !normal is now @low, and !high is now @high.
  • You might have noticed that priorities now use the "at" symbol as the prefix rather than an exclamation point. I changed the prefix for the priority classes because Tailwind's default CSS purge system wasn't detecting classes with the exclamation point prefix. Using an at symbol just makes everything much more reliable. I wish we didn't have to make this change, but we do. (Fortunately, migration is as simple as a find and replace.)
  • a17t no longer can be distributed as a simple CSS file; rather, it needs to be installed as a Tailwind CSS plugin. I'm confident this is the right direction for the project, but I also acknowledge that this will inconvenience some existing users. I'm sorry! But I promise using Tailwind is worth it.
  • Buttons look slightly different now. (They look better.)
  • Cards function slightly differently now. Specifically, card on its own is a neutral white card, while card ~neutral is a gray card, and card ~neutral @high is a dark gray card. (This change preserves the old plain white card while also easily supporting the new @low and @high priorities.
  • CSS variable customization is no longer supported. While this was one of a17t's original differentiators, in retrospect it was misguided. There is already a much better way to customize the toolkit: using tailwind.config.js! And since a17t now reads important values like spacing, colors, and border radii from the Tailwind config, you only need to apply customizations once (rather than twice, once for a17t and once for Tailwind).

Minor Changes

  • .kbd now has a dark background with white text, rather than the inverse. It was always meant to be white text on a dark background; I'm not sure when that changed, but it was a regression.
  • The documentation now has a new landing page.
  • The documentation no longer has an off-white background.
  • The documentation has more examples.
  • Inputs and textareas were removed from the docs, because they are redundant to fields. Going forward, I recommend just using the .field selector for these elements. To preserve backwards compatibility, the .input and .textarea selectors will still work — like before, they are identical to .field. (That is to say that inputs, textareas, and fields were all merged into one.)

What Didn't Change

  • a17t is still as atomic and dynamic as it ever was!

More changes

Full Changelog: v0.5.1...v0.10.1

Contributors

milesmcc and dependabot
Assets 2