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.

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

v5, the second time around #455

Open
wants to merge 230 commits into
base: main
Choose a base branch
from
Open

v5, the second time around #455

wants to merge 230 commits into from

Conversation

johno
Copy link
Member

@johno johno commented Nov 3, 2017

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
  • css reference
  • triple check output css
  • write full release
  • move generated json files to constants/data dir
  • port new docs classes to v5 (type scale is still using old)
  • addons issue, complete those
  • components navigation
  • 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

  • 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).

@johno johno mentioned this pull request Nov 3, 2017
@tungd
Copy link

tungd commented Jan 12, 2018

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
Copy link

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

@johno johno force-pushed the v5.0.0-1 branch 7 times, most recently from e4b3307 to e521bbd Compare March 7, 2018 23:19
@johno johno added the v5 label Mar 10, 2018
@lachlanjc
Copy link
Member

Amazing work on this @johno 🙌

@lachlanjc
Copy link
Member

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

@johno
Copy link
Member Author

johno commented Mar 19, 2018

@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
Copy link

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

@klzns
Copy link

klzns commented Apr 3, 2018

drop non-grayscale border colors

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

Example:
image

@wavebeem
Copy link

wavebeem commented Apr 3, 2018

@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
Copy link
Member Author

johno commented Apr 3, 2018

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
Copy link

wavebeem commented Apr 3, 2018

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

image
image

@lowmess lowmess mentioned this pull request May 12, 2018
@johno johno changed the title v5, the second time around v7, the second time around Jul 13, 2018
@ghost
Copy link

ghost commented Jul 27, 2018

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

@johno
Copy link
Member Author

johno commented Jul 27, 2018

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

@avidrucker
Copy link

Why drop not small media queries?

@j-greig
Copy link

j-greig commented Oct 18, 2018

Any update on a release date for v7? :)

@plievone
Copy link

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

@dangayle
Copy link
Contributor

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

@johno johno changed the title v7, the second time around v5, the second time around Nov 13, 2018
@j-greig
Copy link

j-greig commented Feb 24, 2019

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
Copy link

jeremykohn commented Aug 20, 2019

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
Copy link

jeremykohn commented Aug 22, 2019

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
Copy link

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

@j-greig
Copy link

j-greig commented Apr 22, 2020

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
Copy link
Contributor

dangayle commented Apr 22, 2020 via email

@orionrush
Copy link

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

@j-greig
Copy link

j-greig commented Aug 4, 2020

@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
Copy link

orionrush commented Aug 4, 2020

@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
Copy link

j-greig commented Aug 4, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.