# Responsive System

**Path:** CSS Framework/Layout

[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)

---

Responsive System

 You can create and build layouts of all shapes and sizes thanks to Responsive System .

 Responsive System works with root: parameters as shown below.

 Breakpoints

 Rubicblazor’s grid system adapted across all six default breakpoints. The six default grid tiers are as follows:

 xs : Extra small ( ≥0pxs )

 sm : Small ( ≥600px )

 md : Medium ( ≥900px )

 lg : Large ( ≥1200px )

 xl : Extra large ( ≥1500px )

 xxl : Extra extra large ( ≥1920px )

 Variables

 You can determine the size of the actual viewport with the variables (starts with --rb-is-*) as shown below. These variables can be use in css styling with var(...) function.

 Variable 
 Description 
 Values 

 --rb-is-xs Viewport size is Extra small or greater . 0/1 
 --rb-is-xs-only Viewport size is strictly Extra small . 0/1 
 --rb-is-sm Viewport size is Small or greater . 0/1 
 --rb-is-sm-only Viewport size is strictly Small . 0/1 
 --rb-is-md Viewport size is Medium or greater . 0/1 
 --rb-is-md-only Viewport size is strictly Medium . 0/1 
 --rb-is-lg Viewport size is Large or greater . 0/1 
 --rb-is-lg-only Viewport size is strictly Large . 0/1 
 --rb-is-xl Viewport size is Extra large or greater . 0/1 
 --rb-is-xl-only Viewport size is strictly Extra large . 0/1 
 --rb-is-xxl Viewport size is Extra extra large or greater . 0/1 
 --rb-is-xxl-only Viewport size is strictly Extra extra large . 0/1 

 Demostration

 You can resize the window to show the actual size of the viewport.

 xs

 sm

 md

 lg

 xl

 xxl

 xs

 sm

 md

 lg

 xl

 xxl

 ✕

 Contents