Elements CSS

Welcome to the Magnolia Elements CSS Design System. This is a work-in-progress toolkit tailored specifically for Magnolia CMS. Our goal is to provide a cohesive set of tools and guidelines for our internal development teams to make the process of building on Magnolia CMS more efficient and consistent.

Key Points:

• Focused on Magnolia CMS: This system is optimized for Magnolia CMS, ensuring compatibility and efficiency.
• Integration with magnolia-ds-tokens: The design system makes use of magnolia-ds-tokens CSS variables, aiming for modularity and ease of updates.
• Consistency Across Projects: The primary objective is to provide a consistent foundation, reducing disparities in UI and UX across different projects.

Please remember, this design system is currently intended for internal use only. Feedback is always welcome as we continue to refine and expand the system.

Let's get coding!

Getting Started

Access to Repository

Ask us to get the token to the repository. you need to have a .npmrc file like that:

always-auth=true
//npm.pkg.github.com/:_authToken=${WARP_GITHUB_NPM_TOKEN}
//npm.magnolia-cms.com/repository/npm-dx-core/:_auth=${WARP_NEXUS_NPM_TOKEN}
@magnolia-private:registry=https://npm.magnolia-cms.com/repository/npm-dx-core/
@solutas:registry=https://npm.pkg.github.com

Installation and usage

• Install @solutas/mgnl-elements-css
• Import the token import "@solutas/mgnl-elements/build/css/_variables.css"

The token has to be imported once before any other components can be used. Each component has the path in the documentation page.

Below you can find the list of Components: