mirror of
https://github.com/tachyons-css/tachyons.git
synced 2026-02-06 16:31:49 +00:00
Compare commits
No commits in common. "main" and "v4.11.0" have entirely different histories.
24
bower.json
Normal file
24
bower.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"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"
|
||||
]
|
||||
}
|
||||
234
css/tachyons.css
234
css/tachyons.css
@ -1,4 +1,4 @@
|
||||
/*! TACHYONS v4.12.0 | http://tachyons.io */
|
||||
/*! TACHYONS v4.11.0 | http://tachyons.io */
|
||||
/*
|
||||
*
|
||||
* ________ ______
|
||||
@ -397,8 +397,6 @@ 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
|
||||
@ -435,9 +433,6 @@ 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
|
||||
@ -1131,7 +1126,6 @@ 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 ); }
|
||||
@ -1151,6 +1145,7 @@ 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; }
|
||||
@ -2075,9 +2070,6 @@ 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; }
|
||||
@ -2387,41 +2379,6 @@ 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; }
|
||||
@ -2501,9 +2458,6 @@ 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; }
|
||||
@ -2813,41 +2767,6 @@ 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; }
|
||||
@ -2927,9 +2846,6 @@ 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; }
|
||||
@ -3239,41 +3155,6 @@ 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; }
|
||||
@ -3312,4 +3193,115 @@ 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; }
|
||||
}
|
||||
|
||||
|
||||
4
css/tachyons.min.css
vendored
4
css/tachyons.min.css
vendored
File diff suppressed because one or more lines are too long
2
license
2
license
@ -1,7 +1,5 @@
|
||||
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
321
llms.txt
@ -1,321 +0,0 @@
|
||||
# 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` | 30em–60em | 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
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "tachyons",
|
||||
"version": "4.12.0",
|
||||
"version": "4.11.0",
|
||||
"description": "Functional CSS for humans",
|
||||
"author": "mrmrs",
|
||||
"style": "css/tachyons.min.css",
|
||||
|
||||
@ -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/css/tachyons.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.11.0/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://tachyonspro.netlify.app/): Fun quiz for memorizing class names
|
||||
- [Tachyons Pro](https://tachyons.pro/): Fun quiz for memorizing class names
|
||||
|
||||
## Contributing
|
||||
|
||||
@ -97,22 +97,45 @@ 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. 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 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.
|
||||
|
||||
**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
|
||||
8
sites.md
8
sites.md
@ -1,6 +1,4 @@
|
||||
* https://gohugo.io
|
||||
* https://npmjs.com
|
||||
* https://www.offen.dev
|
||||
* https://interfacelovers.com
|
||||
* https://friendstalkfrontend.com
|
||||
* http://www.philipyoungg.com
|
||||
@ -102,10 +100,4 @@
|
||||
* 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/
|
||||
|
||||
@ -84,5 +84,3 @@
|
||||
|
||||
.b--transparent { border-color: var(--transparent); }
|
||||
.b--inherit { border-color: inherit; }
|
||||
.b--initial { border-color: initial; }
|
||||
.b--unset { border-color: unset; }
|
||||
|
||||
@ -47,9 +47,6 @@
|
||||
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; }
|
||||
@ -75,9 +72,6 @@
|
||||
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) {
|
||||
@ -104,9 +98,6 @@
|
||||
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) {
|
||||
@ -133,7 +124,4 @@
|
||||
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; }
|
||||
}
|
||||
|
||||
@ -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)); }
|
||||
|
||||
@ -71,10 +71,6 @@
|
||||
.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); }
|
||||
@ -95,6 +91,10 @@
|
||||
.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); }
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/*! TACHYONS v4.12.0 | http://tachyons.io */
|
||||
/*! TACHYONS v4.11.0 | http://tachyons.io */
|
||||
|
||||
/*
|
||||
*
|
||||
|
||||
Loading…
Reference in New Issue
Block a user