# Bootstrap for GW Observatories This repository provides extensions to the standard [bootstrap-5.x](//github.com/twbs/bootstrap/) styling, with specific applications for the [GW-DetChar](//github.com/gwdetchar/gwdetchar/) and [GWSumm](//github.com/gwpy/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](https://www.ligo.caltech.edu/WA) (H1: Washington, U.S.A.) - [LIGO-Livingston](https://www.ligo.caltech.edu/LA) (L1: Louisiana, U.S.A.) - [Virgo](http://www.virgo-gw.eu) (V1: Italy) - [GEO600](https://www.geo600.org) (G1: Germany) - [KAGRA](https://gwcenter.icrr.u-tokyo.ac.jp/en/) (K1: Japan) - [LIGO-India](https://www.ligo-india.in) (I1: Maharashtra, India) [![npm version](https://badge.fury.io/js/gwbootstrap.svg)](https://badge.fury.io/js/gwbootstrap) [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/gwbootstrap/badge)](https://www.jsdelivr.com/package/npm/gwbootstrap) [![DOI](https://zenodo.org/badge/DOI/10.5281/zenodo.3483879.svg)](https://doi.org/10.5281/zenodo.3483879) ## Installation GW-Bootstrap can be installed server-side with [`npm`](https://www.npmjs.com/get-npm): ```bash npm install --save-dev gwbootstrap ``` ## Using jsDelivr However, the easiest way to import stylesheets and scripts is through the content delivery network [`jsDelivr`](https://jsdelivr.com). Simply include the following lines somewhere near the end of the `` metadata elements in your HTML: ```html ``` where `` is the semantic version number, e.g. 1.3.7. A heavier collection of more interactive features, including calendar view and a figure overlay tool, is available from the `gwbootstrap-extra` script: ```html ``` ## Dependencies 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
## Usage 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
# Contributing All code should follow the [Sass Guidelines](https://sass-guidelin.es) and [Airbnb JavaScript Style Guide](//github.com/airbnb/javascript) for consistency. Users may use the [stylelint](https://stylelint.io) CSS linter to check their stylesheets and [eslint](https://eslint.org) to parse JavaScript for issues before submitting. The [contributions guide](//github.com/gwdetchar/gwbootstrap/blob/master/CONTRIBUTING.md) outlines our recommended procedure for proposing additions and making and testing changes.