Skip to Main Content

Pelican Design System icon Pelican Design System Get Started

Get Started

Get a quick start using Pelican.

Edit on GitHub

On this page:

Design

Get the Pelican 2 Design library, available at Figma Community. Use that file to create mockups and designs which connect to the code at Pelican Design System.

Installation

Installation of Pelican requires npm.

Install the package for your application:

npm install --save @la-ots/pelican bootstrap @popperjs/core

Pelican is built on top of Bootstrap, so Bootstrap and Popper are expected runtime dependencies for app projects. In most modern npm setups these may be installed automatically, but it is still best to install them explicitly so your app has a predictable dependency tree. For application projects, use regular dependencies rather than devDependencies because the CSS and JavaScript are used at runtime.

Node-based apps

If you are building a Node-based app with a bundler such as Vite, Webpack, or Parcel, import Pelican’s compiled assets from the package:

import '@la-ots/pelican/dist/css/pelican.css';
import '@la-ots/pelican/dist/js/pelican.js';

ASP.NET Core MVC apps

For a .NET 8+ MVC application, start by installing the package from npm in the web project folder:

npm install --save @la-ots/pelican bootstrap @popperjs/core

Then copy the compiled assets from the package into your app’s static files folder so they are served by ASP.NET Core. A typical workflow is:

mkdir -p wwwroot/css wwwroot/js
cp node_modules/@la-ots/pelican/dist/css/pelican.min.css wwwroot/css/
cp node_modules/@la-ots/pelican/dist/js/pelican.bundle.min.js wwwroot/js/

Reference the files from your shared layout, such as Views/Shared/_Layout.cshtml:

<link rel="stylesheet" href="~/css/pelican.min.css" />
<script src="~/js/pelican.bundle.min.js" defer></script>

If your MVC app uses a frontend build pipeline, you can also import the assets from your entry point using the same statements shown above for Node-based apps.

Static sites and manual setup

Installation instructions for the latest version of the package can be found on NPM.

For simple static pages, install the package with npm, then copy the compiled CSS and JS out of node_modules/@la-ots/pelican/dist/ into a folder your site actually serves (or otherwise host them), and reference them from your HTML using the path where you placed them. The example below assumes the files were copied to css/ and js/ folders alongside your HTML:

<link rel="stylesheet" href="/css/pelican.min.css" />
<script src="/js/pelican.bundle.min.js" defer></script>

For the recommended font and icon experience, also include Public Sans and Font Awesome.

Builds

Included within the package are the following compiled CSS and JS builds:

The Pelican Design System, provides compiled CSS and JS (pelican.*) or compiled and minified CSS and JS (pelican.min.*). Source maps are available as well (pelican.*.map).

Bundled versions (pelican.bundle.*) include Bootstrap’s JS and Popper.

For proper font and icon display, you should also use the Public Sans typeface and Font Awesome library, which are not provided in the bundled resources.

Minified builds should be used in the production environments of projects for performance benefits. Un-minified versions should be used in pre-production environments for troubleshooting purposes.

Usage

Download the package and extract the contents, or copy the compiled assets out of node_modules/@la-ots/pelican/dist/ into a folder served by your app. The /css/... and /js/... paths below are just an example of where those files might be hosted, so adjust them to match wherever you placed the files. Include the Pelican files and associated dependencies (typically via CDNs), either bundled or non-bundled:

<head>
    ...
    <link href="/css/pelican.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/brands.min.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900" rel="stylesheet">
    ...
</head>
<body>
...

    <script src="/js/pelican.bundle.min.js"></script>

[or]

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" crossorigin="anonymous"></script>
    <script src="/js/pelican.min.js"></script>

</body>
</html>
Page top