Pure CSS tabs

[niutech]

Background

As of now, Spectre tabs require JS for interactivity. Pure CSS version doesn't require JS, therefore it is faster. It's been requested multiple times before.

Proposal

I've implemented pure CSS tabs in commit 0ec0ffb. You can cherry-pick it to your Spectre fork.

Notes

Currently there is a limit of 10 tabs, but it can be configured in _tabs.scss.

[davestewart]

Awesome, thanks!

Have taken a quick look.

Would you mind doing a bit more work? As:

• docs are in https://github.com/spectre-org/spectre-docs
• css is in https://github.com/spectre-org/spectre-css

For reference:

• pug no longer needed as HTML examples are now raw HTML in markdown
• dist no longer needed as CSS is now no-longer compiled in the repo as it can be grabbed from unpkg.com

LMK if you have any issues.

[niutech]

I can refactor it but later this week.

[davestewart]

Awesome, thanks. No hurry.

[davestewart]

Hey @niutech; I'm actively developing this project again, so I'll probably take a look at this again this week.

[dagnelies]

Actually, I'm not a fan of that. It's very hacky and disturbs a proper programmatic solution.

I think it's a question of principle. I think it's good to separate logic and presentation. It's perfectly fine for spectre to focus on the CSS side. Everything that has to do with behavior and logic should be left for the framework on top. Maybe the content must be fetched first, maybe changing tabs prompts you to save, maybe the tabs are added at runtime, etc. If you put your tab logic in the CSS, there is no way to get around it, making them problematic to deal with on a higher level.

I think the behavior / logic should be left for libraries built on-top, like vue, react, angular, web-components, whatsoever.

[niutech]

@dagnelies Spectre is a pure CSS framework, so it shouldn't depend on JS at all. Actually, you cannot rely on JS, because it can fail to load or users can have it disabled. Plus JS is slower than pure CSS.
But nothing prevents you from using a JS framework of the day with Spectre. If you need to load content dynamically on tab change, you can use good old click event, Intersection Observer API or MutationObserver API. But these are for specific use cases, meanwhile most of the time you can do tab switching in pure CSS.

[davestewart]

I haven't looked in-depth at the css, but I assume that CSS-only tabs rely on input[type="checkbox"]:checked ~ state (like accordion, slides) so one can mark up tabs that way if they wish.

But I assume that one can also just use the .active class?

If the PR supports both classes, then everybody wins, right?

Maybe they could be separate style sheets.

[dagnelies]

Yes, you're right about that, they can coexist.