# Responsiveness - for all platforms

*Category:* Getting started
*Section:* Guidelines
*Source:* https://uikit.developers.rio.cloud/#/start/responsiveness
*Captured:* 2026-04-27T14:57:04.420Z

The UIKIT considers all platforms — both desktop and mobile. We recognize that people work across many different products and often need to support multiple platforms and the UIKIT is a foundation for that with its many responsive building blocks and responsive components.

## Responsiveness - for all platforms

## Principal

"We believe that people should have a high-quality experience that scales across all platforms."

To build for all platforms, there are a lot of options and tools that can be used.

## Layout

**Fluid container**

The UIKIT used a fluid container by default that adapts to the various screen sizes. It also offers various fluid container sizes that shall suit your needs. Checkout the container documentation.

**Responsive grid systems**

A responsive grid system allows a layout to change dynamically based on the size of the screen or the surrounding element. This also guarantees consistent layouts across all products.

Cols

For that, the UIKIT offers the twelve-column col system that is derived from Bootstraps col system. The Col documentation also lists all responsive column classes ranging from xs to xl.Responsive col classes and their breakpoints:Responsive...-xs-......-ls-......-sm-......-md-......-lg-......-xl-...Range0to∞480pxto∞768pxto∞992pxto∞1200pxto∞1700pxto∞

Grid

Additionally, you can also use the responsive classes for the CSS grid that also uses a twelve-column system. GridResponsive grid classes and their breakpoints:Responsive...-xs...-ls...-sm...-md...-lg...-xlRange0to480px480pxto∞768pxto∞992pxto∞1200pxto∞1700pxto∞

Flexbox

Using Flexbox is pretty common and allows you to handle elements to respect their container size to either shrink or grow. Also pretty useful to wrap elements around onto the next row in tight spaces. Using gap along with flex helps to space the elements evenly. You also might want to switch from flex row to flex column at a certain breakpoint via a simple responsive flex class.Responsive flexbox classes and their breakpoints:Responsive...-xs...-ls...-sm...-md...-lg...-xlRange0to480px480pxto∞768pxto∞992pxto∞1200pxto∞1700pxto∞

## Spacings & sizing

The UIKIT offers also responsive padding and margin classes that allow reducing or increasing the spacing around elements depending on a certain breakpoint. This for example enables to set a smaller margin on mobile devices than on desktops.

With our flexible and responsive width and height classes, you have the freedom to define different sizes for different breakpoints or use our min- and max classes.

## Container queries

While the traditional responsive utilities mentioned above (e.g., --sm--, --md--, --lg--) adapt components based on the viewport width, container queries take a different approach by allowing components to respond to the size of their parent container instead. This enables a more context-aware and flexible design system—especially useful when components live in dynamic or nested layouts (like sidebars, cards, or split views).

**Why use container queries?**

Sometimes, the screen size alone is not enough to decide how a component should behave. For example:

- A card inside a wide layout may want to show content side-by-side.
- The same card inside a sidebar should stack the content vertically.

Container queries let components adapt to these situations without relying on global breakpoints.

**Usage**

The RIO UIKIT introduces container query utility classes using the following format:

```html
cq-[cq-breakpoint]:[utility-class]
```

Where cq-breakpoint is the container width in pixels that triggers the style, such as:

- cq-300:padding-10
- cq-500:flex-column
- cq-600:grid-cols-2

The utility is applied only when the container width is greater than or equal to the breakpoint.

**Available utility classes**

Container queries support not all, but many of the same utility categories as responsive viewport classes:

- Spacing: margin, padding, etc.
- Layout: display-flex, flex-row, flex-column, gap, display-grid, grid-cols, col-span, etc.
- Text sizes: text-size, line-height
- Custom responsive behaviors based on your layout context

See the full list of container query utilities in the Container queries section.

**Example**

```html
<div className="cq-container">
<div className="cq-300:flex-column cq-600:flex-row cq-300:padding-10">
<!-- content -->
</div>
</div>
```

<div className="cq-container">

<div className="cq-300:flex-column cq-600:flex-row cq-300:padding-10">

<!-- content -->

</div>

</div>

In this example:

- The inner element uses a column layout when its container is at least 300px wide.
- It switches to a row layout when the container is at least 600px wide.
- Padding is also conditionally applied based on container size.

> Note: Make sure the container element has cq-container applied, as it sets up the container context required for the styles to react correctly.

## Device utils

We also offer a set of device utility functions such as hasTouch, isMobile, and isDesktop. This allows to hide or show elements for mobile or to switch settings for some components how to behave. For instance, you might want to show the table card view when a page is rendered on mobile. Or you might want to expand or collapse information depending on your device.

Furthermore, we offer some hooks like the useWindowResize hook that helps to react to the user changing his window size and to react accordingly. The useOnlineStatus lets you show a message to the user when his device is offline or online again or to react to that event.

## There is more...

Many of our atomic classes are also available for different breakpoints. All classes are listed below the individual demos in the "CLASSES" section of the Design page.

We constantly strive to improve the UIKIT to make it easier to use. If you have questions about the correct usage of these classes or feedback on components, please ask them in the UIKIT Slack channel.