fix!: move customisations to standalone partial (#17)

BREAKING CHANGE

* docs: remove link from find module

* docs: update readme

* docs: update readme

* docs: update page-header example

* docs: update breadcrumbs

* fix: update navbar padding

* feat!: add theme partial

* fix: include theme partial

* fix: remove !default flag

* fix!: remove `sr-only` util

* fix: move variables into partial

* fix: use mixin

* fix: configure dropdown deps

* fix: configure button deps

* chore: compiled css

* chore: provide full and pruned examples

* docs: update stylesheet ref

* docs: update readme

README.md

@@ -1,11 +1,73 @@
 # Bootstrap v5 Theme
 ## Usage
-1. Create a [Personal Access Token](https://github.com/settings/tokens/) granting the `write:packages` scope. `write` also allows `read`… 
+1. Create a [Personal Access Token](https://github.com/settings/tokens/) granting the `write:packages` scope. `write` also allows `read`…
 2. Add `@talis:registry=https://npm.pkg.github.com` to your project's `.npmrc` file.
-3. Two options:
-   - **Either** import `talis.scss` which includes Bootstrap customisations _and_ Bootstrap v5;
-   - **Or** include the Talis variables ahead of Bootstrap, and the Talis components afterwards.
 
+3. Pull in the theme. Either:
+  - Specify the variable overrides, import the rest of Bootstrap, and then include the theme partial
+
+```scss
+// Toggle global options
+$enable-gradients: false;
+$enable-shadows: false;
+
+@import "variables"; // Talis customisations are here
+@import "bootstrap/scss/bootstrap";
+@import 'theme';
+```
+
+Or
+- Place variable overrides first, then import the styles you need.
+
+
+```scss
+// Toggle global options
+$enable-gradients: false;
+$enable-shadows: false;
+
+// Customize some defaults
+@import "bootstrap/scss/functions"; // Required
+
+@import "variables"; // Talis customisations are here
+
+@import "bootstrap/scss/variables"; // Required
+@import "bootstrap/scss/mixins"; // Required
+@import "bootstrap/scss/utilities"; // Required
+
+@import "bootstrap/scss/root"; // Required
+@import "bootstrap/scss/reboot"; // Required
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+
+// Core Bootstrap components
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+
+// Helpers
+@import "bootstrap/scss/helpers";
+
+// Utilities
+@import "bootstrap/scss/utilities/api";
+
+@import 'theme';
+```
 
 ## Contributing
 
@@ -19,26 +81,15 @@ cd $DEVELOPMENT_WORK_DIR/bootstrap-theme
 # Install dependencies
 npm i
 
-# Compile Sass
-npm run css-compile
-
-# Watch Sass for changes (uses nodemon)
-npm run watch
-
-# Start local server (uses sirv-cli)
-npm run server
-
-# Watches Sass for changes and starts a local server
+# Compiles Sass, builds the Eleventy-powered docs, watches both for changes
 npm start
 ```
 
-For the most straightforward development, open two Terminal tabs to execute `npm run server` and `npm run watch` at the same time.
-
-Open <http://localhost:3000> to see the page in action.
+Open <http://localhost:8080> to see the page in action.
 
 ## Scripts
 
-The following npm scripts are available to you in this starter repo. With the exception of `npm start` and `npm test`, the remaining scripts can be run from your command line with `npm run scriptName`.
+The following npm scripts are available. With the exception of `npm start` and `npm test`, the remaining scripts can be run from your command line with `npm run scriptName`.
 
 | Script | Description |
 | --- | --- |
@@ -56,25 +107,6 @@ The following npm scripts are available to you in this starter repo. With the ex
 
 Before you start to use tools that remove Bootstrap styling like [PurgeCSS](#purgecss), you can make some broad optimizations by only including the stylesheets you think you'll need.
 
-### Optimizing JS
-
-Similar to optimizing CSS, Bootstrap publishes individual scripts for each of their plugins. This allows you to import only what you need, versus the entire bundle and dependencies. For example, if you don't plan on using dropdowns, tooltips, or popovers, you can safely omit the Popper.js depdendency.
-
-Add more options here, or import the entire `bootstrap-bundle.min.js` file, to get all JavaScript plugins and Popper.js.
-
-### PurgeCSS
-
-[PurgeCSS](https://purgecss.com/) is a [PostCSS](https://postcss.org) plugin that removes unused CSS based on your site's HTML. It finds rulesets that are unused by your HTML and removes them, ensuring only what's needed is sent to your site's visitors while improving file size and performance.
-
-A single npm script runs PurgeCSS against the `index.html` file to remove unused styles from `assets/css/starter.css`.
-
-To purge CSS, run `npm run css-purge` from the command line. This executes the following:
-
-```shell
-npm purgecss --css assets/css/starter.css --content index.html --output assets/css/
-```
-
-PurgeCSS is a PostCSS plugin and [can be configured](https://purgecss.com/configuration.html) to your exact needs with a little extra effort, including additional [command line options](https://purgecss.com/CLI.html).
 
 ### Stylelint
 

docs/forms/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link rel="stylesheet" href="/bootstrap-theme/assets/css/talis.css" />
+    <link rel="stylesheet" href="/bootstrap-theme/assets/css/custom.css" />
     <link
       href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
       rel="stylesheet"

docs/formsA/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link rel="stylesheet" href="/bootstrap-theme/assets/css/talis.css" />
+    <link rel="stylesheet" href="/bootstrap-theme/assets/css/custom.css" />
     <link
       href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
       rel="stylesheet"

docs/formsB/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link rel="stylesheet" href="/bootstrap-theme/assets/css/talis.css" />
+    <link rel="stylesheet" href="/bootstrap-theme/assets/css/custom.css" />
     <link
       href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
       rel="stylesheet"

docs/html-ipsum/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link rel="stylesheet" href="/bootstrap-theme/assets/css/talis.css" />
+    <link rel="stylesheet" href="/bootstrap-theme/assets/css/custom.css" />
     <link
       href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
       rel="stylesheet"

docs/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link rel="stylesheet" href="/bootstrap-theme/assets/css/talis.css" />
+    <link rel="stylesheet" href="/bootstrap-theme/assets/css/custom.css" />
     <link
       href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
       rel="stylesheet"
@@ -178,7 +178,7 @@
 
 
 <header class="page-header d-flex justify-content-between align-items-center">
-  <h1>
+  <h1 class="m-0">
     Primary task
     <small class="text-muted">Additional information</small>
   </h1>

docs/otis/add-resource/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link rel="stylesheet" href="/bootstrap-theme/assets/css/talis.css" />
+    <link rel="stylesheet" href="/bootstrap-theme/assets/css/custom.css" />
     <link
       href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
       rel="stylesheet"
@@ -176,15 +176,15 @@
       <li class="breadcrumb-item">
         <a href="/bootstrap-theme/otis/page-layout"><i class="far fa-arrow-alt-circle-left"></i> My Modules</a>
       </li>
-      <li class="breadcrumb-item" aria-current="page">
+      <li class="breadcrumb-item">
         <a href="/bootstrap-theme/otis/module">Encouraging deeper discussion</a>
       </li>
       <li class="breadcrumb-item active" aria-current="page">Add resource</li>
     </ol>
   </nav>
 
   <a href="/bootstrap-theme/otis/module">
-    <span class="sr-only">Close</span>
+    <span class="visually-hidden">Close</span>
     <i class="fas fa-times-circle fa-3x d-none d-lg-inline"></i>
     <i class="fas fa-times-circle fa-2x d-lg-none"></i>
   </a>

docs/otis/archived-modules/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link rel="stylesheet" href="/bootstrap-theme/assets/css/talis.css" />
+    <link rel="stylesheet" href="/bootstrap-theme/assets/css/custom.css" />
     <link
       href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
       rel="stylesheet"

docs/otis/create-module-invalid/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link rel="stylesheet" href="/bootstrap-theme/assets/css/talis.css" />
+    <link rel="stylesheet" href="/bootstrap-theme/assets/css/custom.css" />
     <link
       href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
       rel="stylesheet"

docs/otis/create-module/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link rel="stylesheet" href="/bootstrap-theme/assets/css/talis.css" />
+    <link rel="stylesheet" href="/bootstrap-theme/assets/css/custom.css" />
     <link
       href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
       rel="stylesheet"

docs/otis/edit-module-invalid/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link rel="stylesheet" href="/bootstrap-theme/assets/css/talis.css" />
+    <link rel="stylesheet" href="/bootstrap-theme/assets/css/custom.css" />
     <link
       href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
       rel="stylesheet"

docs/otis/edit-module/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link rel="stylesheet" href="/bootstrap-theme/assets/css/talis.css" />
+    <link rel="stylesheet" href="/bootstrap-theme/assets/css/custom.css" />
     <link
       href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
       rel="stylesheet"

docs/otis/edit-resource/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link rel="stylesheet" href="/bootstrap-theme/assets/css/talis.css" />
+    <link rel="stylesheet" href="/bootstrap-theme/assets/css/custom.css" />
     <link
       href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
       rel="stylesheet"

docs/otis/find-module/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link rel="stylesheet" href="/bootstrap-theme/assets/css/talis.css" />
+    <link rel="stylesheet" href="/bootstrap-theme/assets/css/custom.css" />
     <link
       href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
       rel="stylesheet"

docs/otis/module-added/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link rel="stylesheet" href="/bootstrap-theme/assets/css/talis.css" />
+    <link rel="stylesheet" href="/bootstrap-theme/assets/css/custom.css" />
     <link
       href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
       rel="stylesheet"

docs/otis/module-archived/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link rel="stylesheet" href="/bootstrap-theme/assets/css/talis.css" />
+    <link rel="stylesheet" href="/bootstrap-theme/assets/css/custom.css" />
     <link
       href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
       rel="stylesheet"

docs/otis/module/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link rel="stylesheet" href="/bootstrap-theme/assets/css/talis.css" />
+    <link rel="stylesheet" href="/bootstrap-theme/assets/css/custom.css" />
     <link
       href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
       rel="stylesheet"

docs/otis/page-layout/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link rel="stylesheet" href="/bootstrap-theme/assets/css/talis.css" />
+    <link rel="stylesheet" href="/bootstrap-theme/assets/css/custom.css" />
     <link
       href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
       rel="stylesheet"

docs/otis/reset-module-alt/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link rel="stylesheet" href="/bootstrap-theme/assets/css/talis.css" />
+    <link rel="stylesheet" href="/bootstrap-theme/assets/css/custom.css" />
     <link
       href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
       rel="stylesheet"

scss/_buttons.scss

@@ -1,3 +1,9 @@
+@import 'bootstrap/scss/mixins/_buttons';
+@import 'bootstrap/scss/mixins/_gradients';
+@import 'bootstrap/scss/mixins/_box-shadow';
+@import 'bootstrap/scss/vendor/_rfs';
+@import 'bootstrap/scss/mixins/_border-radius';
+
 .btn-default,
 .btn-success,
 .btn-warning,

scss/_dropdown.scss

@@ -1,3 +1,6 @@
+$enable-caret: true;
+@import 'bootstrap/scss/mixins/_caret';
+
 .show.dropdown-toggle {
   @include caret(up);
 }

scss/_navbar.scss

@@ -35,9 +35,11 @@
 }
 
 .navbar-brand {
-  margin-inline-start: -.75rem;
-  padding-inline-start: .9375rem;
-  padding-inline-end: .9375rem;
+  margin-left: -$spacer;
+  padding-block-start: .9375rem;
+  padding-block-end: .9375rem;
+  padding-inline-start: $spacer;
+  padding-inline-end: $spacer;
 }
 
 @media (max-width: 992px) {

scss/_skip-link.scss

@@ -1,5 +1,7 @@
+@use 'bootstrap/scss/mixins/_visually-hidden' as bootstrap;
+
 .o-skip-link {
-  @include visually-hidden-focusable ();
+  @include bootstrap.visually-hidden-focusable();
 }
 
 .c-skip-link:focus,

scss/_theme.scss

@@ -0,0 +1,23 @@
+@import 'variables';
+
+@import "alerts";
+@import "badges";
+@import "buttons";
+@import "dropdown";
+@import "error";
+@import "forms";
+@import "loader";
+@import "modal";
+@import "navbar";
+@import "navs";
+@import "pager";
+@import "pagination";
+@import "progress";
+@import "skip-link";
+@import "tables";
+@import "toasts";
+@import "typography";
+@import "utils";
+@import "well";
+
+@import "confirmation-modal";

scss/_toasts.scss

@@ -1,4 +1,8 @@
 @use "sass:math";
+$grid-gutter-width:           1.5rem;
+$container-padding-x: $grid-gutter-width * .5;
+$toast-spacing:                     $container-padding-x;
+
 
 .toast-container {
   z-index: $zindex-popover;