The frontend library for MayCo's "Splint"-framework.
Latest version 1.2.56
Run the following command to add the npm package:
npm install @mayco/splint-frontend-framework
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>
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
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 */
}
newHeader.setLogo("../../assets/favicon.svg", "Test GmbH");
newHeader.setLogoTarget("index.html");
newHeader.addLink('Home', './index.html');
newHeader.removeLink('Home');
Enter the target attribute first and the value second.
newHeader.setStyle("background-color", "blue");
// Set mobile view
newHeader.mobile();
// Set desktop view
newHeader.desktop();
Click here for the example website.