Sub-theming Diw from Bootstrap

This case study takes you through the steps of creating a sub-theme, using Bootstrap as the base theme.

Table of contents

• Introduction
• Final word

Introduction

This case study assumes that you've already created a Bootstrap sub-theme, as described here.

foo

Here are a list of basic changes that I often apply to Bootstrap:

• Refactor regions. Note that the regions outlined in page.html.twig must reflect those in my_bootstrap.info.
  • Rename the machine name of the Top Bar region from header to top_bar.
  • Optionally add a Header region header to the top of the stack.
• Place the search block in the Highlighted region or the new Header region.
• Add the overrides described below to the CSS (at the end of overrides.less).

I also prefer to customize the fonts, using a font stack drawing on Google webfonts.

• Change html.html.twig to link to the Google webfonts I want to use.
• Change font stacks at the beginning of variables.less to include the Google webfonts.
• To have a different font-familiy and weight for the headings, change the headings-variables (@headings-font-family and @headings-font-weight in variables.less).

I prefer captions to be centered, and to have some distance between the border and the text for left or right aligned images:

.caption {
  margin: 0;
  text-align: center;
  font-size: 0.9em;
}
.pull-left {
  margin-right: 0.7em;
}
.pull-right {
  margin-left: 0.7em;
}

Using the classes pull-left and pull-right makes images non-resposive. I add the following pull-right-lg class. It will only right-align the image on the large screen. On smaller screens, the image will be centered.

.pull-right-lg {
  @media (min-width: @screen-lg-min) {
    margin-left: 0.7em;
    float: right !important;
  }
}

Final word

[mumble]

---

Last update: 2015-03-15 [gh].