kernl-ui | Global Elements

Overview

The global elements package includes a few elements that should be included on almost all Northeastern sites. They have dynamic content and fixed designs for consistency across sites.

Installation

We provide a package for developers to pull in these global elements quickly and easily.

Head

If you're not already loading the 'Lato' font family, add the following code in your template head.

            <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900" rel="stylesheet">

CDN

Load the following script and stylesheet from the CDN in your template head:

            <script src="https://global-packages.cdn.northeastern.edu/global-elements/dist/js/index.umd.js" defer></script>
<link rel="stylesheet" href="https://global-packages.cdn.northeastern.edu/global-elements/dist/css/index.css">

If you're not already running the full kernl(ui) package, load the following script after loading the global elements script.

            <script src="https://global-packages.cdn.northeastern.edu/kernl-ui/dist/js/index.umd.js" defer></script>

NPM (Node Package Manager)

Note: This installation method is only for projects that are not already running the full kernl(ui) package and Global Elements package from the CDN.

This installation method requires the use of ES6 Modules in conjunction with a static module bundler like Webpack for generating static JS assets. You may also leverage preprocessors (in conjunction with Webpack) like SASS or PostCSS to generate static CSS assets. For more information on setting up an environment suitable for kernl(ui), please refer to the kernl(ui) Installation Guide

The following packages are available in the npm package manager:

@northeastern-web/global-elements - The global elements package.
@northeastern-web/kernl-ui - The kernl(ui) package.

To install the global elements and kernl(ui) packages, run the following command in your terminal within your project's root directory:

            npm install @northeastern-web/global-elements @northeastern-web/kernl-ui

Pre-compiled CSS (SCSS/PostCSS/SASS) & JS Modules (ES6+)

Import the packages in your entry CSS file:

            @import "@northeastern-web/kernl-ui"; // Optional - Loads the full kernl(ui) CSS library from package.
@import "@northeastern-web/global-elements"; // Required - Loads the necessary global-elements CSS

Import (ES6) the packages in your entry JS file:

            // kernl(ui) - Required for Alpine.js and Feather Icon support
import "@northeastern-web/kernl-ui";

// Global Elements - Northeastern branded Global Header and Footer
import NUGlobalElements from "@northeastern-web/global-elements"; 
window.NUGlobalElements = NUGlobalElements;

To include the global header on a page, add the following into your HTML where you'd like the element to be inserted.

            <div x-data="NUGlobalElements.header()" x-init="init()" style="height: 48px; background-color: black"></div>

Option: Header Wordmark

The default header does not include the "Northeastern University" wordmark, as most sites include it in their respective lockups. If your web property does not have an NU lockup, you can enable this option by simply passing an object to the NUGlobalElements.header function when you initialize it:

            <div
    x-data="NUGlobalElements.header({
        wordmark: true
    })"
    x-init="init()"
    style="height: 48px; background-color: black"
></div>

Related: Logos and Identity

Option: Skip to Main

Best practices in web accessibility dictate that a site should include a "skip to main content" link. If your web property does not already have this built in, pass the following object to the NUGlobalElements.header function when you initialize it:

            <div
    x-data="NUGlobalElements.header({
        skipToMainSelector: '#main' // or the ID of the element to skip to
    })"
    x-init="init()"
></div>

Option: Menu

The menu option determines whether the header should show the "Explore Northeastern" toggle button. Some sites and web applications aren't intended to link to other properties and should disable this menu. The menu option is set to true by default.

            
                <div
                    x-data="NUGlobalElements.header({
                        menu: false,
                    })"
                    x-init="init()"
                ></div>

To include the global footer on a page, add the following into your HTML where you'd like the element to be inserted.

            <div x-data="NUGlobalElements.footer()" x-init="init()"></div>

To include the TrustArc cookie consent manager, add the following into your HTML underneath the Global Footer.

            <div x-data="NUGlobalElements.trustarc()" x-init="init()"></div>

Global Elements