v5, the second time around

[johno]

v5 round two features, not only a monorepo to ease maintenance of all individual modules, but css comment based documentation. This ensures that source css docs always end up in their respective modules, automatically.

npm install --save tachyons@beta

changelog

• smaller
• min-width only media queries (-s, -m, -l)
• drop not-small media queries
• drop non-grayscale border colors
• comment based module docs
• new documentation site
• new type scale (f0-f7), removes f-headline and f-subheadline
• new color palette
• paX/maX -> pX/mX
• white-space => ws-

todo

• [ ] automate tachyons-verbose package
• [ ] automate tachyons-sass
• [ ] automate tachyons-custom
• [ ] generate docs in a more sophisticated manner
• [ ] update with latest changes in master
• [x] css reference
• [x] triple check output css
• [ ] write full release
• [ ] move generated json files to constants/data dir
• [x] port new docs classes to v5 (type scale is still using old)
• [ ] addons issue, complete those
• [ ] components navigation
• [x] improve css reference design and syntax highlighting theme
• [ ] add component section side bar
• [ ] side nav for docs sections with multiple related modules
• [ ] clean up ui dir and components
• [ ] implement missing docs sections

considerations

• https://github.com/tachyons-css/tachyons/issues/211
• From Slack - Adding an -s between 32 and 48 ems. For those who need a different layout between 568 px (iPhone landscape) and 768 px (iPad portrait).

[tungd]

Hi, regarding tachyons-less I think it would not be necessary, or just a section in the document should be enough. I've been using Tachyons with Less for a while now and all I need to do is:

@import (less) '../../node_modules/tachyons/css/tachyons.css';

---

Btw, if you choose to go the document route I'd like to add one neat trick, is that with this approach we can do rapid prototype and later extract a component library/style guide pretty easily, since CSS selectors can also be used as Less mixins, .i.e:

label {
  .f6; .b; .db; .mb2;

  span {
    .normal; .black-60;
  }
}

I've seen people try doing this in other ways, for example:

• https://tailwindcss.com/docs/extracting-components
• https://medium.com/@simonswiss/full-re-write-in-10-days-with-tachyons-and-functional-css-a-case-study-part-4-b565745ca1e5

[luizbills]

@johnotander put in your PR a white-space standardization, because has a name collision with .pre #467

I suggest change from:

.ws-normal { white-space: normal; }
.nowrap { white-space: nowrap; }
.pre { white-space: pre; }

to:

.ws-normal { white-space: normal; }
.ws-nowrap { white-space: nowrap; }
.ws-pre { white-space: pre; }

[lachlanjc]

Amazing work on this @johno 🙌

[lachlanjc]

@johno is the new documentation site live anywhere? would love to check it out!

[johno]

@lachlanjc not quite yet, but will be in the next few days. In the meantime you can check out this branch and cd docs && npm i && npm run dev && open http://localhost:3000.

Once we finish up the last few missing docs pages I'll start hosting the beta at https://v5.tachyons.io. Also, if you have any feedback, please feel free to share 💟

[plievone]

Note that it seems that there are some places with 'undefined' in 'css/tachyons.css' where less variables are missing or misspelled?

[klzns]

drop non-grayscale border colors

What is the motivation behind this change? I think other border colors are useful for creating buttons.

Example:

[wavebeem]

@klzns agreed but you can usually get away without making it explicit: blue ba bw1 br1. Which doesn't work right on button tags unfortunately, but…

[johno]

What is the motivation behind this change? I think other border colors are useful for creating buttons.

That's a very good question we plan on addressing in depth when we release v5.

The motivation is primarily based on the fact that border colors add a lot of bloat for a small amount of general utility in the average project. So we think this will be better handled via an addon and/or Tachyons generator.

Especially when employed using the technique @wavebeem mentions, it still allows border color flexibility for a majority of use cases with no added css bloat.

[wavebeem]

I just realized that for certain situations you can use b--inherit on a button to get that color on the border, but b--currentcolor i think would be good for overriding in the case of button

https://codepen.io/wavebeem/pen/eMKjeZ?editors=1000

