Bootstrap business theme

by Gisle Hannemyr

The Twitter Bootstrap framework is widely used for mobile-first responsive web applications. The Drupal Bootstrap Business theme is a ready to use theme that is based upon Twitter Bootstrap. This chapter describes how to subtheme this for the SNP.

Table of contents

Drupal projects discussed in this chapter: Bootstrap Business, jQuery Update.

Introduction

Bootstrap Business is a free theme from More than (just) themes. In addition to the Drupal 7 repo, there are:

Installation

Reproducing the demo site, apart from the theme files, requires some placeholder text, images and a prototype website set up on Drupal. This is available from GitHub. To clone:

$ git clone https://github.com/morethanthemes/bootstrap-business.git
  1. Clone this repository to the direcory above your webroot and move the “business-bootstrap/d7/site” folder into it.
  2. Rename “site” to the directory name set up as DocumentRoot in Apache (e.g. “html” or “web”).
  3. Create an empty MySQL database and import the SQL-dump “business-bootstrap/d7/db_instances/db_instance.sql” into it.
  4. Copy “default.settings.php” to “settings.php”.
  5. Make “sites/default/” and subsirectories writable by the web server.
  6. Start the Drupal installation wizard by pointing your browser to the recently created folder.
    • Continue the installation by selection "Standard" installation profile.
    • In the 4th step enter your recently created database information.
    • In the next step, the installation wizard will recognize that you are using an already populated database and will inform you accordingly. At the same time the wizard should create all the necessary files you Drupal site needs in order to work properly on your server.
  7. You are done. Click on “existing site” link and visit your site.
  8. Log in with credentials “admin” and “password”. Change those.
  9. Update core and extensions
  10. Comvert database to utf8mb4 if required.
  11. Configure private file system path.

The demo site comes with a minimum of extensions:

Observations:

Tweaks after installing:

  1. Enable Backup & Migrate and make backup.
  2. Set the "Default jQuery Version" to the latest (e.g. 1.10).
  3. Enable clean URLs.

The screenshot below shows the settings I use:

jq_update01.png
Settings for jQuery update.

After you enable this theme, you will find that it has a few settings that can be adjusted in the Bootstrap Business GUI. The Bootstrap Business theme works reasonable well on its own for projects where you just want a basic responsive website.

However, if you want to customize the look and feel of the site, you need to create a sub-theme.

Creating a sub-theme

To make a sub-theme, the steps are a as follows:

First, create the new theme directory.

Bootstrap Business make use of the core Color module. If you want the sub-theme to support it, you also must copy the color folder, the the logo.png from the base theme to the sub-theme. Also create a css-folder with an empty local.css in it.

$ cd subtheme
$ cp -R ../bootstrap_business/color .
$ cp ../bootstrap_business/logo.png .
$ mkdir css
$ touch css/local.css

Copy the boostrap_business.info file from the base theme into this directory and modify it:

  1. Add “base theme = bootstrap_business” at the top.
  2. Change name and description
  3. Add version if this is a custom sub-theme.
  4. Fix “stylesheets”-array to only list colors.css and local.css.
  5. Retain the region and settings keys from the base theme.
  6. Delete keys added by the packaging script.

Enable the new sub-theme and set it as the default.

After having installed Bootstrap Business theme and created a sub-theme, you may want to alter the latter to make its visual appearance more appealing.

Generally, there are four things you can tweak to alter how your sub-theme looks:

  1. Adding CSS to local.css override defaults and add custom classes.
  2. template.php – this is a file where you may place pre-process functions and theme function overrides
  3. *.tpl.php – template files consists mainly of semantic HTML5 (referencing CSS-classes for layout) and PHP print-statements to print variables passed to the template by pre-process functions. Avoid putting PHP logic in the template. Instead perform logic operations in a pre-process function.
  4. *.info – specifies regions, and need to be coordinated with the regions actually used in template files.

If you need to override the template files, you need to copy those you alter from the base theme into your sub-theme.

Bootstrap Business GUI

Navigate to Appearance » Settings » Bootstrap Business to adjust the setting exposed in the GUI.

