Additional pure CSS components

[tabeth]

First off, excellent work with tachyons. I find it very beneficial from both a learning/mastering CSS standpoint and from a creative standpoint (much easier to override things here than with bootstrap).

Has there been any talk of adding additional components to showcase? Some possibilities:

• Accordian
• Progress bar
• Modal
• Rating/checkboxes

The difficulty I imagine is creating these things without adding too much (or any) custom CSS, as that would defeat the purpose and be counterproductive in the greater context of tachyons.

[lallmon]

Tachyons is the CSS Lego you use to build out those components. It's not a UI Kit on its own.

I personally don't think it should go that way, because it removes it's composable nature

E.G. Here's a progress bar.

<div class="bg-moon-gray br-pill h1 overflow-y-hidden">
  <div class="bg-blue br-pill h1 shadow-1 w-third" ></div>
</div>

Which results in:

You need to supply the dynamic width of the inner div with your own JS choice.

[timpish]

Nice one on the progress bar, Lucas (Adam should add to Components examples). Tabeth, I was recently trying to crack star/half star ratings with Tachyons. I had to add a class to render with :before (there may be a better way)

.half-star:before {
      content: '\2605'; 
      position: absolute;
      overflow: hidden;
      width: 50%
    } 

While not a UI kit per se, ultimately we build UIs with it. I think the docs and components will grow to reflect that over time.

[mrmrs]

We will make additional css components, but closing this issue as it's a bit vague and abstract. Don't know if we'll do a half star though.

[typerory]

No half-star? Forget it.