@UiReact

Installation

The Basics

Themes

Colorations

Foundation

Main View

Components

Charts

Dialogs

Framer Animations

EzForms

Forms

Grids

Typography

Tools

Contributing

Feature request

Responsive

The @UiReact library handles responsiveness across multiple devices with the following categories:

Breakpoins breakdown ✍️

We have these classifications for different sizes of viewports:

enum Breakpoints {
  SMALL,
    ▶︎ Used to render on mobile devices
  MEDIUM,
    ▶︎ Used to render on tablet devices or mobiles with big screens or mobile landscape
  LARGE,
    ▶︎ Used to render on big tablets, tablets on landscape or desktop
  XLARGE,
    ▶︎ Used to render on high resolutions desktop screens
}

Breakpoint sizes

Based on data on internet for the most common viewports on each category we've decided to set up the breakpoints sizes in the following distribution:

const BreakpointsSizes = {
  s: {
    max: 579,
      ▶︎ No min value as anything from 0 up to 579px considered SMALL
  },
  m: {
    min: 580,
    max: 991,
  },
  l: {
    min: 992,
    max: 1440,
  },
  xl: {
    min: 1440,
      ▶︎ No max value as anything above 1440 is considered XLARGE
  },
};

Usage

The UiViewport component uses these categories to decide when some content renders or not based on the viewport. For more information about it you can go to the UiViewport docs.