v5 Suggestions

[mrmrs]

After so much time on v4 I have a fairly good idea of what I want to do with version 5, but I'm open to suggestions as well. This is an issue to track said suggestions from the community.

[luizbills]

@onetrev safari 10 usage is just 0.09%. Even ie8 has more.

[onetrev]

Sorry @luizbills, I was more so suggesting a move to px based breakpoints (combined with explicit root px size) because it's just a better and more modern way now that all browsers support zoom properly (not because of Safari 10 support).

Using 'em' is just a hold over habit from the old days. So you see new projects like Tailwind use px instead of em. It's kinda odd and much less clear to say you want a break point at 67.5em, when what you actually want is to break at exactly 1080px.

[proyb6]

@onetrev I read the article before.

That’s not a major effort to change with the generator you can customise to your needs and serve a compressed static file in brotli to improve user experience.

[j-greig]

Is there any update on when v5 might be available? Thanks! :)

[bresson]

Any interest in fluid / responsive typography?

[cupcakearmy]

More granular flex grow, shrink and basis would be awesome!

[jeremykohn]

Proposal: Add classes to help standardize class names

Generally, Tachyons class names include:

1. Larger numbers to indicate larger values
2. Hyphens for literal values, and unhyphenated numbers for nonlinear size scales

For example:

.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }

and

.h1 { height: 1rem; }
.h2 { height: 2rem; }
.h3 { height: 4rem; }
.h4 { height: 8rem; }
.h5 { height: 16rem; }

This is a good thing. With standard conventions, classes are easier to learn and remember.

However, some classes are confusing because their names do not follow the general pattern:

1. font-size: Class f1 is largest and f7 is smallest, and there are additional classes for very large font sizes: f-6 (headline) and f-5 (subheadline)
2. font-weight: Class names fw1 through fw9 do not include hyphens or literal values, even though they proportionately represent font-weight: 100 through font-weight: 900

Solution:

Add new Tachyons classes.

The new classes will use a naming scheme that is consistent with the rest of Tachyons, and will replace certain inconsistently named existing classes.

Details:

First, replace the numbered font-size classes with one simple unified sequence, fs1 through fs9, in which larger numbers indicate larger font sizes.

Existing class names	Replacement class names
f1 (large) through f7 (small)	fs1 (small) through fs7 (large)
f-5 or f-subheadline	fs-subheadline
f-6 or f-headline	fs-headline

Also, rename the font-weight classes:

Existing class names	Replacement class names
fw1 through fw9	fw-100 through fw-900

Finally, to ensure that prefixes are consistent, make these replacements as well:

Existing class name	Replacement class name
fs-normal	fstyle-normal
normal	fw-normal

Result:

Property	Old prefix	New prefix
font-size	f	fs
font-style	fs	fstyle
font-weight	fw or no prefix	fw

Each new class name is different from all existing class names, so there are no conflicts with existing Tachyons code.

For backwards compatibility, the old classes would remain available. However, they would be deprecated and possibly removed in a later version.

[jeremykohn]

Proposed changes submitted as a PR.

Expanded type scale for font-size, with self-consistent naming and an additional font size (4rem):

Class names	font-size value	Previous class names
fs1	.75rem	f7
fs2	.875rem	f6
fs3	1rem	f5
fs4	1.25rem	f4
fs5	1.5rem	f3
fs6	2.25rem	f2
fs7	3rem	f1
fs8	4rem	(None)
fs9, fs-subheadline	5rem	f-5, f-subheadline
fs10, fs-headline	6rem	f-6, f-headline

Expanded scale for font-weight, with self-consistent naming and an additional font weight (1000):

Class name	font-weight value	Previous class name
fw-100	100	fw1
fw-200	200	fw2
fw-300	300	fw3
fw-400	400	fw4
fw-500	500	fw5
fw-600	600	fw6
fw-700	700	fw7
fw-800	800	fw8
fw-900	900	fw9
fw-1000	1000	(None)

New names for font-weight classes:

Class names	font-weight value	Previous class name
b, fw-bold	bold	b
fw-normal	normal	normal

And finally, new names for font-style classes:

Class names	font-style value	Previous class name
i, fstyle-italic	italic	i
fstyle-normal	normal	fs-normal

Thus, in new class names, the prefix fs is for font-size and fstyle is for font-style.

The new classes all have different names from Tachyons v4 classes, so they would not conflict with existing code.

PR: https://github.com/tachyons-css/tachyons/pull/636

[dotku]

would like to have dn-s for display none on small/mobile screen

[jzwood]

I vote to remove IE specific hacks, e.g.

.cf { *zoom: 1; }