Start
npm
npm i @magnolia-services/magnolia-css
import '@magnolia-services/magnolia-css/dist/magnolia.min.css'
CDN
Copy-paste the stylesheet. X.Y.Z is a version.
<link href="https://cdn.jsdelivr.net/npm/@magnolia-services/magnolia-css@X.Y.Z/dist/magnolia.min.css" rel="stylesheet">
Universal
Margin and padding are 0 for all elements.
Roboto from Google Fonts as a base font-family.
Base font size 13px and after breakpoint (1024px) 16px.
Utilities
Following classes can be added to style element:
- text-left
- text-right
- text-center
- text-justify
- font-normal
- font-bold
- cursor-pointer
- desktop-only (breakpoint at 1024px)
- mobile-only (breakpoint at 1024px)
To disable element add property disabled
<div class="btn" disabled>Button</div>
Grid
Columns needs to be wrapped in element with class row.
Add row--responsive class to have breakpoint at 1024px.
col-x has width x/12. E.g.:
- col-1 would be 1/12
- col-2 would be 2/12
- ...
- col-12 would be 12/12
Layout
This demo/doc page is build with layout styles available.
Header uses flex with space-between. Add elements with class header__action to create header actions.
Sidebar is hidden on mobile. To make it visible add class sidebar--show
<header class="header"></header>
<nav class="sidebar"></nav>
<main class="main main--right"></main>
You can chose not to have sidebar or have it on the right hand side with help of sidebar--right and main--left
Tabs
To add bottom border needs to be wrapped in element with class tabs.
Inputs
Floating labels
input--hasValue keeps label floating.
Labels above
Dropdown
Dropdown is shown by adding dropdown--show class.
To align to the right add dropdown--right class.
Divider
Box
Table
| Cursus | Magna |
|---|---|
| Condimentum Elit | Commodo Ullamcorper |
| Condimentum Elit | Commodo Ullamcorper |
| Condimentum Elit | Commodo Ullamcorper |
| Condimentum Elit | Commodo Ullamcorper |
Horizontally scrolling tables
For horizontally scrolling tables needs to be wrapped in element with class table-responsive.
| Cursus | Magna |
|---|---|
| Condimentum Elit | Commodo Ullamcorper |
| Condimentum Elit | Commodo Ullamcorper |
Table--definitions
| Condimentum Elit | Commodo Ullamcorper |
| Condimentum Elit | Commodo Ullamcorper |
Notification
To render notifications on top right corner wrap all in element with class notifications.
Badges
Icons
Uses Magnolia Font icons
Modal
Panel
Panel is shown by adding panel--show class.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Dark mode
To enable dark mode add class dark to html element.