Compare commits

..

105 Commits

Author SHA1 Message Date
mrmrs
2cb90e90f9 Removes old links and refs in readme to sites not using tachyons 2026-01-08 10:51:23 -08:00
mrmrs
f59f1c780a Adds llms.txt to help people use Tachyons w/o needing to read docs 2026-01-08 08:34:34 -08:00
Mark Hadley
0fafaa66ed
Merge pull request #724 from tachyons-css/revert-705-v5-final-final
Revert "V5 final final"
2024-02-12 17:59:21 -06:00
Mark Hadley
d44bce729b
Revert "V5 final final" 2024-02-12 17:58:23 -06:00
Mark Hadley
2486c586dc
Merge pull request #705 from tachyons-css/v5-final-final
Make v5 beta main
2024-02-12 17:57:59 -06:00
mrmrs
6b8c744afa Updates 2023-09-12 16:23:41 -07:00
mrmrs
3ff3dfbb09 Add newly compiled CSS 2023-09-06 10:39:21 -07:00
mrmrs
1971777215 Design tweaks to values and scales 2023-09-06 09:10:32 -07:00
mrmrs
6514f52795 Adds scaffolding for backdrop filters module 2023-09-06 09:10:12 -07:00
mrmrs
487d0b1840 Adds new module for setting container-type 2023-09-06 09:09:35 -07:00
mrmrs
010de553ce Adds new module for glass like effects 2023-09-06 09:09:11 -07:00
mrmrs
4af2f07c72 Adds new module for all property 2023-09-06 09:08:55 -07:00
mrmrs
25e557f841 Switch to container queries and a few other things 2023-08-12 15:37:05 -07:00
mrmrs
f1e1fbf148 Adds gap column and gap row modules 2023-08-12 15:36:43 -07:00
mrmrs
5c2a4fabea Adds variables to outline module. Adds filter none to hovers. 2023-07-13 23:32:26 -07:00
mrmrs
bade6fd4ec Adds configurable default border-width 2023-07-13 23:24:23 -07:00
mrmrs
89edd4d758 Fixes comment breaking build 2023-07-13 22:06:16 -07:00
mrmrs
8c8999006a Adds a default configurable border-radius class 2023-07-13 21:57:54 -07:00
mrmrs
cf8f07b255 Starting out on some quick docs 2023-07-12 14:13:05 -07:00
mrmrs
cc54682f24 small box shadow tweaks 2023-07-12 14:04:57 -07:00
mrmrs
591e63fe9f Adds new manifest and output 2023-07-12 13:54:32 -07:00
mrmrs
5324af7fe6 Adds new gradients module. A few patterns to iron out still.
Want to keep things very composable, flexible, and overrideable at
multiple levels without bloating the library too to much. With variables
I believe there is a lot of room for fun animations
2023-07-12 13:53:23 -07:00
mrmrs
c97ceb67eb First pass at adding text-shadows 2023-07-12 13:52:37 -07:00
mrmrs
57397aaa51 First pass at refactoring box shadows to use variables
Still want to tweak a few things here around configuring and scale
structure.
2023-07-12 13:41:43 -07:00
mrmrs
2034ada76f Comment out shadow-hover for now 2023-07-12 13:41:31 -07:00
mrmrs
a78e325ebc Moves configuration to variables 2023-07-12 13:40:45 -07:00
mrmrs
b535de2e70 moves variables to _variables 2023-07-12 13:36:10 -07:00
mrmrs
5d6e56f9a9 Fixs typo in typography module 2023-07-12 13:35:04 -07:00
mrmrs
c7bbfc653c Adds more transitions to links 2023-07-12 13:34:36 -07:00
mrmrs
cb4aecd0bf Adds variables to nested module. 2023-07-12 13:33:40 -07:00
mrmrs
5296ea527c Adds a class that accepts a variable assigmnent 2023-07-12 13:33:14 -07:00
mrmrs
9b9aaa6fea Adds variables to borders module 2023-07-12 13:32:22 -07:00
mrmrs
d53483be4c Removes comment 2023-07-12 13:31:41 -07:00
mrmrs
518e54a41d Removes variable declarations from top of module 2023-07-12 13:31:24 -07:00
mrmrs
f94c074652 Fixes type on grid column module 2023-07-12 13:30:44 -07:00
mrmrs
88dd6acb32 Adds variabgles to border-with modules. Adds one more step to scale 2023-07-12 13:30:03 -07:00
mrmrs
c8158e6967 Adds variables to border radius 2023-07-12 13:29:25 -07:00
mrmrs
a3fd3f1eef Adds variables to type scale module 2023-07-12 13:28:49 -07:00
mrmrs
9ec3be2d91 Removes the overflow container and errant ns 2023-07-12 13:27:52 -07:00
mrmrs
ae267591ee Adds variables to heights module 2023-07-12 13:27:30 -07:00
mrmrs
ed37a71f2c Removes zoom from clears 2023-07-12 13:26:51 -07:00
mrmrs
6e85fb4e35 Adds local variables to debug children 2023-07-12 13:25:58 -07:00
mrmrs
607afac168 Adds opacity to debug children 2023-07-12 13:23:24 -07:00
mrmrs
a5061da624 Adds variables to letter spacing module 2023-07-12 13:22:45 -07:00
mrmrs
3e3978aa12 Adds variables and relative based calc to coords module 2023-07-12 13:22:14 -07:00
mrmrs
ea84b27cab Adds variables to line-height module 2023-07-12 13:21:29 -07:00
mrmrs
dcd8743951 Remove blank line 2023-07-12 13:21:00 -07:00
mrmrs
70fdc428f1 Adds variables to opacity module 2023-07-12 12:18:25 -07:00
mrmrs
d3421eae20 Removes errant ns from font weight module 2023-07-12 12:12:32 -07:00
mrmrs
6ce2872c94 Adds variables to gap module 2023-07-12 12:11:49 -07:00
mrmrs
a46bfb13d3 Adds variables to widths scale 2023-07-12 12:11:00 -07:00
mrmrs
15e7091ec7 Updates method for hiding content visually but not from SR 2023-07-11 11:46:33 -07:00
mrmrs
683ad220e5 Adds fallbacks for variable declarations 2023-07-10 18:42:20 -07:00
mrmrs
6a291dc68e Remove errant ns 2023-07-10 17:54:50 -07:00
mrmrs
b07499f95f Removes align in favor of smaller modules 2023-07-10 12:15:32 -07:00
mrmrs
ae3de0b288 Removes errant ns 2023-07-10 11:21:17 -07:00
mrmrs
0cdc9645b8 Changes the build to preserve CSS variables in compiled output 2023-07-10 11:20:07 -07:00
mrmrs
fbd76e774c Cleanup errant ns 2023-07-10 11:19:25 -07:00
mrmrs
8332d9abeb Changes the grid to be configurable and use linear-gradient
Easily change grid cell size and color with --grid-color and --grid-size
2023-07-10 11:17:45 -07:00
mrmrs
bc56e32f33 Removes flex-direction from flexbox partial and adds to separate partial 2022-11-08 14:20:59 -08:00
mrmrs
a7d2dcdef5 Adds new compiled source 2022-11-08 14:18:05 -08:00
mrmrs
9d601033b4 Adds partial for align content 2022-11-08 14:17:33 -08:00
mrmrs
7892bbdfa6 Changes to includes listed in main list 2022-11-08 13:37:28 -08:00
mrmrs
0bcca0c2f5 Changes how flexbox properties are organized
- Breaks align-items, align-self, flexbox, justify-self and order to
  separate files.
