M.css Magnolia.css

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:

To disable element add property disabled

Button

        <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-12
col-3
col-9
col-6
col-6

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

Button

Button
Button

Tabs

Tab
Tab
Tab
Tab
Tab
Tab

To add bottom border needs to be wrapped in element with class tabs.

Tab
Tab
Tab

Inputs

Floating labels

input--hasValue keeps label floating.

Labels above

Divider

Amet Tortor Tristique Commodo
Aenean Consectetur Adipiscing Commodo
Amet Tortor Tristique Commodo Aenean Consectetur Adipiscing Commodo

Box

Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Header
Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

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.

Title
Text
Title
Text
Title
Text
Title
Text

Badges

Badge
Badge--2
Badge--3

Icons

Uses Magnolia Font icons

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.