Bootstrap Business uses BootstrapCDN to deliver Bootstrap CSS and Javascript. The only version selectable is 3.2.0, as shown under the setting for “BootstrapCDN” at the bottom of the page.

The main setting that can be changed in the GUI, is the colour scheme. There are four colour sets:

  1. Default (Gray/Red)
  2. Dark Gray/Blue
  3. Gray/Green
  4. Custom

There is a preview that shows how it will look.

The other settings can be set in the GUI are:

Importing legacy content

  1. Make a backup
  2. Clone all modules of legacy site in modules/legacy. Remove dupes.
  3. Revert legacy site to Bartik.
  4. Import.

Content types

Blocks

Layout

Please see original documentation.

The following diagram shows the structure of the default layout of the page.tpl.php that ships with Bootstrap.

<header id="navbar">
  <div class="container">
    <!-- logo, name and navbar -->
  </div>
</header>
<div class="main-container container">
  <header id="page-header">
    <!-- slogan -->
  </header>
  <div class="row">
    <aside class="col-sm-3">
      <div class="region region-sidebar-first">
      </div>
    </aside>
    <section class="col-sm-X">
      <div class="region region-content">
      </div>
    </section>
    <aside class="col-sm-3">
      <div class="region region-sidebar-second">
      </div>
    </aside>
  </div>
</div>
<footer>
</footer>

Below is what is measured by inspecting the layout with a fixed grid. For each element the following values are recorded for the horizontal dimension: margin+padding+content.

Tweaking the layout

Moving header#page-header inside the outmost container of header#navbar works as one would expect, and puts the site slogan in the position most people would expect to find it.

<header id="navbar">
  <div class="container">
    <!-- logo, name and navbar -->
    <header id="page-header">
      <!-- slogan -->
    </header>
  </div>
</header>
…

To change the header to span the full width of the screen, you may either, set the “Fluid container” class in the GUI, or you may wrap it in a <div> of the class “container-fluid” as shown below.

<div class="container-fluid">
  <header id="navbar">
    <div class="container">
      <!-- logo, name and navbar -->
      <header id="page-header">
        <!-- slogan -->
      </header>
    </div>
  </header>
<div>
…

The same technque works for making the footer span full width.

