Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expand font-size and font-weight scales, rename classes for clarity, fix docs #636

Open
wants to merge 9 commits into
base: v5.0.0-1
Choose a base branch
from
Open

Expand font-size and font-weight scales, rename classes for clarity, fix docs #636

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
29fc75f
Expand font-size scale, rename classes for clarity
jeremykohn Aug 20, 2019
47bad6c
Use aliases for font-size and font-style classes
jeremykohn Aug 21, 2019
7993e25
Add font-weight classes and rename literal classes
jeremykohn Aug 21, 2019
555ebc4
Fix headings in docs: Literal Values to Modifiers
jeremykohn Aug 21, 2019
1cb4757
Update font-style and font-weight -s -m -l classes
jeremykohn Aug 21, 2019
4bf3a3f
Update class-naming.md
jeremykohn Aug 22, 2019
e6aefa2
Rename fw-b to fw-bold
jeremykohn Aug 28, 2019
01047d3
Rename fstyle-i to fstyle-italic
jeremykohn Aug 28, 2019
d4f2f68
Fix docstrings
jeremykohn Aug 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
247 changes: 138 additions & 109 deletions css/tachyons.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -445,8 +445,6 @@ http://tachyons.io/docs/themes/border-radius/
- 3 = 3rd step in scale
- 4 = 4th step in scale

### Literal values

- `-100` = 100%
- `-pill` = 9999px

Expand Down Expand Up @@ -556,8 +554,6 @@ http://tachyons.io/docs/themes/box-shadow/
- `-4` = offset 2px 2px 8px 0px
- `-5` = offset 4px 4px 8px 0px

### Literal Values

- `-none` = none

### Media Query Extensions
Expand Down Expand Up @@ -874,17 +870,25 @@ http://tachyons.io/docs/typography/font-style/

### Base

- i = italic
- fs-normal = normal
- fstyle = font-style

### Modifiers

- `-italic` = string value italic
- `-normal` = string value normal

### Aliases

- `i` = `font-style: italic`

### Media Query Extensions

