First build

.gitignore

+# https://github.com/github/gitignore
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
\ No newline at end of file

README.md

+# 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.

gsc.scss

+// GSC Customised Bootstrap
+
+// GSC overrides
+@import "scss/gsc-fonts";
+@import "scss/gsc-variables";
+
+// Default Bootstrap Sass
+@import "node_modules/bootstrap/scss/bootstrap";

package.json

+{
+	"name": "gsc-bootstrap",
+	"version": "1.0.0",
+	"description": "A GSC-themed version of the Bootstrap CSS framework",
+	"main": "index.js",
+	"repository": "https://git.gsc.org.uk/utils/gsc-bootstrap",
+	"author": "Ben Galloway <ben.galloway@gsc.org.uk>",
+	"license": "MIT",
+	"private": true,
+	"scripts": {
+		"build": "yarn run dist",
+		"dist": "yarn run css && cp -r font dist/",
+		"css": "yarn run css-compile && yarn run css-prefix && yarn run css-minify",
+		"css-compile":
+			"node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 gsc.scss dist/bootstrap.css",
+		"css-prefix": "postcss --config postcss.config.js --replace \"dist/*.css\" \"!dist/*.min.css\"",
+		"css-minify":
+			"cleancss --level 1 --source-map --source-map-inline-sources --output dist/bootstrap.min.css dist/bootstrap.css"
+	},
+	"files": ["dist"],
+	"peerDependencies": {
+		"reactstrap": "^5.0.0"
+	},
+	"devDependencies": {
+		"autoprefixer": "^8.3.0",
+		"bootstrap": "^4.0.0",
+		"clean-css-cli": "^4.1.11",
+		"node-sass": "^4.8.3",
+		"postcss-cli": "^5.0.0"
+	}
+}

postcss.config.js

+"use strict";
+
+// Duplicated from https://github.com/twbs/bootstrap/blob/v4-dev/build/postcss.config.js
+
+module.exports = (ctx) => ({
+	map: ctx.file.dirname.includes("examples")
+		? false
+		: {
+				inline: false,
+				annotation: true,
+				sourcesContent: true,
+		  },
+	plugins: {
+		autoprefixer: {
+			cascade: false,
+		},
+	},
+});

scss/_gsc-fonts.scss

+// Proxima Nova Bold
+
+@font-face {
+	font-family: 'ProximaNova-Bold';
+	src: url('/fonts/ProximaNova-Bold.eot');
+	src: url('/fonts/ProximaNova-Bold.eot?#iefix') format('embedded-opentype'), url('/fonts/ProximaNova-Bold.woff') format('woff'), url('/fonts/ProximaNova-Bold.ttf') format('truetype'), url('/fonts/ProximaNova-Bold.svg#ProximaNova-Bold') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
\ No newline at end of file

scss/_gsc-variables.scss

+// Custom GSC Variables
+
+//
+// Color system
+//
+
+// GSC Brand Colours
+// Core
+$GSCNavy: #2e2d44;
+$GSCAqua: #30b7bb;
+$GSCOffWhite: #f1f4f5;
+
+// Secondary
+$GSCPink: #e12a58;
+$GSCGold: #e5b94c;
+
+// Tertiary
+$GSCTeal: #036173;
+$GSCBlue: #36a9e1;
+$GSCLime: #d5db40;
+$GSCOrange: #e56a0c;
+$GSCRed: #e40426;
+$GSCPurple: #64335f;
+$GSCGreen: #22b573;
+
+
+// Bootstrap default colours
+$white:    #fff;
+$gray-100: #f8f9fa;
+$gray-200: #e9ecef;
+$gray-300: #dee2e6;
+$gray-400: #ced4da;
+$gray-500: #adb5bd;
+$gray-600: #6c757d;
+$gray-700: #495057;
+$gray-800: #343a40;
+$gray-900: #212529;
+$black:    #000;
+
+$blue:    $GSCBlue;
+$indigo:  $GSCNavy;
+$purple:  $GSCPurple;
+$pink:    $GSCPink;
+$red:     $GSCRed;
+$orange:  $GSCOrange;
+$yellow:  $GSCGold;
+$green:   $GSCGreen;
+$teal:    $GSCTeal;
+$cyan:    $GSCAqua;
+
+// Bootstrap theme colours
+$primary:       $GSCAqua;
+$secondary:     $GSCNavy;
+$success:       $GSCGreen;
+$info:          $GSCBlue;
+$warning:       $GSCGold;
+$danger:        $GSCRed;
+$light:         $GSCOffWhite;
+$dark:          $GSCNavy;
+// stylelint-enable
+
+
+// Body
+//
+// Settings for the `<body>` element.
+
+$body-bg:                   theme-color("light");
+$body-color:                theme-color("dark");
+
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$component-active-color:      theme-color("light");
+
+
+// Fonts
+//
+// Font, line-height, and color for body text, headings, and more.
+
+// stylelint-disable value-keyword-case
+$font-family-sans-serif:      "Helvetica Neue", Arial, sans-serif;
+$font-family-base:            $font-family-sans-serif !default;
+
+$headings-font-family:        "ProximaNova-Bold", sans-serif;
+// ProximaNova-Bold is defined in ./_gsc-fonts.scss with font files in ../font
+// The font files must be made available via the application at /fonts/
+$headings-font-weight:        400;
+$headings-line-height:        1.0;
+// stylelint-enable value-keyword-case
+
+$mark-bg:                     theme-color-level("light", 10);
+
+
+// Forms
+
+$input-bg:                              theme-color("light");
+
+$input-color:                           theme-color("dark");
+$input-border-color:                    theme-color("dark");
+
+$input-focus-bg:                        $white;
+
+
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+$dropdown-bg:                       theme-color("light");
+
+// Pagination
+
+$pagination-bg:                     theme-color("light");
+
+
+// Jumbotron
+
+$jumbotron-bg:                      theme-color-level("light", 20);
+
+
+// Tooltips
+
+$tooltip-color:               theme-color("light");
+$tooltip-bg:                  theme-color("dark");
+
+
+// Popovers
+
+//$popover-bg:                        theme-color("light");
+//$popover-header-bg:                 theme-color-level("light", 3);
+
+
+// Modals
+
+$modal-content-bg:               theme-color("light");
+$modal-backdrop-bg:           theme-color("dark");
+
+
+// Progress bars
+
+$progress-bg:                       $gray-400;
+$progress-bar-color:                theme-color("light");
+$progress-bar-bg:                   theme-color("dark");
+
+
+// List group
+
+$list-group-bg:                     theme-color("light");
+
+
+// Figures
+
+$figure-caption-color:              theme-color-level("dark", -10);
+
+
+// Carousel
+
+//$carousel-control-color:            theme-color("light");
+//$carousel-indicator-active-bg:      theme-color("light");
+//$carousel-caption-color:            theme-color("light");
+
+
+// Close
+
+$close-color:                       theme-color("dark");
+$close-text-shadow:                 0 1px 0 theme-color("light");
+
+// Code
+
+$code-color:                        $green;