2022-11-08 13:36:06 -08:00
mrmrs
b7fa28edea Fixes a few typos, corrects build order 2022-11-01 15:33:50 -07:00
mrmrs
7e1cf5a775 Changes copy and updates color variable 2022-08-14 22:52:03 -07:00
mrmrs
cd0b04c9f1 Add compiled CSS 2022-08-14 22:10:43 -07:00
mrmrs
87486e3812 Changes values and scales
- New color system
- New support for grid
- Updated scales
- New hover animations
- Min width based media queries
2022-08-14 22:09:19 -07:00
Mark Hadley
139156c724
Merge pull request #696 from m90/patch-1 2021-06-16 20:35:41 -05:00
Frederik Ring
57cb19d13e
Fix list rendering in sites.md 2021-06-12 09:00:13 +02:00
Mark Hadley
ad15a95d87
Merge pull request #695 from mkwng/mkw/fix-url 2021-06-11 11:00:55 -05:00
Michael Wang
5adea3d94b fix broken url 2021-04-28 23:50:08 +00:00
adam morse
79f4de4ea4 4.12.0 2020-04-26 09:22:44 -04:00
adam morse
e54703f4e8 Recompile css 2020-04-26 09:22:27 -04:00
adam morse
7e2f462ec4 Add initial, inherit, and unset to border color and radius 2020-04-26 09:20:07 -04:00
adam morse
8bac99f4fc Update license info 2020-04-26 09:06:35 -04:00
adam morse
d63376e2eb Add a couple sites to sites.md 2020-04-26 09:02:33 -04:00
adam morse
09d201f1d4 Goodbye Bower config
Bower recommends you use something else. Doesn't seem worthwhile to keep
this config around.
2020-04-26 08:51:42 -04:00
murmurs
244c722f1c
Merge pull request #616 from ikelands/master
Fix README.md typos
2019-10-21 08:46:45 -04:00
murmurs
7e45ab4420
Merge pull request #630 from sparrowmobile/patch-1
Update sites.md
2019-10-21 08:45:07 -04:00
murmurs
e012e695f3
Merge pull request #640 from emersonlaurentino/patch-1
Update VTEX link
2019-10-21 08:38:05 -04:00
Emerson Laurentino
84c225e61a
Update VTEX link 2019-09-20 19:34:14 -03:00
sparrowmobile
6ebe27758d
Update sites.md
Add a new example of Tachyons in production. 

sparrow is a US mobile provider serving conscious consumers & nonprofits with excellent service, fair plans and positive impact.
2019-07-09 12:53:59 -07:00
Isaac Anderson
88b22628d5
Update README.md
Touched-up grammar, punctuation, capitalization, etc.
2019-04-14 21:54:09 -04:00
John Otander
2cf141993c
Merge pull request #607 from jenswittmann/patch-1
add another site using tachyons
2019-01-20 11:10:28 -07:00
Jens Wittmann
608d87cf2e
move new link to the bottom 2019-01-20 18:42:57 +01:00
Jens Wittmann
1fd5503d3b
add another site using tachyons 2019-01-07 19:57:11 +01:00
mrmrs
15e20ea986 Revert webkit scroll commit and rename readme to all caps 2018-11-12 09:45:47 +00:00
Lachlan Campbell
7640dc1fa6
Merge pull request #559 from dangayle/master
Added spokesman.com to sites.md
2018-11-10 21:50:53 -05:00
Lachlan Campbell
b3ca041eea
Merge branch 'master' into master 2018-11-10 21:50:44 -05:00
Lachlan Campbell
fc7866a878
Merge pull request #592 from tkafka/master
Add -webkit-overflow-scrolling: touch; to all overflows that scroll
2018-11-10 21:49:49 -05:00
Lachlan Campbell
799314ee63
Merge pull request #599 from jdsimcoe/master
Moving all .bg-* classes into Background colors
2018-11-10 21:49:00 -05:00
Lachlan Campbell
499b5552ca
Merge pull request #602 from kuntoaji/add-catetin-and-kak-tools
add Catetin and KAK Tools to sites.md
2018-11-08 10:27:14 -05:00
Kunto Aji. K
96bd293e34 add Catetin and KAK Tools to sites.md 2018-11-08 22:18:05 +07:00
Jonathan Simcoe
4df7d16e26 Moving all .bg- classes into Background colors 2018-10-23 09:27:40 -07:00
Tomáš Kafka
187d4b63e4 Add -webkit-overflow-scrolling: touch; to all overflows that scroll to make it scroll better on iOS
https://github.com/tachyons-css/tachyons/issues/566
2018-09-25 20:09:26 +02:00
John Otander
4d798ba052
Merge pull request #587 from stefanschleich/patch-2
Add medienblau.de to sites.md
2018-09-07 08:44:51 -06:00
John Otander
412d05ac41
Merge pull request #591 from feross/bitmidi-readme
Add BitMidi to the readme
2018-09-07 08:44:10 -06:00
Feross Aboukhadijeh
762dc37073
Add BitMidi to the readme 2018-09-06 21:04:53 -07:00
Stefan Schleich
c3ba9d700e
Add medienblau.de to sites.md 2018-08-31 10:21:14 +02:00
John Otander
3b0b1ac964 4.11.1 2018-07-22 08:12:35 -06:00
John Otander
c672b3dc2a Bump version 2018-07-22 08:12:31 -06:00
John Otander
631a3b9d56
Merge pull request #580 from jayjun/typo
Fix negative margins extra parenthesis typo
2018-07-22 08:11:12 -06:00
Tan Jay Jun
0c2ddb41c4 Fix negative margins extra parenthesis typo 2018-07-21 23:49:32 +08:00
Dan Gayle
55a9a92005
Added spokesman.com to sites.md 2018-04-23 17:16:08 -07:00
13 changed files with 495 additions and 189 deletions

