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.

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

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, Popper and jQuery.

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. 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://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/popper.min.js" integrity="sha384-wtNlGLUJ2I0nMcuD4N4C2l3SrJdgaRpeu64hbXM9GHBPIEAQZqtmrvsJZAIL10I0" crossorigin="anonymous"></script>
    <script src="/js/pelican.min.js"></script>

</body>
</html>
Page top