Screen width based styles can be applied to most classes. They are
-ns (not small > 48em)
-m (medium >48em <64em)
-l (large >64em).
Tachyons is mobile-first and small is left out as it's the default.
examples: pa7-ns, indent-ns
base | css-name | modifiers | example | notes |
---|---|---|---|---|
f | font-size | 1 to 7, -5, -6 | f1, f-5 | 1 to 7 range from 6rem(96px) down to .875rem(14px); -5 and -6 are for headlines |
measure | max-width | narrow, wide | measure, measure-wide | sets characters per line to 45, 66, 80 |
indent | text-indent | indent's paragraph | ||
truncate | overflow | truncates to measure width or container | ||
lh | line-height | solid, title, copy | lh-title | sets height to 1, 1.25, 1.5 |
tracked | letter-spacing | tight, mega | tracked, tracked-tight | sets spacing to .1em, -.05em, .25em; only add tracking with all caps |
fw, normal, bold | font-weight | 1 to 9 | fw3, normal | 1 to 9 = 100 to 900; weight should decrease as size increases |
fs, i | font-style | normal | fs-normal, i | normal or italic |
v | vertical-align | base, mid, top, bottom | v-mid, v-base | works on inline elements |
t | text-align | l, r, c, j | tl, tr | left, right, center, justify |
tt | text-transform | c, l, u, n | ttc, ttl | capitalize, lowercase, uppercase, none |
strike, underline, no-underline | text-decoration | |||
ws-normal, nowrap, pre | white-space | nowrap clips; pre preserves whitespace | ||
font-family | several standard system fonts are included; see docs |
base | css-name | modifiers | example | notes |
---|---|---|---|---|
debug | displays a border on element and all descendants | |||
debug-grid | -16, -8-solid, -16-solid | debug-grid, debug-grid-8-solid | displays a grid background for alignment | |
border-box | box-sizing | places border on outside of element so element size is not changed | ||
p | padding | a, h, v, t, r, b, l, 0 to 7 | pa4, pv0 | all, horizontal, vertical, top, right, bottom, left; 0 to 7 doubles from .25 to 16 rem |
m | margin | a, h, v, t, r, b, l, 0 to 7 | mh3, mb2 | all, horizontal, vertical, top, right, bottom, left; 0 to 7 doubles from .25 to 16 rem |
f | float | l, r, n | fl, fr | left, right, none |
cf | clearfix - fixes float bugs | |||
d | display | n, i, b, ib, it | none, inline, block, inline-block, inline-table | |
dt | display | c, row, group, column | dtc, td-row, dt-column-group | table- cell, row, row-group, column, column-group |
dt--fixed | table-layout | fixes table layout and sets width to 100% | ||
w | width | 1 to 5, 10 to 100, third, two-thirds | w3, w-80, w-third | 1 to 5 doubles from 1 to 16 rem; 10 to 100 is by 10s & includes 25, 33, 34, 75 |
fl | float-based grid; use with width settings; documentation incomplete | |||
mw | max-width | 1 to 9, -100, none | mw7, mw-100 | 1 to 9 doubles from 1 to 96 rem |
h | height | 1 to 5, -25, -50, -75, -100, auto, inherit | h3, h-50 | 1 to 5 doubles from 1 to 16 rem |
vh | height | -25, -50, -75, -100 | vh-25, vh-50 | view/screen height |
min-h | height | height 100% | ||
min-vh | height | vertical screen height 100% | ||
static | position | |||
relative | ||||
absolute | --fill | absolute, absolute--fill | absolute and absolute with all sides at 0 | |
fixed | ||||
top | -0, -1, -2, --1, --2 | top-0, top--1 | 0, 1, 2, -1, -2 rem | |
right | -0, -1, -2, --1, --3 | right-1, right--2 | 0, 1, 2, -1, -2 rem | |
bottom | -0, -1, -2, --1, --4 | 0, 1, 2, -1, -2 rem | ||
left | -0, -1, -2, --1, --5 | 0, 1, 2, -1, -2 rem |
Use a combination of flex and widths to create grids.
base | css-name | modifiers | example | notes |
---|---|---|---|---|
flex | display | |||
inline-flex | display | |||
flex | flex-direction | column, row, column-reverse, row-reverse | flex-column, flex-row-reverse | |
flex | flex-wrap | wrap, nowrap, wrap-reverse | flex-wrap, flex-nowrap | |
items | align-items | start, end, center, baseline, stretch | items-start, items-end | |
self | align-self | start, end, center, baseline, stretch | self-center, self-stretch | |
justify | justify-content | start, end, center, between, around | ||
content | align-content | start, end, center, between, around, stretch | ||
order | order | -0 to -8, last | order-2, order-last | last=99999 |
base | css-name | modifiers | example | notes |
---|---|---|---|---|
black | color | -05, -10 to -90 | black-20, black-80 | 10 to 90 is by 10s |
white | color | -10 to -90 | white-30, white-70 | 10 to 90 is by 10s |
bg-black | background-color | -05, -10 to -90 | bg-black-05, bg-black-50 | 10 to 90 is by 10s |
bg-white | background-color | -10 to -90 | white-10, white-90 | 10 to 90 is by 10s |
color | -inherit | moon-gray, hot-pink | lots of colors in the docs (they don't always match CSS colors) | |
bg | background-color | -inherit | bg-blue, bg-inherit | lots of colors in the docs (they don't always match CSS colors) |
dim | :hover | |||
glow | :hover | |||
hide-child | :hover | reveals child on hover | ||
underline-hover | :hover | |||
grow | :hover | -large | grow, grow-large | |
pointer | :hover | show pointer icon on hover | ||
shadow-hover | :hover | |||
bg-animate | :hover | |||
cover | background-size | |||
contain | background-size | |||
b | border-style | a, t, r, b, l, n | ba, bl | all, top, right, bottom, left, none; uses text color of DOM node |
b | border-style | --none, --dotted, --dashed, --solid | b--dotted, b--solid | |
b | border-color | --transparent, inherit | b--orange, b--light-yellow | lots of colors in the docs (they don't always match CSS colors) |
bw | border-width | 0 to 5 | bw2, bl-0 | 0 to 5 doubles from .125 to 2 rem; bt-0, br-0, bb-0, and bl-0 are also available as resets |
br | border-radius | 0 to 4, -100, pill, --bottom, --top, --right, --left | br3, br-100, br-pill, br--right | 0 to 4 doubles from .125 to 1 rem; pill = radius 9999; directions set side to zero |
shadow | box-shadow | -1 to -5 | shadow-2, shadow-3 | numbers represent styles, not sizes |
o | opacity | -0, -025, -05, -10 to -100 | o-025, o-80 | 10 to 100 is by 10s |
base | css-name | modifiers | example | notes |
---|---|---|---|---|
see docs for images | ||||
link | removes underline and sets a special hover animation speed | |||
list | list-style-type | resets link style and removes bullets | ||
input-reset | resets form input style for mobile | |||
button-reset | resets button style for mobile | |||
collapse | collapses border and removes border spacing | |||
stripe | -light, -dark | stripe-light, stripe--moon-gray | adds stripes; see docs for colors |
Copyright (c) 2019-present by Lee Nathan
Released under the MIT License