@ietf-tools/common-bootstrap-theme

IETF Common Bootstrap theme

A common Bootstrap theme for *.ietf.org websites (fonts, colors, etc.), as well as a testing harness.

Install

NPM

npm i @ietf-tools/common-bootstrap-theme bootstrap@5.1

Yarn

yarn add @ietf-tools/common-bootstrap-theme bootstrap@5.1

How to use

In your Webpack (or equivalent) project's Sass file add these two lines of code:

@import "@ietf-tools/common-bootstrap-theme/scss/ietf-theme.scss";
@import "bootstrap/scss/bootstrap";

That's it.

Requirements

• Webpack: (or equivalent) This theme requires a Webpack CSS Loader to resolve Sass from NPM packages in node_modules. It won't work with Sass command line tools.
• Bootstrap 5.1.x: The theme variables are compatible with Bootstrap 5.1.x. Usage with other versions of Bootstrap may not work.

Bootstrap docs

• Bootstrap 5.1: Introduction

@import Explanation

Line 1 imports @ietf-tools/common-bootstrap-theme package's scss/ietf-theme.scss file which sets some global Sass variables and other CSS.

Line 2 imports Bootstrap from the which uses those global Sass variables.

Because both of these lines of code import Sass from NPM packages the Sass must be processed with Webpack (or equivalent). See Sass Loader: resolving @import rules.

Contributing

See contributing.md.