HTML header meant for inclusion in LibGuides, OPACs, & other third-party apps where you can paste some HTML in a textarea but not much else. See an example.
The intention is to make this header as reusable as possible simply by specifying different configurations. To build a new header, run
grunt build (see Getting Started section below) & then copy the output inside "build/index.html". To create a new configuration, write your own config.json & then point to it with the "config" flag. So for a "libguides.json" I created, I might run
grunt build --config=libguides.json
Inside config.json, you define text that will be replaced in the header's code. Currently, you can specify an institutional prefix to avoid code conflicts (e.g. a site might already have an
"id=header" element), five links and their link text, and two logo images (one for larger screens and one for small). The easiest way to customize is to edit config.json but keep the existing text the same. The configuration must be valid JSON.
There are 2 example configurations in the project in the "config" folder, including one for the California College of the Arts in "config/libguides.cca.json".
To work on this using its development tools:
- Install NodeJS
- Install Grunt globally; on the command line, run
npm install -g grunt-cli
- Inside this project, install its dependencies:
There are 3 major Grunt tasks available:
grunt watchwatches for any changes to files inside the "app" folder & then runs
- Image URLs as part of config.json
- Explain JSON options
- Example on GitHub pages
- Bigger touch targets (
<li>should be larger)
- Logo should link somewhere
- Variable number of links?