Init Tabby only on mobile

[acespace90]

Hi is it possible to activate tabby only on certain viewports?

[cferdinandi]

Yes! So, you could handle this with JavaScript, by...

1. Checking the viewport size with JS
2. If it's below a certain size, instantiating Tabby, otherwise not.
3. Listening for resize events, and then destroying or reinstantiating as needed.

But I think an easier way is to just always instantiate, and use CSS to only hide and display views on smaller screens.

/**
 * The tablist
 */

/* Don't hide on bigger screens */
[role="tabpanel"][hidden] {
  display: block;
}

@media (max-width: 30em) {
  [role="tablist"] {
    border-bottom: 1px solid lightgray;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  [role="tablist"] * {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }

  /**
   * The tabs
   */
  [role="tab"] {
    border: 1px solid transparent;
    border-top-color: lightgray;
    display: block;
    padding: 0.5em 1em;
    text-decoration: none;
    /**
     * Active tab styling
     */
    /**
     * Tabs on hover
     */
  }

  [role="tab"][aria-selected="true"] {
    background-color: lightgray;
  }

  [role="tab"]:hover:not([aria-selected="true"]) {
    background-color: #f7f7f7;
  }

  /**
   * Hide on smaller screens
   */
  [role="tabpanel"][hidden] {
    display: block;
  }
}

[acespace90]

Oh nice, I will give a try.

PS: I didn't notice before you were the author of gomakethings. Nice!

[cferdinandi]

Thanks! Let me know if you hit any snags.

[acespace90]

It works, thanks.