- `-s` = small
- `-m` = medium
- `-l` = large
*/
.i { font-style: italic; }
.fs-normal { font-style: normal; }
.i, .fstyle-italic { font-style: italic; }
.fstyle-normal { font-style: normal; }
/*!!!

# FONT WEIGHT
Expand All @@ -899,36 +903,42 @@ http://tachyons.io/docs/typography/font-weight/

### Modifiers

- 1 = literal value 100
- 2 = literal value 200
- 3 = literal value 300
- 4 = literal value 400
- 5 = literal value 500
- 6 = literal value 600
- 7 = literal value 700
- 8 = literal value 800
- 9 = literal value 900
- `-100` = literal value 100
- `-200` = literal value 200
- `-300` = literal value 300
- `-400` = literal value 400
- `-500` = literal value 500
- `-600` = literal value 600
- `-700` = literal value 700
- -`800` = literal value 800
- `-900` = literal value 900
- `-1000` = literal value 1000

- `-bold` = string value bold
- `-normal` = string value normal

### Literal Values
### Aliases

- b = bold
- `b` = `font-weight: bold`

### Media Query Extensions

- `-s` = small
- `-m` = medium
- `-l` = large
*/
.b { font-weight: bold; }
.fw1 { font-weight: 100; }
.fw2 { font-weight: 200; }
.fw3 { font-weight: 300; }
.fw4 { font-weight: 400; }
.fw5 { font-weight: 500; }
.fw6 { font-weight: 600; }
.fw7 { font-weight: 700; }
.fw8 { font-weight: 800; }
.fw9 { font-weight: 900; }
.b, .fw-bold { font-weight: bold; }
.fw-normal { font-weight: normal; }
.fw-100 { font-weight: 100; }
.fw-200 { font-weight: 200; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }
.fw-1000 { font-weight: 1000; }
/*!!!

# FORMS
Expand Down Expand Up @@ -1036,7 +1046,7 @@ http://tachyons.io/docs/typography/line-height

- lh = line height

### Literal Values
### Modifiers

- `-solid` = literal value 1
- `-title` = literal value 1.25
Expand Down Expand Up @@ -2554,19 +2564,25 @@ http://tachyons.io/docs/typography/scale/

### Base

- f = font-size
- fs = font-size

### Modifiers

- 1 = 1st step back in size scale
- 2 = 2nd step back in size scale
- 3 = 3rd step back in size scale
- 4 = 4th step back in size scale
- 5 = 5th step back in size scale
- 6 = 6th step back in size scale
- 7 = 7th step back in size scale
- 8 = 8th step back in size scale
- 0 = Extra large
- 1 = 1st step in size scale
- 2 = 2nd step in size scale
- 3 = 3rd step in size scale
- 4 = 4th step in size scale
- 5 = 5th step in size scale
- 6 = 6th step in size scale
- 7 = 7th step in size scale
- 8 = 8th step in size scale
- 9 = 9th step in size scale
- 10 = 10th step in size scale

### Aliases

- `fs-subheadline` = `font-size: 5rem`
- `fs-headline` = `font-size: 6rem`

### Media Query Extensions

Expand All @@ -2575,15 +2591,16 @@ http://tachyons.io/docs/typography/scale/
- `-l` = large
*/
/* Type Scale */
.f0 { font-size: 6rem; }
.f1 { font-size: 4rem; }
.f2 { font-size: 3rem; }
.f3 { font-size: 2rem; }
.f4 { font-size: 1.5rem; }
.f5 { font-size: 1rem; }
.f6 { font-size: .875rem; }
/* Small and hard to read for many people so use with extreme caution */
.f7 { font-size: .75rem; }
.fs1 { font-size: .75rem; } /* Small and may be hard to read. Use with caution. */
.fs2 { font-size: .875rem; }
.fs3 { font-size: 1rem; }
.fs4 { font-size: 1.25rem; }
.fs5 { font-size: 1.5rem; }
.fs6 { font-size: 2.25rem; }
.fs7 { font-size: 3rem; }
.fs8 { font-size: 4rem; }
.fs9, .fs-subheadline { font-size: 5rem; }
.fs10, .fs-headline { font-size: 6rem; }
/*!!!

# TYPOGRAPHY
Expand Down Expand Up @@ -3121,18 +3138,20 @@ http://tachyons.io/docs/debug-grid/
.fl-s { float: left; _display: inline; }
.fr-s { float: right; _display: inline; }
.fn-s { float: none; }
.i-s { font-style: italic; }
.fs-normal-s { font-style: normal; }
.b-s { font-weight: bold; }
.fw1-s { font-weight: 100; }
.fw2-s { font-weight: 200; }
.fw3-s { font-weight: 300; }
.fw4-s { font-weight: 400; }
.fw5-s { font-weight: 500; }
.fw6-s { font-weight: 600; }
.fw7-s { font-weight: 700; }
.fw8-s { font-weight: 800; }
.fw9-s { font-weight: 900; }
.i-s, .fstyle-italic-s { font-style: italic; }
.fstyle-normal-s { font-style: normal; }
.b-s, .fw-bold-s { font-weight: bold; }
.fw-normal-s { font-weight: normal; }
.fw-100-s { font-weight: 100; }
.fw-200-s { font-weight: 200; }
.fw-300-s { font-weight: 300; }
.fw-400-s { font-weight: 400; }
.fw-500-s { font-weight: 500; }
.fw-600-s { font-weight: 600; }
.fw-700-s { font-weight: 700; }
.fw-800-s { font-weight: 800; }
.fw-900-s { font-weight: 900; }
.fw-1000-s { font-weight: 1000; }
.h1-s { height: 1rem; }
.h2-s { height: 2rem; }
.h3-s { height: 4rem; }
Expand Down Expand Up @@ -3374,14 +3393,16 @@ http://tachyons.io/docs/debug-grid/
.ttl-s { text-transform: lowercase; }
.ttu-s { text-transform: uppercase; }
.ttn-s { text-transform: none; }
.f0-s { font-size: 6rem; }
.f1-s { font-size: 4rem; }
.f2-s { font-size: 3rem; }
.f3-s { font-size: 2rem; }
.f4-s { font-size: 1.5rem; }
.f5-s { font-size: 1rem; }
.f6-s { font-size: .875rem; }
.f7-s { font-size: .75rem; }
.fs1-s { font-size: .75rem; }
.fs2-s { font-size: .875rem; }
.fs3-s { font-size: 1rem; }
.fs4-s { font-size: 1.25rem; }
.fs5-s { font-size: 1.5rem; }
.fs6-s { font-size: 2.25rem; }
.fs7-s { font-size: 3rem; }
.fs8-s { font-size: 4rem; }
.fs9-s, .fs-subheadline-s { font-size: 5rem; }
.fs10-s, .fs-headline-s { font-size: 6rem; }
.measure-s { max-width: 30em; }
.measure-wide-s { max-width: 34em; }
.measure-narrow-s { max-width: 20em; }
Expand Down Expand Up @@ -3549,18 +3570,20 @@ http://tachyons.io/docs/debug-grid/
.fl-m { float: left; _display: inline; }
.fr-m { float: right; _display: inline; }
.fn-m { float: none; }
.i-m { font-style: italic; }
.fs-normal-m { font-style: normal; }
.b-m { font-weight: bold; }
.fw1-m { font-weight: 100; }
.fw2-m { font-weight: 200; }
.fw3-m { font-weight: 300; }
.fw4-m { font-weight: 400; }
.fw5-m { font-weight: 500; }
.fw6-m { font-weight: 600; }
.fw7-m { font-weight: 700; }
.fw8-m { font-weight: 800; }
.fw9-m { font-weight: 900; }
.i-m, .fstyle-italic-m { font-style: italic; }
.fstyle-normal-m { font-style: normal; }
.b-m, .fw-bold-m { font-weight: bold; }
.fw-normal-m { font-weight: normal; }
.fw-100-m { font-weight: 100; }
.fw-200-m { font-weight: 200; }
.fw-300-m { font-weight: 300; }
.fw-400-m { font-weight: 400; }
.fw-500-m { font-weight: 500; }
.fw-600-m { font-weight: 600; }
.fw-700-m { font-weight: 700; }
.fw-800-m { font-weight: 800; }
.fw-900-m { font-weight: 900; }
.fw-1000-m { font-weight: 1000; }
.h1-m { height: 1rem; }
.h2-m { height: 2rem; }
.h3-m { height: 4rem; }
Expand Down Expand Up @@ -3802,14 +3825,16 @@ http://tachyons.io/docs/debug-grid/
.ttl-m { text-transform: lowercase; }
.ttu-m { text-transform: uppercase; }
.ttn-m { text-transform: none; }
.f0-m { font-size: 6rem; }
.f1-m { font-size: 4rem; }
.f2-m { font-size: 3rem; }
.f3-m { font-size: 2rem; }
.f4-m { font-size: 1.5rem; }
.f5-m { font-size: 1rem; }
.f6-m { font-size: .875rem; }
.f7-m { font-size: .75rem; }
.fs1-m { font-size: .75rem; }
.fs2-m { font-size: .875rem; }
.fs3-m { font-size: 1rem; }
.fs4-m { font-size: 1.25rem; }
.fs5-m { font-size: 1.5rem; }
.fs6-m { font-size: 2.25rem; }
.fs7-m { font-size: 3rem; }
.fs8-m { font-size: 4rem; }
.fs9-m, .fs-subheadline-m { font-size: 5rem; }
.fs10-m, .fs-headline-m { font-size: 6rem; }
.measure-m { max-width: 30em; }
.measure-wide-m { max-width: 34em; }
.measure-narrow-m { max-width: 20em; }
Expand Down Expand Up @@ -3974,18 +3999,20 @@ http://tachyons.io/docs/debug-grid/
.fl-l { float: left; _display: inline; }
.fr-l { float: right; _display: inline; }
.fn-l { float: none; }
.i-l { font-style: italic; }
.fs-normal-l { font-style: normal; }
.b-l { font-weight: bold; }
.fw1-l { font-weight: 100; }
.fw2-l { font-weight: 200; }
.fw3-l { font-weight: 300; }
.fw4-l { font-weight: 400; }
.fw5-l { font-weight: 500; }
.fw6-l { font-weight: 600; }
.fw7-l { font-weight: 700; }
.fw8-l { font-weight: 800; }
.fw9-l { font-weight: 900; }
.i-l, .fstyle-italic-l { font-style: italic; }
.fstyle-normal-l { font-style: normal; }
.b-l, .fw-bold-l { font-weight: bold; }
.fw-normal-l { font-weight: normal; }
.fw-100-l { font-weight: 100; }
.fw-200-l { font-weight: 200; }
.fw-300-l { font-weight: 300; }
.fw-400-l { font-weight: 400; }
.fw-500-l { font-weight: 500; }
.fw-600-l { font-weight: 600; }
.fw-700-l { font-weight: 700; }
.fw-800-l { font-weight: 800; }
.fw-900-l { font-weight: 900; }
.fw-1000-l { font-weight: 1000; }
.h1-l { height: 1rem; }
.h2-l { height: 2rem; }
.h3-l { height: 4rem; }
Expand Down Expand Up @@ -4227,14 +4254,16 @@ http://tachyons.io/docs/debug-grid/
.ttl-l { text-transform: lowercase; }
.ttu-l { text-transform: uppercase; }
.ttn-l { text-transform: none; }
.f0-l { font-size: 6rem; }
.f1-l { font-size: 4rem; }
.f2-l { font-size: 3rem; }
.f3-l { font-size: 2rem; }
.f4-l { font-size: 1.5rem; }
.f5-l { font-size: 1rem; }
.f6-l { font-size: .875rem; }
.f7-l { font-size: .75rem; }
.fs1-l { font-size: .75rem; }
.fs2-l { font-size: .875rem; }
.fs3-l { font-size: 1rem; }
.fs4-l { font-size: 1.25rem; }
.fs5-l { font-size: 1.5rem; }
.fs6-l { font-size: 2.25rem; }
.fs7-l { font-size: 3rem; }
.fs8-l { font-size: 4rem; }
.fs9-l, .fs-subheadline-l { font-size: 5rem; }
.fs10-l, .fs-headline-l { font-size: 6rem; }
.measure-l { max-width: 30em; }
.measure-wide-l { max-width: 34em; }
.measure-narrow-l { max-width: 20em; }
Expand Down
5 changes: 3 additions & 2 deletions docs/class-naming.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,8 +132,9 @@ Base | Property | Example class
`flex-grow` | `flex-grow` | `flex-grow-1`
`flex-shrink` | `flex-shrink` | `flex-shrink-0`
`f` | `float` | `fl`
`fw` | `font-weight` | `fw2`
`f` | `font-size` | `f3`
`fw` | `font-weight` | `fw-200`
`fs` | `font-size` | `fs3`
`fstyle` | `font-style` | `fstyle-normal`
`h` | `height` | `h-100`
`lh` | `line-height` | `lh-solid`
`mw` | `max-width` | `mw4`
Expand Down