v5, the second time around #455

johno · 2017-11-03T04:27:18Z

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

considerations

v5 Suggestions #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 · 2018-01-12T03:33:09Z

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:

luizbills · 2018-02-12T14:56:54Z

@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 · 2018-03-12T19:36:12Z

Amazing work on this @johno 🙌

lachlanjc · 2018-03-18T22:28:35Z

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

johno · 2018-03-19T14:28:42Z

@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 · 2018-03-24T07:15:49Z

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

klzns · 2018-04-03T02:23:29Z

drop non-grayscale border colors

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

Example:

wavebeem · 2018-04-03T02:25:24Z

@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 · 2018-04-03T02:32:28Z

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 · 2018-04-03T03:05:17Z

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 · 2018-07-27T12:22:07Z

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

johno · 2018-07-27T14:47:29Z

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

avidrucker · 2018-09-25T14:41:41Z

Why drop not small media queries?

j-greig · 2018-10-18T11:36:24Z

Any update on a release date for v7? :)

plievone · 2018-11-11T19:54:23Z

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

dangayle · 2018-11-12T22:21:40Z

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

j-greig · 2019-02-24T09:31:41Z

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 · 2019-08-20T04:39:01Z

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: #636

jeremykohn · 2019-08-22T01:50:49Z

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 · 2020-03-10T14:35:51Z

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

j-greig · 2020-04-22T07:46:16Z

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 · 2020-04-22T15:59:00Z

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 ***@***.***> 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 <#455 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAA7USZNNVYKBXLTESPDPU3RN2OFPANCNFSM4ECCSRZQ> .

orionrush · 2020-04-23T10:03:44Z

@j-greig For the current status see:
#645 (comment)

j-greig · 2020-08-04T12:00:31Z

@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 · 2020-08-04T12:38:41Z

@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 · 2020-08-04T12:44:27Z

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.

johno mentioned this pull request Nov 3, 2017

[WIP] Monorepo #239

Closed

johno force-pushed the v5.0.0-1 branch 7 times, most recently from e4b3307 to e521bbd Compare March 7, 2018 23:19

johno added the v5 label Mar 10, 2018

lowmess mentioned this pull request May 5, 2018

Adds vertical margin auto classes #561

Merged

lowmess mentioned this pull request May 12, 2018

Change 'tracked' to 'ls' #565

Merged

johno changed the title ~~v5, the second time around~~ v7, the second time around Jul 13, 2018

johno added 4 commits November 10, 2018 09:25

Init lerna, move all modules to dir

5880964

Update all the src css docs to be md formatted

75d5184

Improve build step for monorepo

1ca2dd5

Propose docs implementation using markdown css comments

d154f09

Chris Hallberg and others added 4 commits November 10, 2018 09:42

Align whitespace.

eba6e1d

Revert builds.

d44a2f1

Run build for latest version

eb8e45e

7.0.1-5

31b1fd5

johno force-pushed the v5.0.0-1 branch from 7c7ace6 to 31b1fd5 Compare November 10, 2018 16:46

johno added 12 commits November 10, 2018 09:55

Rename ls back to tracked

36e745f

Bump deps, run build

1c0027c

Add publish beta script

ba72a13

Add prepare script

71376f6

Update docs

6100b06

Bump version in lerna.json

de2f1cf

Ensure build runs before beta publish

9ebdb51

Fix docs site deps

30a9970

Fix imports, add build script

d393181

Make now.json file top level

8b3c3ca

Version packages independently

3a9df1b

Bump deps in all packages

64589a2

johno changed the title ~~v7, the second time around~~ v5, the second time around Nov 13, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v5, the second time around #455

v5, the second time around #455

johno commented Nov 3, 2017 •

edited

tungd commented Jan 12, 2018

luizbills commented Feb 12, 2018

lachlanjc commented Mar 12, 2018

lachlanjc commented Mar 18, 2018

johno commented Mar 19, 2018

plievone commented Mar 24, 2018

klzns commented Apr 3, 2018

wavebeem commented Apr 3, 2018

johno commented Apr 3, 2018

wavebeem commented Apr 3, 2018

ghost commented Jul 27, 2018

johno commented Jul 27, 2018

avidrucker commented Sep 25, 2018

j-greig commented Oct 18, 2018

plievone commented Nov 11, 2018

dangayle commented Nov 12, 2018

j-greig commented Feb 24, 2019

jeremykohn commented Aug 20, 2019 •

edited

jeremykohn commented Aug 22, 2019 •

edited

orionrush commented Mar 10, 2020

j-greig commented Apr 22, 2020

dangayle commented Apr 22, 2020 via email

orionrush commented Apr 23, 2020

j-greig commented Aug 4, 2020

orionrush commented Aug 4, 2020 •

edited

j-greig commented Aug 4, 2020

v5, the second time around #455

Are you sure you want to change the base?

v5, the second time around #455

Conversation

johno commented Nov 3, 2017 • edited

changelog

todo

considerations

tungd commented Jan 12, 2018

luizbills commented Feb 12, 2018

lachlanjc commented Mar 12, 2018

lachlanjc commented Mar 18, 2018

johno commented Mar 19, 2018

plievone commented Mar 24, 2018

klzns commented Apr 3, 2018

wavebeem commented Apr 3, 2018

johno commented Apr 3, 2018

wavebeem commented Apr 3, 2018

ghost commented Jul 27, 2018

johno commented Jul 27, 2018

avidrucker commented Sep 25, 2018

j-greig commented Oct 18, 2018

plievone commented Nov 11, 2018

dangayle commented Nov 12, 2018

j-greig commented Feb 24, 2019

jeremykohn commented Aug 20, 2019 • edited

jeremykohn commented Aug 22, 2019 • edited

orionrush commented Mar 10, 2020

j-greig commented Apr 22, 2020

dangayle commented Apr 22, 2020 via email

orionrush commented Apr 23, 2020

j-greig commented Aug 4, 2020

orionrush commented Aug 4, 2020 • edited

j-greig commented Aug 4, 2020

johno commented Nov 3, 2017 •

edited

jeremykohn commented Aug 20, 2019 •

edited

jeremykohn commented Aug 22, 2019 •

edited

orionrush commented Aug 4, 2020 •

edited