View File

@ -1,8 +1,8 @@
# TACHYONS
Functional css for humans.
Functional CSS for humans.
Quickly build and design new UI without writing css.
Quickly build and design new UI without writing CSS.
## Principles
@ -13,12 +13,12 @@ Quickly build and design new UI without writing css.
* It should be easy to change any interface or part of an interface without breaking any existing interfaces
* Doing one thing extremely well promotes reusability and reduces repetition
* Documentation helps promote reusability and shared knowledge
* Css shouldn't impede accessibility or the default functionality of Html
* CSS shouldn't impede accessibility or the default functionality of HTML
* You should send the smallest possible amount of code to the user
## Features
* Mobile-first css architecture
* Mobile-first CSS architecture
* 490 accessible color combinations
* 8px baseline grid
* Multiple debugging utilities to reduce layout struggles
@ -27,27 +27,27 @@ Quickly build and design new UI without writing css.
* Lightweight (~14kB)
* Usable across projects
* Growing open source component library
* Works well with plain html, react, ember, angular, rails, and more
* Works well with plain HTML, React, Ember, Angular, Rails and more
* Infinitely nestable responsive grid system
* Built with Postcss
* Built with PostCSS
## Getting started
## Getting Started
Docs can be found at http://tachyons.io/docs
The modules are generally pretty small and thus quick and easy to read.
### Use the CDN
The quickest and easiest way to start using tachyons is to include a reference
to the minified file in the head of your html file.
The quickest and easiest way to start using Tachyons is to include a reference
to the minified file in the head of your HTML file.
```html
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.11.0/css/tachyons.min.css">
<link rel="stylesheet" href="https://unpkg.com/tachyons@4/css/tachyons.min.css">
```
### Local Setup
Clone the repo from github and install dependencies through npm.
Clone the repo from Github and install dependencies through npm.
```
git clone https://github.com/tachyons-css/tachyons.git
@ -59,20 +59,20 @@ npm install
If you want to just use everything in tachyons/src as a jumping off point and
edit all the code yourself, you can compile all of your wonderful changes by
running
running:
```npm start```
This will output both minified and unminified versions of the css to the css directory and watch the src directory for changes.
This will output both minified and unminified versions of the CSS to the CSS directory and watch the src directory for changes.
It's aliased to the command:
```npm run build:watch```
If you'd like to just build the css once without watching the src directory run
If you'd like to just build the CSS once without watching the src directory, run:
```npm run build```
If you want to check that a class hasn't been redefined or 'mutated' there is a linter to check that all of the classes have only been defined once. This can be useful if you are using another library or have written some of your own css and want to make sure there are no naming collisions. To do this run the command
If you want to check that a class hasn't been redefined or 'mutated,' there is a linter to check that all of the classes have only been defined once. This can be useful if you are using another library or have written some of your own CSS and want to make sure there are no naming collisions. To do this run the command:
```npm run mutations```
@ -88,7 +88,7 @@ generate and organize the documentation for components as demonstrated at http:/
- [DWYL Learn Tachyons](https://github.com/dwyl/learn-tachyons): Learn how to use Tachyons to craft beautiful, responsive, functional and fast UI with minimal CSS
- [Tachyons TLDR](https://tachyons-tldr.now.sh/#/classes): Quick lookup for Tachyons classes, scales and color palette
- [Tachyons Pro](https://tachyons.pro/): Fun quiz for memorizing class names
- [Tachyons Pro](https://tachyonspro.netlify.app/): Fun quiz for memorizing class names
## Contributing
@ -97,45 +97,22 @@ Please read our [code of conduct](https://github.com/tachyons-css/tachyons/blob/
## Tachyons in Production
A longer list of sites that use tachyons in production can be found in sites.md
We love letting the community see what people are building so please add your link to sites.md in a PR or by opening an issue if you're willing to share to your site or project.
We love letting the community see what people are building. Please add your link to sites.md in a PR or by opening an issue if you're willing to share to your site or project.
**Featured Sites**
* https://interfacelovers.com
* https://npmjs.com
* https://womenwho.design
* https://friendstalkfrontend.com
* https://play.webvr.rocks
* https://gohugo.io
* https://coralproject.net
* http://www.philipyoungg.com
* https://gitpoint.co
* https://2017.nodeconf.com.ar
* https://goldenstaterecord.com
* http://hicuties.com
* https://urlbox.io
* https://fontawesome.com
* https://purple3.herokuapp.com
* http://blunt.af/tachy.app/
* https://fenderdigital.github.io/css-utilities/intro/
* https://play.cash
* https://bitmidi.com
And of course...
* http://tachyons.io
## Sponsors
Development of Tachyons is supported by
* [Digital Ocean](https://digitalocean.com)
* [DWYL](https://dwyl.com)
* [VTEX](https://lab.vtex.com)
* [Manifold](https://manifold.co)
## Help
If you have a question or need help feel free to [open an issue here](https://github.com/tachyons-css/tachyons/issues/new) or jump into the [Tachyons slack channel](http://tachyons-slack-invite.herokuapp.com).
## License
MIT

View File

@ -1,24 +0,0 @@
{
"name": "tachyons",
"description": "Functional CSS for humans",
"main": "css/tachyons.css",
"authors": [
"mrmrs"
],
"license": "MIT",
"keywords": [
"css",
"design",
"system",
"responsive",
"design"
],
"homepage": "http://tachyons.io",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}

View File

@ -1,4 +1,4 @@
/*! TACHYONS v4.11.0 | http://tachyons.io */
/*! TACHYONS v4.12.0 | http://tachyons.io */
/*
*
* ________ ______
@ -397,6 +397,8 @@ img { max-width: 100%; }
.b--washed-red { border-color: #ffdfdf; }
.b--transparent { border-color: transparent; }
.b--inherit { border-color: inherit; }
.b--initial { border-color: initial; }
.b--unset { border-color: unset; }
/*
BORDER RADIUS
@ -433,6 +435,9 @@ img { max-width: 100%; }
.br--top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.br--right { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.br--left { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.br-inherit { border-radius: inherit; }
.br-initial { border-radius: initial; }
.br-unset { border-radius: unset; }
/*
BORDER STYLES
@ -1126,6 +1131,7 @@ code, .code { font-family: Consolas, monaco, monospace; }
.washed-yellow { color: #fffceb; }
.washed-red { color: #ffdfdf; }
.color-inherit { color: inherit; }
/* Background colors */
.bg-black-90 { background-color: rgba( 0, 0, 0, .9 ); }
.bg-black-80 { background-color: rgba( 0, 0, 0, .8 ); }
.bg-black-70 { background-color: rgba( 0, 0, 0, .7 ); }
@ -1145,7 +1151,6 @@ code, .code { font-family: Consolas, monaco, monospace; }
.bg-white-30 { background-color: rgba( 255, 255, 255, .3 ); }
.bg-white-20 { background-color: rgba( 255, 255, 255, .2 ); }
.bg-white-10 { background-color: rgba( 255, 255, 255, .1 ); }
/* Background colors */
.bg-black { background-color: #000; }
.bg-near-black { background-color: #111; }
.bg-dark-gray { background-color: #333; }
@ -2070,6 +2075,9 @@ code, .code { font-family: Consolas, monaco, monospace; }
.br--top-ns { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.br--right-ns { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.br--left-ns { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.br-inherit-ns { border-radius: inherit; }
.br-initial-ns { border-radius: initial; }
.br-unset-ns { border-radius: unset; }
.b--dotted-ns { border-style: dotted; }
.b--dashed-ns { border-style: dashed; }
.b--solid-ns { border-style: solid; }
@ -2379,6 +2387,41 @@ code, .code { font-family: Consolas, monaco, monospace; }
.mh5-ns { margin-left: 4rem; margin-right: 4rem; }
.mh6-ns { margin-left: 8rem; margin-right: 8rem; }
.mh7-ns { margin-left: 16rem; margin-right: 16rem; }
.na1-ns { margin: -0.25rem; }
.na2-ns { margin: -0.5rem; }
.na3-ns { margin: -1rem; }
.na4-ns { margin: -2rem; }
.na5-ns { margin: -4rem; }
.na6-ns { margin: -8rem; }
.na7-ns { margin: -16rem; }
.nl1-ns { margin-left: -0.25rem; }
.nl2-ns { margin-left: -0.5rem; }
.nl3-ns { margin-left: -1rem; }
.nl4-ns { margin-left: -2rem; }
.nl5-ns { margin-left: -4rem; }
.nl6-ns { margin-left: -8rem; }
.nl7-ns { margin-left: -16rem; }
.nr1-ns { margin-right: -0.25rem; }
.nr2-ns { margin-right: -0.5rem; }
.nr3-ns { margin-right: -1rem; }
.nr4-ns { margin-right: -2rem; }
.nr5-ns { margin-right: -4rem; }
.nr6-ns { margin-right: -8rem; }
.nr7-ns { margin-right: -16rem; }
.nb1-ns { margin-bottom: -0.25rem; }
.nb2-ns { margin-bottom: -0.5rem; }
.nb3-ns { margin-bottom: -1rem; }
.nb4-ns { margin-bottom: -2rem; }
.nb5-ns { margin-bottom: -4rem; }
.nb6-ns { margin-bottom: -8rem; }
.nb7-ns { margin-bottom: -16rem; }
.nt1-ns { margin-top: -0.25rem; }
.nt2-ns { margin-top: -0.5rem; }
.nt3-ns { margin-top: -1rem; }
.nt4-ns { margin-top: -2rem; }
.nt5-ns { margin-top: -4rem; }
.nt6-ns { margin-top: -8rem; }
.nt7-ns { margin-top: -16rem; }
.strike-ns { text-decoration: line-through; }
.underline-ns { text-decoration: underline; }
.no-underline-ns { text-decoration: none; }
@ -2458,6 +2501,9 @@ code, .code { font-family: Consolas, monaco, monospace; }
.br--top-m { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.br--right-m { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.br--left-m { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.br-inherit-m { border-radius: inherit; }
.br-initial-m { border-radius: initial; }
.br-unset-m { border-radius: unset; }
.b--dotted-m { border-style: dotted; }
.b--dashed-m { border-style: dashed; }
.b--solid-m { border-style: solid; }
@ -2767,6 +2813,41 @@ code, .code { font-family: Consolas, monaco, monospace; }
.mh5-m { margin-left: 4rem; margin-right: 4rem; }
.mh6-m { margin-left: 8rem; margin-right: 8rem; }
.mh7-m { margin-left: 16rem; margin-right: 16rem; }
.na1-m { margin: -0.25rem; }
.na2-m { margin: -0.5rem; }
.na3-m { margin: -1rem; }
.na4-m { margin: -2rem; }
.na5-m { margin: -4rem; }
.na6-m { margin: -8rem; }
.na7-m { margin: -16rem; }
.nl1-m { margin-left: -0.25rem; }
.nl2-m { margin-left: -0.5rem; }
.nl3-m { margin-left: -1rem; }
.nl4-m { margin-left: -2rem; }
.nl5-m { margin-left: -4rem; }
.nl6-m { margin-left: -8rem; }
.nl7-m { margin-left: -16rem; }
.nr1-m { margin-right: -0.25rem; }
.nr2-m { margin-right: -0.5rem; }
.nr3-m { margin-right: -1rem; }
.nr4-m { margin-right: -2rem; }
.nr5-m { margin-right: -4rem; }
.nr6-m { margin-right: -8rem; }
.nr7-m { margin-right: -16rem; }
.nb1-m { margin-bottom: -0.25rem; }
.nb2-m { margin-bottom: -0.5rem; }
.nb3-m { margin-bottom: -1rem; }
.nb4-m { margin-bottom: -2rem; }
.nb5-m { margin-bottom: -4rem; }
.nb6-m { margin-bottom: -8rem; }
.nb7-m { margin-bottom: -16rem; }
.nt1-m { margin-top: -0.25rem; }
.nt2-m { margin-top: -0.5rem; }
.nt3-m { margin-top: -1rem; }
.nt4-m { margin-top: -2rem; }
.nt5-m { margin-top: -4rem; }
.nt6-m { margin-top: -8rem; }
.nt7-m { margin-top: -16rem; }
.strike-m { text-decoration: line-through; }
.underline-m { text-decoration: underline; }
.no-underline-m { text-decoration: none; }
@ -2846,6 +2927,9 @@ code, .code { font-family: Consolas, monaco, monospace; }
.br--top-l { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.br--right-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.br--left-l { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.br-inherit-l { border-radius: inherit; }
.br-initial-l { border-radius: initial; }
.br-unset-l { border-radius: unset; }
.b--dotted-l { border-style: dotted; }
.b--dashed-l { border-style: dashed; }
.b--solid-l { border-style: solid; }
@ -3155,6 +3239,41 @@ code, .code { font-family: Consolas, monaco, monospace; }
.mh5-l { margin-left: 4rem; margin-right: 4rem; }
.mh6-l { margin-left: 8rem; margin-right: 8rem; }
.mh7-l { margin-left: 16rem; margin-right: 16rem; }
.na1-l { margin: -0.25rem; }
.na2-l { margin: -0.5rem; }
.na3-l { margin: -1rem; }
.na4-l { margin: -2rem; }
.na5-l { margin: -4rem; }
.na6-l { margin: -8rem; }
.na7-l { margin: -16rem; }
.nl1-l { margin-left: -0.25rem; }
.nl2-l { margin-left: -0.5rem; }
.nl3-l { margin-left: -1rem; }
.nl4-l { margin-left: -2rem; }
.nl5-l { margin-left: -4rem; }
.nl6-l { margin-left: -8rem; }
.nl7-l { margin-left: -16rem; }
.nr1-l { margin-right: -0.25rem; }
.nr2-l { margin-right: -0.5rem; }
.nr3-l { margin-right: -1rem; }
.nr4-l { margin-right: -2rem; }
.nr5-l { margin-right: -4rem; }
.nr6-l { margin-right: -8rem; }
.nr7-l { margin-right: -16rem; }
.nb1-l { margin-bottom: -0.25rem; }
.nb2-l { margin-bottom: -0.5rem; }
.nb3-l { margin-bottom: -1rem; }
.nb4-l { margin-bottom: -2rem; }
.nb5-l { margin-bottom: -4rem; }
.nb6-l { margin-bottom: -8rem; }
.nb7-l { margin-bottom: -16rem; }
.nt1-l { margin-top: -0.25rem; }
.nt2-l { margin-top: -0.5rem; }
.nt3-l { margin-top: -1rem; }
.nt4-l { margin-top: -2rem; }
.nt5-l { margin-top: -4rem; }
.nt6-l { margin-top: -8rem; }
.nt7-l { margin-top: -16rem; }
.strike-l { text-decoration: line-through; }
.underline-l { text-decoration: underline; }
.no-underline-l { text-decoration: none; }
@ -3193,115 +3312,4 @@ code, .code { font-family: Consolas, monaco, monospace; }
.v-top-l { vertical-align: top; }
.v-btm-l { vertical-align: bottom; }
}
@media screen and (min-width: 30em)) {
.na1-ns { margin: -0.25rem; }
.na2-ns { margin: -0.5rem; }
.na3-ns { margin: -1rem; }
.na4-ns { margin: -2rem; }
.na5-ns { margin: -4rem; }
.na6-ns { margin: -8rem; }
.na7-ns { margin: -16rem; }
.nl1-ns { margin-left: -0.25rem; }
.nl2-ns { margin-left: -0.5rem; }
.nl3-ns { margin-left: -1rem; }
.nl4-ns { margin-left: -2rem; }
.nl5-ns { margin-left: -4rem; }
.nl6-ns { margin-left: -8rem; }
.nl7-ns { margin-left: -16rem; }
.nr1-ns { margin-right: -0.25rem; }
.nr2-ns { margin-right: -0.5rem; }
.nr3-ns { margin-right: -1rem; }
.nr4-ns { margin-right: -2rem; }
.nr5-ns { margin-right: -4rem; }
.nr6-ns { margin-right: -8rem; }
.nr7-ns { margin-right: -16rem; }
.nb1-ns { margin-bottom: -0.25rem; }
.nb2-ns { margin-bottom: -0.5rem; }
.nb3-ns { margin-bottom: -1rem; }
.nb4-ns { margin-bottom: -2rem; }
.nb5-ns { margin-bottom: -4rem; }
.nb6-ns { margin-bottom: -8rem; }
.nb7-ns { margin-bottom: -16rem; }
.nt1-ns { margin-top: -0.25rem; }
.nt2-ns { margin-top: -0.5rem; }
.nt3-ns { margin-top: -1rem; }
.nt4-ns { margin-top: -2rem; }
.nt5-ns { margin-top: -4rem; }
.nt6-ns { margin-top: -8rem; }
.nt7-ns { margin-top: -16rem; }
}
@media screen and (min-width: 30em) and (max-width: 60em)) {
.na1-m { margin: -0.25rem; }
.na2-m { margin: -0.5rem; }
.na3-m { margin: -1rem; }
.na4-m { margin: -2rem; }
.na5-m { margin: -4rem; }
.na6-m { margin: -8rem; }
.na7-m { margin: -16rem; }
.nl1-m { margin-left: -0.25rem; }
.nl2-m { margin-left: -0.5rem; }
.nl3-m { margin-left: -1rem; }
.nl4-m { margin-left: -2rem; }
.nl5-m { margin-left: -4rem; }
.nl6-m { margin-left: -8rem; }
.nl7-m { margin-left: -16rem; }
.nr1-m { margin-right: -0.25rem; }
.nr2-m { margin-right: -0.5rem; }
.nr3-m { margin-right: -1rem; }
.nr4-m { margin-right: -2rem; }
.nr5-m { margin-right: -4rem; }
.nr6-m { margin-right: -8rem; }
.nr7-m { margin-right: -16rem; }
.nb1-m { margin-bottom: -0.25rem; }
.nb2-m { margin-bottom: -0.5rem; }
.nb3-m { margin-bottom: -1rem; }
.nb4-m { margin-bottom: -2rem; }
.nb5-m { margin-bottom: -4rem; }
.nb6-m { margin-bottom: -8rem; }
.nb7-m { margin-bottom: -16rem; }
.nt1-m { margin-top: -0.25rem; }
.nt2-m { margin-top: -0.5rem; }
.nt3-m { margin-top: -1rem; }
.nt4-m { margin-top: -2rem; }
.nt5-m { margin-top: -4rem; }
.nt6-m { margin-top: -8rem; }
.nt7-m { margin-top: -16rem; }
}
@media screen and (min-width: 60em)) {
.na1-l { margin: -0.25rem; }
.na2-l { margin: -0.5rem; }
.na3-l { margin: -1rem; }
.na4-l { margin: -2rem; }
.na5-l { margin: -4rem; }
.na6-l { margin: -8rem; }
.na7-l { margin: -16rem; }
.nl1-l { margin-left: -0.25rem; }
.nl2-l { margin-left: -0.5rem; }
.nl3-l { margin-left: -1rem; }
.nl4-l { margin-left: -2rem; }
.nl5-l { margin-left: -4rem; }
.nl6-l { margin-left: -8rem; }
.nl7-l { margin-left: -16rem; }
.nr1-l { margin-right: -0.25rem; }
.nr2-l { margin-right: -0.5rem; }
.nr3-l { margin-right: -1rem; }
.nr4-l { margin-right: -2rem; }
.nr5-l { margin-right: -4rem; }
.nr6-l { margin-right: -8rem; }
.nr7-l { margin-right: -16rem; }
.nb1-l { margin-bottom: -0.25rem; }
.nb2-l { margin-bottom: -0.5rem; }
.nb3-l { margin-bottom: -1rem; }
.nb4-l { margin-bottom: -2rem; }
.nb5-l { margin-bottom: -4rem; }
.nb6-l { margin-bottom: -8rem; }
.nb7-l { margin-bottom: -16rem; }
.nt1-l { margin-top: -0.25rem; }
.nt2-l { margin-top: -0.5rem; }
.nt3-l { margin-top: -1rem; }
.nt4-l { margin-top: -2rem; }
.nt5-l { margin-top: -4rem; }
.nt6-l { margin-top: -8rem; }
.nt7-l { margin-top: -16rem; }
}

File diff suppressed because one or more lines are too long

View File

@ -1,5 +1,7 @@
The MIT License (MIT)
Copyright © 2020 Adam Morse & John Otander
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

321
llms.txt Normal file
View File

@ -0,0 +1,321 @@
# Tachyons CSS
> Functional CSS for humans. Quickly build and design new UI without writing CSS.
Tachyons is a functional/atomic CSS framework that provides single-purpose utility classes. Instead of writing custom CSS, you compose classes directly in HTML to style elements. The framework is mobile-first, lightweight (~14kB), and optimized for maximum gzip compression.
## Project Structure
```
/css/ # Compiled CSS output
tachyons.css # Full compiled CSS
tachyons.min.css # Minified production CSS
/src/ # Source CSS modules (PostCSS)
tachyons.css # Main entry point that imports all modules
_*.css # Individual module files (prefixed with underscore)
```
## Core Principles
- Everything should be 100% responsive
- Single-purpose class structure (one class = one CSS property)
- Mobile-first CSS architecture
- 8px baseline grid for spacing
- Designing in the browser should be easy
- Changes to one interface shouldn't break others
## Naming Conventions
Tachyons uses abbreviated class names following consistent patterns:
### Base + Modifier Pattern
Classes follow the pattern: `{property}{value}` or `{property}{direction}{value}`
Examples:
- `pa3` = padding-all: 1rem
- `mt2` = margin-top: 0.5rem
- `f4` = font-size: 1.25rem
- `w-50` = width: 50%
### Responsive Suffixes
All classes support responsive variants via breakpoint suffixes:
| Suffix | Breakpoint | Description |
|--------|------------|-------------|
| (none) | All | Mobile-first base styles |
| `-ns` | ≥30em (480px) | Not small (medium and up) |
| `-m` | 30em60em | Medium only |
| `-l` | ≥60em (960px) | Large and up |
Example: `dn db-ns` = display:none on mobile, display:block on medium+
## Spacing Scale
Uses powers of two scale (8px baseline):
| Step | Value | CSS Variable |
|------|-------|--------------|
| 0 | 0 | --spacing-none |
| 1 | 0.25rem (4px) | --spacing-extra-small |
| 2 | 0.5rem (8px) | --spacing-small |
| 3 | 1rem (16px) | --spacing-medium |
| 4 | 2rem (32px) | --spacing-large |
| 5 | 4rem (64px) | --spacing-extra-large |
| 6 | 8rem (128px) | --spacing-extra-extra-large |
| 7 | 16rem (256px) | --spacing-extra-extra-extra-large |
### Spacing Classes
- **Padding**: `pa`, `pl`, `pr`, `pt`, `pb`, `pv` (vertical), `ph` (horizontal)
- **Margin**: `ma`, `ml`, `mr`, `mt`, `mb`, `mv` (vertical), `mh` (horizontal)
Examples: `pa3`, `mt4`, `ph2-ns`, `mb0-l`
## Type Scale
| Class | Size |
|-------|------|
| `.f-headline`, `.f-6` | 6rem |
| `.f-subheadline`, `.f-5` | 5rem |
| `.f1` | 3rem |
| `.f2` | 2.25rem |
| `.f3` | 1.5rem |
| `.f4` | 1.25rem |
| `.f5` | 1rem |
| `.f6` | 0.875rem |
| `.f7` | 0.75rem (use sparingly) |
## Width Scale
### Fixed Widths (powers of 2)
| Class | Width |
|-------|-------|
| `.w1` | 1rem |
| `.w2` | 2rem |
| `.w3` | 4rem |
| `.w4` | 8rem |
| `.w5` | 16rem |
### Percentage Widths
`.w-10`, `.w-20`, `.w-25`, `.w-30`, `.w-33`, `.w-34`, `.w-40`, `.w-50`, `.w-60`, `.w-70`, `.w-75`, `.w-80`, `.w-90`, `.w-100`
Also: `.w-third`, `.w-two-thirds`, `.w-auto`
## Color System
### Grayscale
`black`, `near-black`, `dark-gray`, `mid-gray`, `gray`, `silver`, `light-silver`, `moon-gray`, `light-gray`, `near-white`, `white`
### Transparency
- Black: `black-90` through `black-05` (90% to 5% opacity)
- White: `white-90` through `white-10`
### Colors
`dark-red`, `red`, `light-red`, `orange`, `gold`, `yellow`, `light-yellow`, `purple`, `light-purple`, `dark-pink`, `hot-pink`, `pink`, `light-pink`, `dark-green`, `green`, `light-green`, `navy`, `dark-blue`, `blue`, `light-blue`, `lightest-blue`, `washed-blue`, `washed-green`, `washed-yellow`, `washed-red`
### Color Classes
- **Text color**: Use color name directly (e.g., `blue`, `dark-gray`)
- **Background**: Prefix with `bg-` (e.g., `bg-blue`, `bg-dark-gray`)
- **Border**: Prefix with `b--` (e.g., `b--blue`, `b--dark-gray`)
## Common Class Categories
### Display
`dn` (none), `di` (inline), `db` (block), `dib` (inline-block), `dt` (table), `dtc` (table-cell), `flex`, `inline-flex`
### Flexbox
- Container: `flex`, `inline-flex`, `flex-column`, `flex-row`, `flex-wrap`
- Alignment: `items-center`, `items-start`, `items-end`, `items-baseline`, `items-stretch`
- Justify: `justify-center`, `justify-start`, `justify-end`, `justify-between`, `justify-around`
- Self: `self-center`, `self-start`, `self-end`
- Flex: `flex-auto`, `flex-none`, `flex-grow-0`, `flex-grow-1`, `flex-shrink-0`, `flex-shrink-1`
- Order: `order-0` through `order-8`, `order-last`
### Position
`static`, `relative`, `absolute`, `fixed`, `sticky`
### Coordinates
`top-0`, `right-0`, `bottom-0`, `left-0`, `top-1`, `top-2`, etc.
### Border Radius
`br0`, `br1`, `br2`, `br3`, `br4`, `br-100` (circle), `br-pill` (rounded pill)
Directional: `br--top`, `br--bottom`, `br--left`, `br--right`
### Borders
- Width: `bw0`, `bw1`, `bw2`, `bw3`, `bw4`, `bw5`
- Style: `b--solid`, `b--dashed`, `b--dotted`, `b--none`
- Sides: `ba` (all), `bt` (top), `br` (right), `bb` (bottom), `bl` (left), `bn` (none)
### Typography
- Weight: `fw1` (100) through `fw9` (900), `normal`, `b` (bold)
- Style: `i` (italic), `fs-normal`
- Alignment: `tl` (left), `tr` (right), `tc` (center), `tj` (justify)
- Transform: `ttc` (capitalize), `ttl` (lowercase), `ttu` (uppercase), `ttn` (none)
- Decoration: `no-underline`, `underline`, `strike`
- Line height: `lh-solid` (1), `lh-title` (1.25), `lh-copy` (1.5)
- Letter spacing: `tracked`, `tracked-tight`, `tracked-mega`
### Visibility
`o-0` through `o-100` (opacity), `v-hidden`, `v-visible`, `clip` (visually hidden)
### Overflow
`overflow-visible`, `overflow-hidden`, `overflow-scroll`, `overflow-auto`
X/Y: `overflow-x-visible`, `overflow-y-hidden`, etc.
### Heights
Fixed: `h1`, `h2`, `h3`, `h4`, `h5` (1rem to 16rem)
Percentage: `h-25`, `h-50`, `h-75`, `h-100`
Viewport: `vh-25`, `vh-50`, `vh-75`, `vh-100`, `min-vh-100`
### Max Width
`mw1` through `mw9`, `mw-100`, `mw-none`
### Z-Index
`z-0`, `z-1`, `z-2`, `z-3`, `z-4`, `z-5`, `z-999`, `z-9999`, `z-max`, `z-inherit`, `z-initial`, `z-unset`
### Floats & Clears
`fl` (left), `fr` (right), `fn` (none), `cf` (clearfix)
### Lists
`list` (removes default styling)
### Box Sizing
`border-box` (applied globally via `*`)
### Hovers
Prefix with `hover-` for hover states: `hover-bg-blue`, `hover-black`, etc.
## Usage Examples
### Card Component
```html
<article class="mw5 center bg-white br3 pa3 pa4-ns mv3 ba b--black-10">
<div class="tc">
<img src="avatar.jpg" class="br-100 h4 w4 dib ba b--black-05 pa2">
<h1 class="f3 mb2">Jane Doe</h1>
<h2 class="f5 fw4 gray mt0">Designer</h2>
</div>
</article>
```
### Responsive Navigation
```html
<nav class="flex flex-column flex-row-ns justify-between items-center pa3">
<a class="f4 fw6 link black">Logo</a>
<div class="flex flex-column flex-row-ns">
<a class="link black pa2">About</a>
<a class="link black pa2">Work</a>
<a class="link black pa2">Contact</a>
</div>
</nav>
```
### Button
```html
<a class="f6 link dim br-pill ph3 pv2 mb2 dib white bg-dark-blue">
Click Me
</a>
```
### Responsive Grid
```html
<div class="cf">
<div class="fl w-100 w-50-m w-25-l pa2">Column 1</div>
<div class="fl w-100 w-50-m w-25-l pa2">Column 2</div>
<div class="fl w-100 w-50-m w-25-l pa2">Column 3</div>
<div class="fl w-100 w-50-m w-25-l pa2">Column 4</div>
</div>
```
### Flexbox Grid
```html
<div class="flex flex-wrap">
<div class="w-100 w-50-m w-25-l pa2">Column 1</div>
<div class="w-100 w-50-m w-25-l pa2">Column 2</div>
<div class="w-100 w-50-m w-25-l pa2">Column 3</div>
<div class="w-100 w-50-m w-25-l pa2">Column 4</div>
</div>
```
## Build Commands
```bash
npm install # Install dependencies
npm start # Build and watch for changes
npm run build # Build CSS once
npm run mutations # Check for class mutations/redefinitions
```
## CDN Usage
```html
<link rel="stylesheet" href="https://unpkg.com/tachyons@4/css/tachyons.min.css">
```
## Source Modules
The source is organized into focused single-responsibility modules:
| Module | Description |
|--------|-------------|
| `_normalize.css` | CSS reset/normalization |
| `_box-sizing.css` | Border-box sizing |
| `_spacing.css` | Margin and padding |
| `_type-scale.css` | Font sizes |
| `_typography.css` | Font families, measures |
| `_widths.css` | Width utilities |
| `_heights.css` | Height utilities |
| `_max-widths.css` | Max-width utilities |
| `_display.css` | Display properties |
| `_flexbox.css` | Flexbox utilities |
| `_position.css` | Position utilities |
| `_coordinates.css` | Top/right/bottom/left |
| `_floats.css` | Float utilities |
| `_colors.css` | CSS color variables |
| `_skins.css` | Text and background colors |
| `_border-colors.css` | Border colors |
| `_borders.css` | Border utilities |
| `_border-radius.css` | Border radius |
| `_border-widths.css` | Border widths |
| `_border-style.css` | Border styles |
| `_box-shadow.css` | Box shadows |
| `_opacity.css` | Opacity utilities |
| `_overflow.css` | Overflow utilities |
| `_visibility.css` | Visibility utilities |
| `_z-index.css` | Z-index scale |
| `_hovers.css` | Hover state utilities |
| `_font-family.css` | Font stacks |
| `_font-weight.css` | Font weights |
| `_font-style.css` | Italic/normal |
| `_line-height.css` | Line heights |
| `_letter-spacing.css` | Letter spacing |
| `_text-align.css` | Text alignment |
| `_text-transform.css` | Text transforms |
| `_text-decoration.css` | Underlines, etc. |
| `_vertical-align.css` | Vertical alignment |
| `_white-space.css` | White space handling |
| `_word-break.css` | Word breaking |
| `_aspect-ratios.css` | Aspect ratio containers |
| `_images.css` | Image utilities |
| `_background-size.css` | Background sizing |
| `_background-position.css` | Background positioning |
| `_lists.css` | List styling |
| `_tables.css` | Table utilities |
| `_forms.css` | Form element resets |
| `_utilities.css` | Misc utilities |
| `_negative-margins.css` | Negative margin utilities |
| `_debug.css` | Layout debugging |
| `_debug-children.css` | Debug children outlines |
| `_debug-grid.css` | Grid overlay debugging |
| `_media-queries.css` | Breakpoint definitions |
## Key CSS Variables
Spacing, colors, and breakpoints are defined as CSS custom properties in their respective modules. Override these in your own CSS to customize the design system.
## Documentation
Full documentation: http://tachyons.io/docs
Component library: http://tachyons.io/components
GitHub: https://github.com/tachyons-css/tachyons

View File

@ -1,6 +1,6 @@
{
"name": "tachyons",
"version": "4.11.0",
"version": "4.12.0",
"description": "Functional CSS for humans",
"author": "mrmrs",
"style": "css/tachyons.min.css",

View File

@ -1,4 +1,6 @@
* https://gohugo.io
* https://npmjs.com
* https://www.offen.dev
* https://interfacelovers.com
* https://friendstalkfrontend.com
* http://www.philipyoungg.com
@ -100,4 +102,10 @@
* https://cryptocurrencyjobs.co/
* https://foundlo.st
* https://jjude.com
* http://www.spokesman.com
* https://beta.observablehq.com/
* https://www.medienblau.de
* https://c.atet.in
* https://tools.kaklabs.com
* https://eppendocs.de
* https://sparrowmobile.com/

View File

@ -84,3 +84,5 @@
.b--transparent { border-color: var(--transparent); }
.b--inherit { border-color: inherit; }
.b--initial { border-color: initial; }
.b--unset { border-color: unset; }

View File

@ -47,6 +47,9 @@
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.br-inherit { border-radius: inherit; }
.br-initial { border-radius: initial; }
.br-unset { border-radius: unset; }
@media (--breakpoint-not-small) {
.br0-ns { border-radius: 0; }
@ -72,6 +75,9 @@
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.br-inherit-ns { border-radius: inherit; }
.br-initial-ns { border-radius: initial; }
.br-unset-ns { border-radius: unset; }
}
@media (--breakpoint-medium) {
@ -98,6 +104,9 @@
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.br-inherit-m { border-radius: inherit; }
.br-initial-m { border-radius: initial; }
.br-unset-m { border-radius: unset; }
}
@media (--breakpoint-large) {
@ -124,4 +133,7 @@
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.br-inherit-l { border-radius: inherit; }
.br-initial-l { border-radius: initial; }
.br-unset-l { border-radius: unset; }
}

View File

@ -68,7 +68,7 @@
.nt6 { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
.nt7 { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }
@media (--breakpoint-not-small)) {
@media (--breakpoint-not-small) {
.na1-ns { margin: calc(-1 * var(--spacing-extra-small)); }
.na2-ns { margin: calc(-1 * var(--spacing-small)); }
@ -112,7 +112,7 @@
}
@media (--breakpoint-medium)) {
@media (--breakpoint-medium) {
.na1-m { margin: calc(-1 * var(--spacing-extra-small)); }
.na2-m { margin: calc(-1 * var(--spacing-small)); }
.na3-m { margin: calc(-1 * var(--spacing-medium)); }
@ -155,7 +155,7 @@
}
@media (--breakpoint-large)) {
@media (--breakpoint-large) {
.na1-l { margin: calc(-1 * var(--spacing-extra-small)); }
.na2-l { margin: calc(-1 * var(--spacing-small)); }
.na3-l { margin: calc(-1 * var(--spacing-medium)); }

View File

@ -71,6 +71,10 @@
.washed-red { color: var(--washed-red); }
.color-inherit { color: inherit; }
/* Background colors */
.bg-black-90 { background-color: var(--black-90); }
.bg-black-80 { background-color: var(--black-80); }
.bg-black-70 { background-color: var(--black-70); }
@ -91,10 +95,6 @@
.bg-white-20 { background-color: var(--white-20); }
.bg-white-10 { background-color: var(--white-10); }
/* Background colors */
.bg-black { background-color: var(--black); }
.bg-near-black { background-color: var(--near-black); }
.bg-dark-gray { background-color: var(--dark-gray); }

View File

@ -1,4 +1,4 @@
/*! TACHYONS v4.11.0 | http://tachyons.io */
/*! TACHYONS v4.12.0 | http://tachyons.io */
/*
*