This repository provides extensions to the standard bootstrap-5.x styling, with specific applications for the GW-DetChar and GWSumm suite of detector characterisation tools.
This collection of cascading style sheets (CSS) and JavaScript utilities is designed to represent the global network of ground-based gravitational wave observatories, with explicit style support for:
- LIGO-Hanford (H1: Washington, U.S.A.)
- LIGO-Livingston (L1: Louisiana, U.S.A.)
- Virgo (V1: Italy)
- GEO600 (G1: Germany)
- KAGRA (K1: Japan)
- LIGO-India (I1: Maharashtra, India)
GW-Bootstrap can be installed server-side with
npm:
npm install --save-dev gwbootstrapHowever, the easiest way to import stylesheets and scripts is through the
content delivery network jsDelivr. Simply include the
following lines somewhere near the end of the <head> metadata elements
in your HTML:
<link href="https://cdn.jsdelivr.net/npm/gwbootstrap@<version>/lib/gwbootstrap.min.css" rel="stylesheet" media="all">
<script src="https://cdn.jsdelivr.net/npm/gwbootstrap@<version>/lib/gwbootstrap.min.js" type="text/javascript"></script>where <version> is the semantic version number, e.g. 1.3.6.
A heavier collection of more interactive features, including calendar
view and a figure overlay tool, is available from the gwbootstrap-extra
script:
<script src="https://cdn.jsdelivr.net/npm/gwbootstrap@<version>/lib/gwbootstrap-extra.min.js" type="text/javascript"></script>The following table shows recommended package dependencies for stylesheets and JavaScript elements, depending on use case (note: import order is important).
| with gwbootstrap | with gwbootstrap-extra | |
| CSS | gwbootstrap.min.css | gwbootstrap.min.css |
| JavaScript | jquery-3.7.1 jquery-lazy-1.7.11 bootstrap-5.3.3 fancybox-5.0.35 gwbootstrap.min.js |
jquery-3.7.1 jquery-ui-1.13.2 moment.js-2.30.1 bootstrap-5.3.3 fancybox-5.0.35 bootstrap-datepicker-1.9.0 gwbootstrap-extra.min.js |
The primary advantage of gwbootstrap is that it provides
interferometer-specific color styling for navbars, buttons,
cards, and alerts through the following classes:
| IFO | Navbar | Button | Card | Alert |
| H1 | navbar-h1 | btn-h1 | card-h1 | alert-h1 |
| L1 | navbar-l1 | btn-l1 | card-l1 | alert-l1 |
| V1 | navbar-v1 | btn-v1 | card-v1 | alert-v1 |
| G1 | navbar-g1 | btn-g1 | card-g1 | alert-g1 |
| K1 | navbar-k1 | btn-k1 | card-k1 | alert-k1 |
| I1 | navbar-i1 | btn-i1 | card-i1 | alert-i1 |
| Network | navbar-network | btn-network | card-network | alert-network |
All code should follow the Sass Guidelines and Airbnb JavaScript Style Guide for consistency. Users may use the stylelint CSS linter to check their stylesheets and eslint to parse JavaScript for issues before submitting.
The contributions guide outlines our recommended procedure for proposing additions and making and testing changes.