Responsive - Tocas UI

Breakpoints

Tocas UI provides four default breakpoints.

	Indicator	When screen size...	Occurrence
mobile	Current	≥ 0px and ≤ 767px	⮃ Portrait on mobile.
tablet	Current	≥ 768px and ≤ 1023px	⮂ Landscape for most mobile phones. ⮃ Portrait on tablets.
desktop	Current	≥ 1024px and ≤ 1279px	⮂ Landscape on tablets. Narrowed browser window. Starting point for computer devices.
widescreen	Current	≥ 1280px	⮂ Landscape for large tablets (e.g., iPad Pro or Surface Pro). Laptops, desktop computers.

Basic Usage

Apply breakpoint:class to an element for responsive features.

	Example	Activated when...
breakpoint	`mobile`	At "a certain breakpoint".
breakpoint+	`mobile+`	At "a certain breakpoint" and "above".
breakpoint-	`tablet-`	At "a certain breakpoint" and "below".
breakpoint-breakpoint	`tablet-widescreen`	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>

Arbitrary Sizes

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

	Example	Activated when...
[size+]	`[450px]+`	At "a certain size" and "above".
[size-]	`[800px]-`	At "a certain size" and "below".
[size-size]	`[300px-400px]`	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>

Hide/Show Elements at ...

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>

Responsive Grid

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>

Custom Breakpoints

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>

Container Query

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>