![](\"docs/assets/logo.png\"){kind=logo}
\n
\n
\n An atomic design toolkit for pragmatists.\n
\n A Tailwind CSS plugin.\n
\n Discover a17t ยป\n
\n
\n Concepts\n •\n CDN\n •\n Office Hours\n
Page not found :(
\nThe requested page could not be found.
\nDon't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a title attribute.
Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!
\nSupport all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).
" }, { "path": "docs/_includes/elements_list.html", "content": "\n\n\n" }, { "path": "docs/_includes/example.html", "content": "Live Example
\n {% endif %}\n![](\"//shynet.rmrm.io/ingress/286ff19d-6062-4033-ba83-d27f3c0f8ef8/pixel.gif\"){kind=tracking}
\n \n\n\n\n"
},
{
"path": "docs/_layouts/element.html",
"content": "---\nlayout: default\n---\n\n{{page.description}}
\nDisplay
\n{{page.display}}
\nSelectors
\n {% for selector in page.selectors %}{{selector}}{% endfor %}\n Source
\n \nFeatures
\n{% for feature in page.features %}{{feature}}{% endfor %}\n
\n{{page.description}}
\nSenior Researcher
\nKatya studies the intersection of machine learning and differential topology.
\n| Name | \nStatus | \nPrice | \n
|---|---|---|
| Landinator 9000 New | \nCompleted | \n$300 | \n
| Hammer | \nWaiting | \n$20 | \n
| Computer | \nProcessing | \n$500 | \n
To confirm you'd like to delete this repository, please enter its name below.
\n \n\n \n \n Version {{ site.a17t_version }} released →\n \n
\nTailwind CSS is great. But do you really want to design all your interface elements from scratch\n for every new project? Are you confident you'll handle all the accessibility states properly?
\nTraditional design libraries are overkill — but Tailwind on its own isn't enough when you're just getting started.\n a17t tries to get the balance right. Instead of providing all-inclusive, opinionated components (like\n jumbotrons, navbars, and menus), a17t provides common single-class elements in a neutral design language.
\nAs a Tailwind CSS plugin, a17t configures itself using your tailwind.config.js file, so it'll\n integrate seamlessly with your codebase.
a17t provides core, single-class interface elements and empowers you to assemble them your way. And\n you can customize it through your Tailwind config, so you'll never need to settle for “good\n enough.”\n
\na17t encourages you to think in terms of intent and hierarchy by specifying elements in terms of tone\n and priority. As an added bonus, this makes refactoring and customization a breeze.
\na17t has no dependencies except Tailwind. That means it's reliable, customizable,\n and can integrate with any stack. Just install the plugin and you're good to go.
\na17t is designed to make every interaction a delight. In addition to its semantic markup, a17t is full\n of subtle animations and accessibility features that make it pleasing for everyone to use.
\nThere's a tone for every Tailwind color! Tones are specified using special class names that start with a tilde \n (e.g., ~green). To make an indigo chip, for example, use chip\n ~indigo.
There are two priorities — low and high. You can specify a\n priority by its class: an “at sign” followed by its name (e.g., @high or\n @low). Priorities change elements' visual prominence.
a17t only provides atomic elements of your interface, like buttons and form inputs, and you'll need a\n tool to stitch everything together. That's where Tailwind comes in. a17t provides a solid and accessible base for your\n interface — use Tailwind to combine a17t's components into a masterpiece.
\nThoughtful typography — a17t is optimized for legibility. From headings to body text\n to labels, a17t tries to follow typographic best practices to ensure consistent, readable interfaces.
\nNo margins — While most a17t elements have some kind of internal spacing, none have\n any external margin by default. This is intentional: spacing is not one-size-fits-all, so not having any makes\n a17t more flexible.
\nTailwind plugin — Unlike most component libraries libraries, a17t is a Tailwind plugin\n and reads important values — like colors and spacing — from your Tailwind config. That means installation\n and customization is a breeze.
\nEffortlessly responsive — All of a17t's elements are designed to look great on any\n kind of device. So as long as you build your layout responsively, a17t will automatically follow suit without\n any extra effort.
\nTo install a17t, simply add it to the plugin section of your Tailwind config with require(\"a17t\"). For more information about\n installing and customizing a17t, check out our detailed guide.
Unread 55
\n{% endcapture %}\n{% include example.html code=example %}\n\n{% include todo_more.html %}\n" }, { "path": "docs/information/chip.md", "content": "---\nlayout: element\ntab: elements\nsubtab: element-chip\ncategory: Information\ntitle: Chip\ndescription: An inline element for statuses, labels, categories, and more\nsource: https://github.com/milesmcc/a17t/blob/master/src/information/chip.js\nselectors:\n - .chip\nfeatures:\n - Tones\n - Priorities\ndisplay: Inline Flex\nexamples:\n - \"Chip\\nChip\\nChip\\nChip\\nChip\\nChip\"\n---\n\n# Overview\n\nA chip (also called a \"tag\" or \"label\") is a helpful element for representing categorical data. For example, you might use a chip to display the status of an item, to list its features (as this documentation does), or to display tags.\n\nMost chips will generally be only a word or two. For longer content, consider using a [card](/layout/card) instead.\n\n# Considerations\n\n**Margins** --- When using badges, be mindful of margins. In most cases, you'll want an y-margin of at least `1rem` to prevent visual overlap when wrapping. (Like all a17t elements, badges specify no margin themselves.)\n\n**Similarity to Buttons** --- Depending on your layout, chips can look a lot like buttons. Avoid using chips and buttons with the same priority near one another to prevent confusion over which elements are interactive.\n\n# Variants\n\nChips have full tone and priority support.\n\n{% for priority in site.priorities %}\n###### {{priority|capitalize}} Priority\n{% capture example %}\n{% for tone in site.tones %}\nCategory\n{% endfor %}\n{% endcapture %}\n{% include example.html code=example %}\n{% endfor %}\n\n# Accessibility\n\n{% include accessibility_defaults.html %}\n\n# Examples\n\n{% capture example %}\nCategories
\nDesign Architecture New York Urbanism
\n{% endcapture %}\n{% include example.html code=example %}\n\n{% include todo_more.html %}\n" }, { "path": "docs/information/icon.md", "content": "---\nlayout: element\ntab: elements\nsubtab: element-icon\ncategory: Information\ntitle: Icon\ndescription: A utility element to wrap all icons, regardless of source\nsource: https://github.com/milesmcc/a17t/blob/master/src/information/icon.js\nselectors:\n - .icon\ndisplay: Inline Flex\nexamples:\n - \"\\n \\n\"\n---\n\n# Overview\n\nIcons are deceptively difficult. Usually, they are loaded from a separate source (sometimes even a separate origin), and can be one of the last elements to appear on a page. When they do finally load, they often cause the interface to resize.\n\nThe icon element has two purposes: to give all icons a set width and height (`1em` by `1em` by default) so that the page doesn't resize when they load, and to ensure that the icon is the correct color (by setting the `color` and `fill` properties).\n\nIf you're looking for a nice way to display icons in your content, consider using the icon element in conjunction with a [shield](/information/shield/).\n\n# Considerations\n\n**Margins** --- Icons have no margins by default. (This will make your life easier.) Just remember to set them yourself!\n\n**Vertical alignment** -- By default, icons are vertically aligned with the middle of the text. If the `font-size` of the surrounding text is not the same as the icon, you may need to tweak things.\n\n# Variants\n\nIcons inherit their color from their context using the `--color-content` variable.\n\n{% capture example %}\n{% for tone in site.tones %}\n\n \n\n{% endfor %}\n{% endcapture %}\n{% include example.html code=example %}\n\n# Accessibility\n\n{% include accessibility_defaults.html %}\n\n# Examples\n\n{% include todo_more.html %}\n" }, { "path": "docs/information/progress.md", "content": "---\nlayout: element\ntab: elements\nsubtab: element-progress\ncategory: Information\ntitle: Progress\ndescription: A block element to show completion, fullness, and other ratios\nsource: https://github.com/milesmcc/a17t/blob/master/src/information/progress.js\nselectors:\n - .progress\nfeatures:\n - Tones\ndisplay: Block\nexamples:\n - \"\"\n---\n\n# Overview\n\nIt's a relatively simple progress bar, intended to be applied to an HTML `