Conditional 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 ≥ 768px | Small ≥ 768px | Extra Small ≤ 480px |
|---|---|---|---|---|---|
.show-extra-small |
Hidden | Hidden | Hidden | Hidden | Visible |
.show-small |
Hidden | Hidden | Hidden | Visible | Hidden |
.show-medium |
Hidden | Hidden | Visible | Hidden | Hidden |
.show-large |
Hidden | Visible | Hidden | Hidden | Hidden |
.show-extra-large |
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 ≥ 768px | Small ≥ 768px | Extra Small ≤ 480px |
|---|---|---|---|---|---|
.hide-extra-small |
Visible | Visible | Visible | Visible | Hidden |
.hide-small |
Visible | Visible | Visible | Hidden | Visible |
.hide-medium |
Visible | Visible | Hidden | Visible | Visible |
.hide-large |
Visible | Hidden | Visible | Visible | Visible |
.hide-extra-large |
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 |