1.12Conditional Styling
Concise uses a set of classes for conditional styling based on browser viewport, screen resolution, if the document is currently being printed and lastly, if the document is being viewed on a high-definition screen (Retina/HiDPI).
Displaying Content
These classes determine if content will be shown given a certain browser viewport. If the user is not within that browser viewport, the content will be hidden.
| Class | Extra Large ≥ 1280px | Large ≥ 1100px | Medium ≥ 960px | Small ≥ 768px | Extra Small ≤ 480px |
|---|---|---|---|---|---|
.show--xsm | Hidden | Hidden | Hidden | Hidden | Visible |
.show--sm | Hidden | Hidden | Hidden | Visible | Hidden |
.show--md | Hidden | Hidden | Visible | Hidden | Hidden |
.show--lg | Hidden | Visible | Hidden | Hidden | Hidden |
.show--xlg | Visible | Hidden | Hidden | Hidden | Hidden |
Hiding Content
These classes determine if content will be hidden given a certain browser viewport. If the user is not within that browser viewport, the content will be shown.
| Class | Extra Large ≥ 1280px | Large ≥ 1100px | Medium ≥ 960px | Small ≥ 768px | Extra Small ≤ 480px |
|---|---|---|---|---|---|
.hide--xsm | Visible | Visible | Visible | Visible | Hidden |
.hide--sm | Visible | Visible | Visible | Hidden | Visible |
.hide--md | Visible | Visible | Hidden | Visible | Visible |
.hide--lg | Visible | Hidden | Visible | Visible | Visible |
.hide--xlg | Hidden | Visible | Visible | Visible | Visible |
Print Content
Content also can be displayed or hidden based on whether the document is currently being printed or not.
| Class | Browser | |
|---|---|---|
.show--print | Hidden | Visible |
.hide--print | Visible | Hidden |
High-Definition Content
Lastly, content can be displayed or hidden based on whether the document is currently being viewed on a high-definition screen (Retina/HiDPI).
| Class | Regular Resolution | High-Definition |
|---|---|---|
.show--hd | Hidden | Visible |
.hide--hd | Visible | Hidden |