Responsive and fluid layout

Responsive layout is achieved by applying additional classes to the columns. Four screen sizes are supported with different breakpoints.

Prefix	Device	Size
ui-sm-*	Small devices like phones	max-width: 640px
ui-md-*	Medium-sized devices like tablets	min-width: 641px
ui-lg-*	Large-sized devices like desktops	min-width: 1025px
ui-xl-*	Big screen monitors	min-width: 1441px

 

When an element features multiple style classes listed in the table, they get applied from the bottom to the top. Let's take an example:

<div class="ui-g">
  <div class="ui-g-12 ui-md-6 ui-lg-2">ui-g-12 ui-md-6 ui-lg-2</div>
  <div class="ui-g-12 ui-md-6 ui-lg-2">ui-g-12 ui-md-6 ui-lg-2</div>
  <div class="ui-g-12 ui-md-4 ui-lg-8">ui-g-12 ui-md-4 ui-lg-8</div>
</div>

What is happening here?

• On large screens, three columns are displayed in proportion 2:12, 2:12, and 8:12.
• On medium screens...