@mayco/splint-frontend-framework v1.2.56

splint-frontend

The frontend library for MayCo's "Splint"-framework.

Whats new?

Latest version 1.2.56

Components

Header component

Instalation

NPM

Run the following command to add the npm package:

npm install @mayco/splint-frontend-framework

CDN

Add this to your header

<link rel="stylesheet" href="https://cdn.colingrahm.de/frameworks/splint-frontend/components/header/header_1_2_56/header.min.css">
<script src="https://cdn.colingrahm.de/frameworks/splint-frontend/components/header/header_1_2_56/header.min.js"></script> 

Usage

To use the splint header you have to crate a new header object. Now you can customize it like this:

const newHeader = new Header();                             // Create a new header

newHeader.setLogo("../../assets/favicon.svg", "Test GmbH"); // Setup the icon
newHeader.addLink('Home', './index.html');                  // Add a link to nav
newHeader.addLink('Contact', './index2.html');              // Add another link to nav

Customize colors

To customize the colors you have to setup these css variables:

:root {
    --primary: #DC143C;         /* Primary color */
    --primary-dark: #B21031;    /* Primary color hovered */

    --bg-color: #ffffff;        /* Background color */
    --bg-color-dark: #e9e9e9;   /* Dark background color */
    --bg-color-dark-2: #cecece; /* Second dark background color */

    --primary-text: #333;       /* Primary text color */
    --secondary-text: #cecece;  /* Secondary text color */
    --button-text: #ffffff;     /* Button text color */
}

Set custom logo icon

newHeader.setLogo("../../assets/favicon.svg", "Test GmbH");

Set logo target page

newHeader.setLogoTarget("index.html");

Add a navigation link

newHeader.addLink('Home', './index.html');

Remove a navigation link

newHeader.removeLink('Home');

Set style

Enter the target attribute first and the value second.

newHeader.setStyle("background-color", "blue");

Change view

// Set mobile view
newHeader.mobile();

// Set desktop view
newHeader.desktop();

Example

Click here for the example website.

Author

CGWebDev2003