[ghost]

@johno Can we have white-space: pre-line as mentioned in this comment of #211? or should I open another pr for this?

[johno]

Sure, you're welcome to PR that into this branch, thanks!

[avidrucker]

Why drop not small media queries?

[j-greig]

Any update on a release date for v7? :)

[plievone]

@johno Perhaps /* @import "./_opacity-responsive.css"; */ is missing from src/tachyons.css

[dangayle]

@johno Is this v7 for the docs? The numbering is confusing.

[j-greig]

Is it possible for someone to publish the v5/v7 docs online again?

I've tried to get them working locally but they always error / fall over. Thanks : )

[jeremykohn]

Here's an expanded font-size type scale, including all sizes from Tachyons v4 as well as 4rem:

.fs1 { font-size: .75rem; }
.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; }

In the class names fs1 through fs10, larger numbers indicate larger font-size values, which is intuitive and consistent with how other Tachyons classes are named.

The largest font sizes 5rem and 6rem have aliases fs-subheadline and fs-headline respectively.

These new font-size classes, named with fs, will replace the old classes named with f.

Additionally, a new class fstyle-normal { font-style: normal; } replaces the old class fs-normal { font-style: normal; }. Thus, class names are consistent:

• fs = font-size
• fstyle = font-style

All the new classes for font-size and font-style have different names from existing Tachyons v4 classes, so they will not conflict with legacy code.

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

[jeremykohn]

And an expanded scale for font-weight, including font-weight: normal and adding font-weight: 1000:

.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; }

These class names are of the format BaseName-LiteralValue, which is the usual pattern in Tachyons for classes with literal values.

Also following this pattern is a new class fw-bold for font-weight: bold. The existing class b will be an alias for that.

.b, .fw-bold { font-weight: bold; }

Similarly, there is a new class fstyle-italic for font-style: italic. The existing class i will be an alias for that.

.i, .fstyle-italic { font-style: italic; }

PR: #636

[orionrush]

Hi all - I just wondering if the Tachyons project has gotten stuck? I'm looking for ways to contribute.

[j-greig]

Is Tachyons still alive? It feels like v5 has been imminent for years now... I would love to help but don't have the coding chops. Is there anything else we can do to assist @johno @mrmrs, eg raising funds or... ?

[dangayle]

There’s a closed ticket where mrmrs addresses this issue. I’m on my mobile at the moment, but you should search the closed tickets.

On Wed, Apr 22, 2020 at 12:46 AM James Greig [email protected] wrote:

Is Tachyons still alive? It feels like v5 has been imminent for years now... I would love to help but don't have the coding chops. Is there anything else we can do to assist @johno https://github.com/johno @mrmrs https://github.com/mrmrs, eg raising funds or... ?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/tachyons-css/tachyons/pull/455#issuecomment-617611186, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAA7USZNNVYKBXLTESPDPU3RN2OFPANCNFSM4ECCSRZQ .

[orionrush]

@j-greig For the current status see: https://github.com/tachyons-css/tachyons/issues/645#issuecomment-540896935

[j-greig]

@lachlanjc not quite yet, but will be in the next few days. In the meantime you can check out this branch and cd docs && npm i && npm run dev && open http://localhost:3000.

Once we finish up the last few missing docs pages I'll start hosting the beta at https://v5.tachyons.io. Also, if you have any feedback, please feel free to share 💟

Any chance the beta could go public at this URL @johno ? Would be super helpful... thanks!

[orionrush]

@j-greig that comment was from March of 2018, and I think you'll find that mrmrs update back in Oct 2019 summarises the current state of play.

Btw - I'd be totally up for contributing to a newly maintained fork that folds in v5. I've been hacking away at a Sass focused version for a while now. I'm down in Dumfries btw

[j-greig]

Btw - I'd be totally up for contributing to a newly maintained fork that folds in v5. I've been hacking away at a Sass focused version for a while now. I'm down in Dumfries btw

Yes! Let's do a SASS fork of v5 - we can't very easily teach our new team members to use it unless we have some working docs.