The Pelican Design System package is a customized Bootstrap theme for use within OTS projects.
Installation of the Pelican Design System requires npm.
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;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" 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>Within the installed package you'll find the following CSS and JS resources:
pelican
└── dist/
├── css/
| ├── pelican.css
| ├── pelican.css.map
| ├── pelican.min.css
| └── pelican.min.css.map
└── js/
├── pelican.bundle.js
├── pelican.bundle.js.map
├── pelican.bundle.min.js
├── pelican.bundle.js.min.map
├── pelican.esm.js
├── pelican.esm.js.map
├── pelican.esm.min.js
├── pelican.esm.min.js.map
├── pelican.js
├── pelican.js.map
├── pelican.min.js
└── pelican.min.js.map
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.
Documentation can be found at the Pelican Documentation website.
WIP
First, ensure all dependencies are installed on your local machine:
$ npm install
Once installed, test building all of the Pelican assets. Assets will build into the dist directory of the project's root.
$ npm run build-dist
To build documentation: (documentation is build into the dist\docs directory)
$ npm run build-dist-docs
It is recommended you run the watch command which will observe the asset directories and rebuild on any file changes:
$ npm run watch
There is a comparable script for the documentation development workflow:
$ npm run watch:docs
Documentation is generated using Eleventy. Learn more about Eleventy via its documentation.
Linting scripts for both CSS/SASS and Javascript:
$ npm run lint
This will run linters across the codebase. Scripts to run linters separately are provided as:
$ npm run css:lint
$ npm run js:lint
Note: Linters are not run as part of any watch scripts and must be run separately.