Skip to content

Latest commit

 

History

History
119 lines (88 loc) · 3.89 KB

README.md

File metadata and controls

119 lines (88 loc) · 3.89 KB
Raw

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. Create a Personal Access Token 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. 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";

Contributing

Be sure to have Node.js installed before proceeding.

# Clone the repo
git clone https://github.com/talis/bootstrap-theme
cd $DEVELOPMENT_WORK_DIR/bootstrap-theme

# Install dependencies
npm i

# Compiles Sass, builds the Eleventy-powered docs, watches both for changes
npm start

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

Scripts

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
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
css-lint Runs Stylelint against source Sass for code quality
css-prefix Runs Autoprefixer on the compiled CSS
css-purge Runs PurgeCSS to remove CSS that is unused by index.html
test Runs css-lint and css, in sequential order

Optimizing CSS

Before you start to use tools that remove Bootstrap styling like PurgeCSS, you can make some broad optimizations by only including the stylesheets you think you'll need.

Stylelint

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