Responsive media queries

The screen[xs:xx] naming convention is used to control the responsive elements by media query.

The default size and percent values can be modified by manipulating variables.less

Visibility

It's possible to hide elements based on the size of the screen

• .ts-screenxs-hidden - hide element when screen is extra small sized
• .ts-screensm-hidden - hide element when screen is small sized
• .ts-screenmd-hidden - hide element when screen is medium sized
• .ts-screenlg-hidden - hide element when screen is large sized
• .ts-screenxl-hidden - hide element when screen is extra large sized
• .ts-screenxx-hidden - hide element when screen is extra huge sized

Grid

You can set the size of a column based on the screen size using the screen[xs:xx] naming convention

• .ts-screenxs-col-span3 - span 3 columns when screen is extra small sized
• .ts-screensm-col-span5 - span 5 columns when screen is small sized
• .ts-screenmd-col-span2 - span 2 columns when screen is medium sized
• .ts-screenlg-col-span1 - span 1 column when screen is large sized
• .ts-screenxl-col-span12 - span 12 columns when screen is extra large sized
• .ts-screenxx-col-span8 - span 8 columns when screen is extra huge sized

Layout

You can set the height and width of a column based on the screen size using the screen[xs:xx] naming convention

• .ts-screenxs-width-100 - width set to 100% when screen is extra small sized
• .ts-screensm-height-33 - height set to 33% when screen is small sized
• .ts-screenmd-width-66 - width set to 66% when screen is medium sized
• .ts-screenlg-width-10 - width set to 10% when screen is large sized
• .ts-screenxl-height-75 - height set to 75% when screen is extra large sized

Nav Elements

The nav links will collapse when the screen is smaller than @navcollapse