# GSC Bootstrap

This is a custom version of Bootstrap modified to fit GSC's brand guidelines. See https://github.com/twbs/bootstrap for the original Bootstrap source and https://getbootstrap.com/docs/4.0/getting-started/theming/ for Bootstrap theming guidelines.

This module builds no JS as it is designed to be used alongside https://github.com/reactstrap/reactstrap. The Reactstrap package is listed as a peer dependency in `package.json`. The `styled-components` package is also recommended but not required.

## Structure

Bootstrap is installed as a Node module. The `gsc.scss` file is the build source, which imports custom variables from the `scss/` directory which override the variables in vanilla Bootstrap when it is also imported.

Build scripts in `package.json` are adapted from Bootstrap's `package.json`, and use the same `devDependencies`. The `postcss.config.js` file is also duplicated from the Bootstrap source.

The `files` field in `package.json` is used to ensure that only the built code is shipped when this package is installed as a Node module.

## Installation

Follow instructions at https://github.com/reactstrap/reactstrap for its installation, but do not add the Bootstrap package. Instead, simply add this package using e.g.

    yarn add git+ssh://git@gscgit:utils/gsc-bootstrap.git

## Usage

Import this package's `bootstrap.css` in your main .js file e.g. `import 'gsc-bootstrap/dist/bootstrap.css';` in place of vanilla Bootstrap.

The font files in `gsc-bootstrap/dist/font/` must be made available via the application at `https://app.domain/fonts/`.

When using this library in production, it's worth configuring `babel-plugin-transform-imports` as detailed on https://github.com/GoogleChromeLabs/webpack-libs-optimizations to ensure minimal bundle sizes.