If you change this in the GUI, the navbar and footer will be in a fluid container that spans the full screen. If you use a wrapper, they will be in fixed size containers and only the decoration (e.g the header and footer background colour will span the full screen width.

Grid

Bootstrap provides a responsive, mobile first fluid grid system built around 12 columns. Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices before becoming horizontal spanning all 12 columns on desktop screens. It includes predefined classes for layout, as well as less mixins for generating semantic layouts.

The fixed grid layout by default assumes a total width of 1200px (i.e. 100px/column). You may override this by navigating to Appearance » Settings » General » Container and checking the box for “Fluid container”, which provides a full width fluid layout.

The page.tpl.php template that comes with Drupal Bootstrap set up 3 regions side-by-side in the main page area.

To enable or disable sidebars, navigate to Structure » Blocks. The width of both sidebars are fixed for screens larger than the small size (768px). It is set to is set to 3 columns (col-sm-3) in page.tpl.php. The class to use for “Content” column (content_column_class) is computed in the page pre-process function bootstrap_preprocess_page() (located in page.vars.php). The default computation assumes that each of the sidebars are 3 columns wide. If you use sidebars and override the width of either sidebar in the page template for your subtheme, you need provide your own page pre-process function in template.php.

The example is below is just a copy of the original function, with comments added. It assume both sidebars are set up with the class col-sm-3 in page.tpl.php and compute the class to use for the content_col­umn_class for three cases: Both, one or none of the sidebars populated.. If you instead use col-sm-2 for the sidebars, the content_column_class should be col-sm-8, col-sm-10 or col-sm-12 respectively.

// Assuming both sidebars are col-sm-3
function mybootrap_preprocess_page(&$variables) {
  // Add information about the number of sidebars.
  if (!empty($variables['page']['sidebar_first']) &&
    !empty($variables['page']['sidebar_second'])) {
    // Both: 12 - 3 - 3 = 6
    $variables['content_column_class'] = ' class="col-sm-6"';
  }
  elseif (!empty($variables['page']['sidebar_first']) ||
    !empty($variables['page']['sidebar_second'])) {
    // One: 12 - 3 = 9
    $variables['content_column_class'] = ' class="col-sm-9"';
  }
  else {
    // None: 12 = 12
    $variables['content_column_class'] = ' class="col-sm-12"';
  }
}

If any of these assuptions change, you need to override this function in your subtheme's template.php. For instance: If the number of columns preset for the sidebars change, this must be taken into account when computing the content_column_class, If the page template breaks on col-md instead col-sm, the content_column_class must be of the same type.

Regions

The position of the default 8 block regions defined by Drupal Bootstrap is shown below:

Regions.

The default logo is 32 x 32 px.

Responsive layout

A responsive grid system, where the display respons to the screen size, is in the DNA of Twitter Bootstrap.

See alsoSee also the original Bootstrap documentation: Media queries.

The breakpoints for media queries are defined in variables.less, astarting round line 283. For Bootstrap 3, they are:

@screen-xs-min:  480px; // Extra small (deprecated)
@screen-sm-min:  768px; // Small
@screen-md-min:  992px; // Medium
@screen-lg-min: 1200px; // Large

When creating responsive pages, the default should be for mobile devices (i.e. devices with screen width < 768px), then create overrides for larger devices.

For example, the CSS below will by create a rule where the logo class by default don't display (we usually want this for mobile devices), but if the screen width ≥ 768px, it will display as a block.

.logo {
  display: none;
  @media (min-width: @screen-sm-min) {
    display: block;
  }
}

Bootstrap comes with four types of class prefixes for creating columns for different size displays:

noteThe class prefix col-xs is not deprecated, even if the variable @screen-xs-min is.

The proper use of the grid is to use it to create responsive blocks in a sub-theme. However, the grid can be used everywhere, including inside Drupal components such as an Article node. Below is an example that demonstrates the use of the grid in this context.

Following the prefix is the number of columns (from 1 to 12) to use for the div-container. I.e. col-xs-12 request that all 12 colums are used for the container on extra small displays.

To see it in action, create an article node with the following markup in the body:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col1">
      <h4>Column 1</h4>
    </div>
    <div class="col-xs-12 col-sm-6 col2">
      <h4>Column 2</h4>
    </div>
  </div>
</div>

Make sure you set the text format to "Full HTML", otherwise the markup will be stripped and the CSS classes will have no effect.

When we specify the class col-xs-12 col-sm-6, it means the element should span all 12 of the available Bootstrap columns on extra small screens, but only 6 columns on small displays and larger. You may want to see how this works by viewing this node on displays of different width.

Please note that this is just a demonstration. The CSS classes that create columns is not supposed to be used inside Drupal nodes. The proper use of such CSS is inside a page template (e.g. page.tpl.php) to create responsive page layouts.

A CSS media query is an expression of some media feature that resolves in either true or false. When a media query is true, the corresponding style sheet or style rules are applied.

Class names for hiding stuff, or making it visible as a block:

hidden-xs visible-xs-block
hidden-sm visible-sm-block
hidden-md visible-md-block
hidden-lg visible-lg-block

Se also: StackOverflow: Hiding elements in responsive layout.

Colours

Bootstrap defines five shades of grey (using the US-spelling “gray”) and five “brand” colours in variables.less:

//== Colors
//
//## Gray and brand colors for use across Bootstrap.

@gray-base:              #000;
@gray-darker:            lighten(@gray-base, 13.5%); // #222
@gray-dark:              lighten(@gray-base, 20%);   // #333
@gray:                   lighten(@gray-base, 33.5%); // #555
@gray-light:             lighten(@gray-base, 46.7%); // #777
@gray-lighter:           lighten(@gray-base, 93.5%); // #eee

@brand-primary:         darken(#428bca, 6.5%); // #337ab7 curious blue
@brand-success:         #5cb85c; // fern green
@brand-info:            #5bc0de; // viking blue
@brand-warning:         #f0ad4e; // faded orange
@brand-danger:          #d9534f; // roman red

The descriptive colour names above are derived from Name that colour. I believe this provides the most descriptive names. Alternative sites that uses different names for colours are colorpedia and HTML CSS color picker. Additional descriptive colour names that are understood by most modern browsers can be found here: HTML Color Names.

The default main text colour in Bootstrap is @gray-dark.

The diagram below shows the five “brand” colours defined in Bootstrap, as well as regular web orange (#ffa500).

bootstrap_cols01.png

@brand-primary is used as background for the search icon, etc.

Bootstrap components and helper classes

Please see section in Bootstrap theme.

Inline form elements

By default, Boostrap increases an input field to the full width of the container. (see this section to learn how to override this).

As noted in this issue, fields 'color', 'date', 'number', 'range', 'tel', 'weight' are exempted.

To make other fields inline, create a wrapper-div and set the class of this wrapper to form-inline. Example:

function example_form($form, &$form_state) {
  $form['example_info'] = array(
    '#markup' => t('Arrival and departure'),
  );
  $form['container'] = array(
    '#prefix' => '<div class="form-inline">',
    '#suffix' => '</div>',
    'arr' => array(
      '#title' => t('Arrival:'),
      '#type' => 'textfield',
      '#size' => 14,
    ),
    'dep' => array(
      '#title' => t('Departure:'),
      '#type' => 'textfield',
      '#size' => 14,
    ),
  );
  return $form;
}

Updating Bootstrap

On a Drupal site, Bootstrap are made up of two or three components:

All of these may need updating.

Updating the Bootstrap base theme

If you've followed the instructions above and made all your changes to Bootstrap in a sub-theme, you should be able to update without overwriting your changes with the following drush command:

# drush dl bootstrap

Bootstrap is a theme and does not use the database, so there is no need to worry about schema-updates.

After installing the new version, compare the regions set up in THEMENAME.starterkit with those defined in mybootstrap.info

Updating the Twitter Bootstrap less source files

The file named bootstrap/_config.yml (located in your sub-theme) will tell you the version of Twitter Bootstrap currently installed). If this is not the latest version of the Bootstrap 3 branch, you should update.

  1. Download and unpack the latest version of the Bootstrap source code in the top directory of your sub-theme. It will unpack to a directory where the version number is part of its name.
  2. Rename the existing bootstrap sub-directory in your sub-theme to bootstrap_old.
  3. Rename the unpacked sub-directory (having its version number as part of its name) to bootstrap.
  4. Compare the versions in your sub-theme of less/bootstrap.less in bootstrap to bootstrap_old. If it has changed (except for comments), you may need to edit less/bootstrap.less used by your subtheme to reflect the changes.
  5. After making these edits (if required), you should delete the bootstrap_old diretory and its contents.

Updating Drupal Bootstrap Styles

The styles that live in the less subdirectory of your subtheme are maintained as a separate Drupal Bootstrap Styles project on GitHub.

This may be updated, in particular if the Drupal Bootstrap is updated. Provided you've kept your own styles in separate files, just stash your own styles and variable-overrides.less install the new version and restore your changes.

Quirks

This sections describes quirks you may experience when Bootstrap is used as the theme on a Drupal 7 website.

Size of textfield

When adding a field to a content type, one of the settings is “Size of textfield”. Setting this has no effect when Bootstrap is used as the theme because Bootstrap, by default, increases the size of an input to the full width of the container. (The “Size of textfield” seeting works as one would expect in Bartik and most other themes.)

When Bootstrap is used as the theme, you must use css to control the size of a textfield. Example:

#edit-arrival,
#edit-departure {
  width: 10em;
}

Book

By default, Bootstrap replaces the core book nevigation menu with a pull-down menu with the heading “Outline” at bottom right. Placing the following hook in the sub-theme's template.php resets book navigation back to what core provides.

/**
 * Implements hook_process_HOOK().
 */
function MYSUBTHEME_process_book_navigation(&$variables) {
  // Reset book navigation back to what core provides.
  template_preprocess_book_navigation($variables);
}

Source: Drupal.org: Book Navigation Support.

Final word

[TBA]

Last update: 2019-05-11 [gh].