ComboStrap Styling - How to create and add your own Bootstrap stylesheet

This article shows you how to create and install your own custom Bootstrap Stylesheet (theme) to fit your styling needs.

• Strap template
• Install Node
• Insatll Git

• Get Bootstrap

git clone https://github.com/twbs/bootstrap.git

• Get the last Combostrap Bootstrap version. Example for Bootstrap version 4.5.0

cd bootstrap
git checkout -b version4.5.0 v4.5.0

• Install the package dependencies

npm install

You modify a theme by giving your own sass variable in the file scss/_variables.scss

The naming convention is $name-state-property-modifier where:

• name is the component name corresponding to the given class name (e.g .alert)
• state is the pseudo-class used to define a special state of an element (e.g: hover, active, checked etc)
• property is the given CSS property in order to achieve the results you need (e.g: color, background, display)
• modifier is used to define additional information for the current property, like sizes, axis (e.g alert-sm, alert-padding-y)

Example with a grid of 16 columns with a max width of 1280px

$grid-columns:                16 !default;


$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1280px
) !default;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1280px
) !default;

Optionally for a better contrast, you can change the blue color.

$blue:    #075ebb !default;

npm run dist
# or just for css
npm run css

In the sub-directory dist\css, you can find the files:

• bootstrap.min.css
• bootstrap.min.css.map

Optional but recommended

The integrity field permits to control that the stylesheet file was not tempered during the network transit.

# go to the bootstrap source code directory
cd bootstrap/dist/css
# generate a sha384
openssl dgst -sha384 -binary bootstrap.min.css | openssl base64 -A

Output:

6YMUsimvBMWMU6VPmQwCKP28RrKPSaSaD48Hfabk1yxb5zQZ21XDRL/vljin9SZ3

Your integrity value is:

sha384-6YMUsimvBMWMU6VPmQwCKP28RrKPSaSaD48Hfabk1yxb5zQZ21XDRL/vljin9SZ3

To install your new stylesheet, you need to:

• copy the custom style sheet and its map file to the bootstrap folder of strap
• define it
• and change the bootstrapStylesheet configuration

The bootstrap folder of strap are organised by bootstrap versions

dokuwiki/lib/tpl/strap/bootstrap/${version}

Example:

• dokuwiki/lib/tpl/strap/bootstrap/4.5.0 for the version 4.5.0
• dokuwiki/lib/tpl/strap/bootstrap/4.4.1 for the version 4.4.1

Take the custom stylesheet bootstrap.min.cs created an copy it to the strap bootstrap folder. In this example in dokuwiki/lib/tpl/strap/bootstrap/4.5.0

strap uses a json file system to manage the stylesheet available.

• create the file bootstrapLocalCss.json in the bootstrap folder of Strap. You can also copy the bootstrapCustomCss.json

Example:

{
    "4.5.0": {
        "my-custom-bootstrap": {
            "file": "bootstrap.custom.min.css",
            "integrity": "sha384-6YMUsimvBMWMU6VPmQwCKP28RrKPSaSaD48Hfabk1yxb5zQZ21XDRL/vljin9SZ3"
        }
    }
}

The last step is to change the Strap Template - Bootstrap configuration.

• https://getbootstrap.com/docs/4.4/getting-started/theming/