Bootstrap v5 Theme

Versions

There are currently two versions of this theme:

1. The v3 version, this is on the main branch and has the old Talis branding, this is the version used by the apps.
2. The v4 version, this is on the v4 branch and has the new Talis branding, it is not currently in use anywhere.

Usage

1. Install from npm:

   npm install --save @technologyfromsage/bootstrap-theme

2. Pull in the theme. Either:

• Specify the variable overrides, import the rest of Bootstrap, and then include the theme partial

@import "variables"; // Talis customisations are here
@import "bootstrap/scss/bootstrap";
@import "theme";

Or

• Place variable overrides first, then import the styles you need.

// Toggle global options – these need to be set ahead of the functions
$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

// Map overrides go here
@import "bootstrap/scss/maps"; // 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";

Alternatively, you can temporarily use the following file which is hosted on GitHub pages:

https://techfromsage.github.io/bootstrap-theme/assets/css/talis.css

Contributing

1. Ensure you have installed https://github.com/nvm-sh/nvm

2. Clone this repository:

   git clone [email protected]:techfromsage/bootstrap-theme.git

3. Change into the repository directory:

   cd bootstrap-theme

4. Install the correct Node version:

   nvm install && nvm use

5. Install dependencies:

   npm ci

6. Run the application locally:

   npm run start

7. Open http://localhost:8080 to see the page in action.

Building

We have an automated build that runs quality checks. However, the GitHub Pages site relies on having all generated files checked in to source control. Therefore, if you're making changes on a branch, the final step will always be to run the following in a final commit to ensure the generated files are all checked in:

npm run build

Scripts

The following npm scripts are available.

Script	Description
docs	Builds the Eleventy-powered documentation site
server	Starts a local server (http://localhost:3000) for development
watch	Automatically recompiles CSS as it watches the scss directory for changes
css	Runs css-compile and css-prefix
css-compile	Compiles source Sass into CSS
lint	Runs [Prettier] over sources, and Stylelint against source Sass for code quality
css-prefix	Runs Autoprefixer on the compiled CSS
test	Runs css-lint and css, in sequential order

Stylelint

Stylelint is included, as is Bootstrap's default Stylelint config, stylelint-config-twbs-bootstrap.