Layout
Card
Cards are a versatile component that can be used to display content in a structured way. They are often used to group related information together, such as images, text, and buttons. Cards can be used in a variety of contexts, such as product listings, blog posts, and social media feeds.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Skeleton (loading animation)
Skeleton is a CSS class that provides a loading animation for elements. It can be used to indicate that an element is loading or that the user has to wait for the content to be loaded. The monster-skeleton-col-xxx classes define the look of the skeleton. The xx defines the width of the skeleton in percent. The monster-skeleton-col-100 is the widest skeleton, while the monster-skeleton-col-10 is the narrowest skeleton.
The monster-skeleton-animated class defines the animation.
Level (z-index)
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. This is especially useful when you have elements that overlap (for example, if you have a modal dialog that appears on top of everything else on the page).
| Property | Description |
|---|---|
| --monster-z-index-default | Default stacking order for elements. |
| --monster-z-index-outline | Higher index for outlined elements to float above others. |
| --monster-z-index-dropdown | Defines the stack order for dropdown components. |
| --monster-z-index-dropdown-overlay | Z-index for overlays used with dropdowns. |
| --monster-z-index-sticky | Z-index for sticky positioning elements. |
| --monster-z-index-sticky-overlay | Z-index used for overlays on sticky elements. |
| --monster-z-index-fixed | Z-index for fixed positioning elements. |
| --monster-z-index-fixed-overlay | Z-index for overlays on fixed positioned elements. |
| --monster-z-index-modal-backdrop | Used for modal backdrops to maintain modal focus. |
| --monster-z-index-modal-backdrop-overlay | Overlay z-index for modal backdrops. |
| --monster-z-index-offcanvas | Z-index for offcanvas elements, typically side menus or panels. |
| --monster-z-index-offcanvas-overlay | Overlay z-index for offcanvas components. |
| --monster-z-index-modal | Z-index for modal dialogs to appear above all other content. |
| --monster-z-index-modal-overlay | Z-index for overlays used with modals. |
| --monster-z-index-popover | Z-index for popover content, higher than most UI elements. |
| --monster-z-index-popover-overlay | Overlay z-index for popover components. |
| --monster-z-index-tooltip | Z-index for tooltip elements, ensuring they float above other components. |
| --monster-z-index-tooltip-overlay | Overlay z-index specifically for tooltips. |
Media Queries (Breakpoints)
Media queries are used to apply different styles to a document depending on the size of the screen. Media queries are defined in the `@media` rule. The `@media` rule is used inside a style sheet to apply different styles for different media types/devices.
More information about media queries can be found on MDN Web Docs.
In Monster we use the following media queries:
| Class | From | To |
|---|---|---|
| viewport0 | 0 | 480px |
| viewport-4 | 0 | 480px |
| viewport-7 | 0 | 768px |
| viewport-9 | 0 | 992px |
| viewport-12 | 0 | 1200px |
| viewport4 | 480px | ∞ |
| viewport7 | 768px | ∞ |
| viewport9 | 992px | ∞ |
| viewport12 | 1200px | ∞ |
| viewport4-7 | 480px | 768px |
| viewport7-9 | 768px | 992px |
| viewport9-12 | 992px | 1200px |
In this illustration, you can see the different media queries and their breakpoints:
Spacing (margin, padding)
CSS-Properties
This section defines the CSS properties used for spacing, including margins and padding. Each class can be used to adjust the spacing of elements as specified below:
| Class | Value |
|---|---|
| --monster-space-0 | 0 |
| --monster-space-1 | 2px |
| --monster-space-2 | 4px |
| --monster-space-3 | 6px |
| --monster-space-4 | 10px |
| --monster-space-5 | 16px |
| --monster-space-6 | 26px |
| --monster-space-7 | 42px |
Classes
The following classes are designed to provide flexible spacing adjustments for various components. You can apply these classes to any element to set its margin or padding according to predefined values:
- monster-margin-<0, 1, 2, 3, 4, 5, 6, 7>
- monster-padding-<0, 1, 2, 3, 4, 5, 6, 7>
- monster-margin-<start, end, top, bottom>-<0, 1, 2, 3, 4, 5, 6, 7>
- monster-padding-<start, end, top, bottom>-<0, 1, 2, 3, 4, 5, 6, 7>
Examples
Below are examples of how to apply these classes to HTML elements:
Display & Visibility
The following classes can be used to set the display and visibility properties of an element. These CSS classes provide a quick way to control how elements are presented in the layout without modifying their intrinsic properties directly in the style sheets.
| Class | Property |
|---|---|
| .block | display: block; |
| .inline | display: inline; |
| .inline-block | display: inline-block; |
| .grid | display: grid; |
| .inline-grid | display: inline-grid; |
| .flex | display: flex; |
| .inline-flex | display: inline-flex; |
| .hidden, .none, .hide | display: none; |
| .visible | visibility: visible; |
| .invisible | visibility: hidden; |