Responsive

Make your website display optimally on different devices.
Device Definitions

Tocas UI provides four default breakpoints.

Occurrence
⮃ Portrait on mobile.
⮂ Landscape for most mobile phones.
⮃ Portrait on tablets.
⮂ Landscape on tablets.
Narrowed browser window.
Starting point for computer devices.
⮂ Landscape for large tablets (e.g., iPad Pro or Surface Pro).
Laptops, desktop computers.
Usages

Apply breakpoint:class to an element for responsive features.

Activated when...
At "a certain breakpoint".
At "a certain breakpoint" and "above".
At "a certain breakpoint" and "below".
Between "a certain breakpoint" and "another certain breakpoint".

<!-- Apply `is-small` only on mobile -->
<div class="ts-button mobile:is-small"></div>

<!-- Apply `is-small` on tablet, desktop, widescreen -->
<div class="ts-button tablet+:is-small"></div>

Use [size] for arbitrary breakpoints like 100px or 450px.

Activated when...
At "a certain size" and "above".
At "a certain size" and "below".
Between "a certain size" and "another certain size".
<!-- Apply `is-small` for screen width of 300px or below -->
<div class="ts-button [300px]-:is-small"></div>

<!-- Apply `is-small` for screen width between 300px and 400px -->
<div class="ts-button [300px-400px]:is-small"></div>
Scenarios

Applying .has-hidden at specific breakpoint hides the element; this also allows elements to be displayed only on certain devices.

Mobile 📱
Tablet 💻
Desktop 🖥️
Widescreen 📺
<!-- Hide on tablet, desktop, widescreen -->
<!-- Equivalent to: display only on mobile -->
<div class="ts-badge tablet+:has-hidden">Mobile 📱</div>

<!-- Hide on mobile, desktop, widescreen -->
<!-- Equivalent to: display only on tablet -->
<div class="ts-badge mobile:has-hidden desktop+:has-hidden">Tablet 💻</div>

<!-- Hide on mobile, tablet, widescreen -->
<!-- Equivalent to: display only on desktop -->
<div class="ts-badge tablet-:has-hidden widescreen:has-hidden">Desktop 🖥️</div>

<!-- Hide on mobile, tablet, desktop -->
<!-- Equivalent to: display only on widescreen -->
<div class="ts-badge desktop-:has-hidden">Widescreen 📺</div>

Adjust column wides with screen size, class set at the mobile breakpoint do not cascade upwards, you need to specify classes for each stage.

<div class="ts-grid">
    <div class="column mobile:is-16-wide tablet+:is-8-wide"></div>
    <div class="column mobile:is-16-wide tablet+:is-8-wide"></div>
    <div class="column mobile:is-16-wide tablet+:is-8-wide"></div>
    <div class="column mobile:is-16-wide tablet+:is-8-wide"></div>
</div>
Advanced Features

At least two CSS variables must be specified when overriding or adding a breakpoint:

--ts-breakpoint-NAME-min: The minimum, starting size.
--ts-breakpoint-NAME-min: The maximum, ending size.

The closest breakpoint definition to this element will be used for responsive decisions.

<style type="text/css">
    html {
        /** Create a "computer" breakpoint */
        --ts-breakpoint-computer-min: 768px;
        --ts-breakpoint-computer-max: 1280px;
    }
</style>

<!-- Apply `is-small` class for screen width between 768px and 1280px -->
<div class="ts-button computer:is-small"></div>

Breakpoints can be based on container width, not screen size.

The nearest @container width will be the basis for responsive conditions if breakpoints are prefixed with @ (e.g., @mobile, @[400px]+).

<div class="ts-content @container">
    <!-- Apply `is-small` if the width of `.ts-content` is 300px or above -->
    <div class="ts-button @[300px+]:is-small"></div>
</div>
Designed by Yami Odymel from Taiwan, along with the ❤️ from contributors. The source code is licensed under MIT, and the documentation is under CC 0 public domain. Feel free to use, share, or contribute. Tocas UI is a design system for Caris Events, part of Sorae & Co., Ltd.
Translators: Yami Odymel
Trademark of the owner of Tocas UI