Magenta-design-system NPM

Magenta Design System

This package contains a number of CSS and image assets to use in your project for a Magenta ApS branded look and feel.

Installation

npm install --save magenta-design-system

Usage

Option 1 - Pack it into your JS/CSS bundle

Include magenta-design-system CSS in your bundle at build time. In many cases that would be by adding an import statement in your main script file like so:

import 'magenta-design-system'

Just make sure your setup accepts CSS and knows how to bundle it properly.

Option 2 - Refer assets in HTML `<head>`

Link to mds.css CSS and various application icons in your HTML's <head>. Assuming all your static files are served on a path named /assets, it could look like this: (example/index.html is available for reference.)

<!doctype html>
<html lang="da">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=yes">
    <meta name="theme-color" content="#ffffff">

    <!-- Maybe include some fonts -->
    <link rel="stylesheet" href="/assets/fonts/font.css">

    <!-- Favicon and various application icons -->
    <link rel="icon" href="/assets/magenta-favicon.svg">
    <link rel="mask-icon" href="/assets/mask-icon.svg" color="#070707">
    <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">
    <link rel="manifest" href="/assets/manifest.json">

    <!-- CSS -->
    <link rel="stylesheet" href="/assets/mds.css">

    <title>Hej!</title>
  </head>
  <body>
    <header>

      <!-- Logo image in header -->
      <img src="/assets/magenta-logo.svg" alt="Magenta ApS" style="height: 2rem; width: auto;">

    </header>
    <main class="container">

      <!-- Content goes here -->

    </main>
  </body>
</html>

Typography

Magenta Design System assumes you have the "Lato" font available. If that is not the case you can include the font from Google Fonts or self host the font files.

Font files are included in assets/fonts along with font.css file to give you an example on how to use @font-face to include font files in CSS.