MTVH Design System

View documentation for MTVH Design System.

This library is dependant on:

• Bootstrap 5.*

Prerequisites

• Node.js — latest LTS version
• Hugo — latest extended version. Installation guide https://gohugo.io/installation/

Development

• npm install will download dependancies
• npm run dev will start dev environment - http://localhost:1313/
• npm run build will build and minify css to dist folder http://localhost:1313/
• npm publish --access=public Please run npm build before you publish. This will publish dist folder to npm. Note, you will need a permission to do so.

To run proxy decap local cms

Access to static/admin, run 'npx decap-server' Once the proxy started you should be able to cms, ie http://localhost:1313/admin See more from https://decapcms.org/docs/beta-features/

Installation

1. Installing with NPM
2. OR Import css styles
3. Adding fonts and images assets

Installing with NPM

npm install @mtvh/mtvh-design-system

All styles

To import all styles as a single package you need to add following snippet to your main SCSS file:

@import '/node_modules/@mtvh/mtvh-design-system/dist/mtvh.min.css';

Alternatively, you could include the css inside the footer/head tag depending on your site structure

<link type="text/css" rel="stylesheet" href="dist/mtvh.min.css">

Core and selected components

Our core library includes the design system's base theme, typography, mixins and helper functions. Once you imported it, you can take full advantage of our variables and helpers. To import core library you need to add following snippet at the start of your main SASS file:

@import "node_modules/@mtvh/mtvh-design-system/assets/scss/mtvh";

Adding fonts and images assets

The css uses the fonts and icons using a default path as below. You can amend the prefix by customize via the following variable

$font-path: "./fonts/";
$asset-icon-path: "./images/icons/";

• Please note the font files is downloadable from mtvh-design-system git repo NOT npm