Bootstrap Framework and Drupal

Created by Jim Birch
jimbir.ch/presentations/bootstrap
@thejimbirch
Xeno Media, Inc.

What is Bootstrap?

Bootstrap is an open source project that can be used by front end developers and site builders in a wide variety of ways, from beginner to advanced.

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Similar Projects

• Foundation
• Pure CSS

Predecessors

• 960 Grids
• YUI Grids

Originally developed at Twitter by @mdo and @fat to document and share common design patterns and assets within the company.

Who uses Bootstrap?

And about 10 million more! BuiltWith.com

The Bootstrap contributed Drupal theme is the second most popular theme on Drupal.org with over 110,000 installs almost 700,000 downloads!

• Joomla uses Bootstrap in core.
• WordPress has 221 Bootstrap-based themes, 11% of all their themes.
• Themeforest lists 19,645 designs and an incredible 34% of those refer to using Bootstrap

Love it or Hate it, Bootstrap is Winning the Web - August 12, 2015

What makes up the Bootstrap framework?

The Bootstrap framework includes:

• a responsive grid system
• a large amount of theme-able HTML and CSS content elements
• a very readable Typography base
• a number of Javascript components that add additional functionality
• and documentation about all of it!

Responsive Grid System

• Container Fluid (full width), or Container (fixed width)
• Row
• Columns (12)

Responsive Grid System

	

	

		
Lorem ipsum...
		
Sed ut perspiciatis...
	

	

Responsive Grid System

Responsive Grid System

• Columns will wrap if more that 12
• Columns can be set per responsive screen size
• Columns can be offset
• Columns can be ordered

Content Elements

Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.

Cards, coming in Bootstrap 4

Replaces wells, thumbnails, and panels

Typography base

Headers

Typography base

Blockquotes

Tables

Typography base

Forms

Javascripts

Bring Bootstrap's components to life with jQuery plugins. Easily include them all, or one by one.

Documentation

Every feature of Bootstrap is documented. This documentation is always available online, and can be easily set up in local, development, and staging environments.

Pros & Cons of using the Bootstrap framework

Advantages:

• Documentation
  • Standardization helps teams become more productive
  • Onboarding new developers is quicker
• Customizable
  • Completely customizable for large projects
  • Mixins for adding existing styles to semantic html
• Best practices for small/low budget projects
• Open Source - MIT License

Disadvantages:

• Bootstrap is large/bloated/heavy
• Bootstrap sites all look the same
• Decisions are made for you
• Javascript not robust enough
• Upgrading is very difficult
• Can lead to non-semantic HTML

Using the Bootstrap Drupal theme

Bootstrap Drupal theme

• Very mature for Drupal 7
• Release candidate for Drupal 8
• Comes with Subtheme right out of the box.
• Great documentation at drupal-bootstrap.org

Two Options to creating a subtheme

• Loading Bootstrap Framework from a Content Delivery Network (CDN)
• Compiling your own using a local LESS preprocessor

Creating a subtheme - CDN (D7)

• Download the Bootstrap theme as you normally would.
• In the theme, copy the /starterkits/cdn/ folder to /sites/all/themes/
• Rename the folder to your new theme name
• Rename starterkit.cdn to YOURNEWTHEMENAME.info
• Edit the .info file.
• Activate and Set Default your new theme!

Creating a subtheme - CDN (D7)

Creating a subtheme - CDN (D8)

• Download the Bootstrap theme as you normally would.
• In the theme, copy the starterkits/cdn/ folder to /themes/custom/
• Rename the folder to your new theme name
• Rename 5 files >>>

Creating a subtheme - CDN (D8)

• Rename THEMENAME.theme to YOURNEWTHEMENAME.theme
• Rename THEMENAME.starterkit.yml to YOURNEWTHEMENAME.info.yml
• Rename THEMENAME.libraries.yml to YOURNEWTHEMENAME.libraries.yml
• Rename config/install/THEMENAME.settings.yml to config/install/YOURNEWTHEMENAME.settings.yml
• Rename config/schema/THEMENAME.schema.yml to config/schema/YOURNEWTHEMENAME.schema.yml

Creating a subtheme - CDN (D8)

Creating a subtheme - CDN (D8)

• Edit YOURNEWTHEMENAME.info.yml
• Edit config/schema/YOURNEWTHEMENAME.schema.yml and rename - THEMENAME.settings: and "THEMETITLE settings"
• Activate and Set Default your new theme!

Creating a subtheme - CDN versions

• /css/style.css to add your custom style overrides
• Grab what you need to override from the parent theme/modules/core and add to your new theme.
• Don't forget to add your own logo.png, screenshot.png, and favicon.ico

Creating a subtheme - LESS versions

• Set up is the same, but with these additional steps:
• Download the Bootstrap Framework Source Files into the root of your new theme. /THEMENAME/bootstrap/
• You will need a LESS compiler - Grunt/Gulp
• After you make changes to the less files, you have to compile them into the /THEMENAME/css/styles.css

Creating a subtheme - LESS versions

• /THEMENAME/less/variable-overrides.less - Allows you to override the variables provided by the Bootstrap Framework
• /THEMENAME/less/bootstrap.less - A copy of the Bootstrap Framework's file, with the addition of including variable-overrides.less
• /THEMENAME/less/overrides.less - Contains overrides to properly integrate Drupal with the Bootstrap Framework
• /THEMENAME/less/style.less - The glue that combines the bootstrap.less and overrides.less files together. Generally, you will not need to modify this file.

Creating a subtheme - LESS versions

Once you have compiled, all of the mixing will be run, and the less files will be concatenated into one css file.

/THEMENAME/css/styles.css

See Also:

Radix Theme

Radix is another base theme for Drupal. It has Bootstrap, Sass, Gulp, BrowserSync and Font Awesome built-in.

• Used in a lot of distributions
• Has various Panels/Views/etc contrib modules
• Alpha release for Drupal 8

There are also currently 171 themes with the word Bootstrap in them on Drupal.org

Compiling your own Theme using Bootstrap

Why build your own theme?

• For complete control of markup
• If your designer is "designing in the browser" and providing html/css
• If you are using a prototyping tool like Sketch which exports html/css
• If you are making your own html/css prototypes before moving to Drupal.

Themeable Drupal Elements

• Fields
• Entities/Blocks/Panes
• Regions
• Layouts
• Pages

Drupal 7

BADcamp 2015 session Optimizing Drupal 7 HTML Markup

The origin blog post: Using Fences and Page Manager to optimize HTML markup in Drupal 7

Drupal 7

• Fences module to reset field markup
• Node/Page/Region/Block/etc templates to reset that markup
• Panels layouts to add semantic HTML
• Page Manager (ctools) to place content

Drupal 8

• Fences has an Alpha release
• Twig templates give us ultra specificity
• Layout plugin module works and will eventually be moved to core.
• Page Manager is a stand alone module now, or
• Panelizer allows you to set defaults, and override on individual nodes.

Creating your own theme

• Create an empty theme
• Download the Bootstrap Framework source files
• Update Gruntfile.js to output your css file to css/THEMENAME.css and your js file to js/THEMENAME.css
• Add your own less files
• Include them in your bootstrap.less

Gruntfile.js

bootstrap.less

Compiling Bootstrap

Grunt or Gulp

• cd sites/all/themes/THEMENAME/bootstrap/
• grunt dist - Compiles all the files
• grunt watch - Watches the folder, and automatically updates after file changes.

The wonderful world of mixins

Use mixins on your own semantic html

	
#main-content {
	.container();
}

#main-content > section {
	.make-row();
}

#main-content > section > article {
	.make-md-column(9);
	.make-sm-column(8);
}

#main-content > section > aside {
	.make-md-column(3);
	.make-sm-column(4);
}
	

Use mixins on your own semantic html

	
.live-chat-button {
  .btn-primary();
  padding: 10px 30px;
  border-radius: 4px;
  background: @live-chat-button-background;

  &:hover {
    text-decoration: none;
    color: @btn-primary-color;
    background: darken(@live-chat-button-background, 5%);
  }
}
	

Bootstrap Navbar in Drupal 8

page.html.twig

block--system-branding-block.html.twig

Upload your logo in the UI at
/admin/appearance/settings/theme_name

block--THEME_NAME-main-menu.html.twig

menu--main.html.twig

Bootstrap Drupal Modules

jQuery Update

Required for Drupal 7 to bring jQuery up to modern times. Not needed for Drupal 8

Drupal Modules

As of the writing of this presentation, there were 332 modules that contain "Bootstrap" in their name.

Drupal.org Bootstrap Modules

Drupal Modules

Views Bootstrap

No release yet for D8

Drupal Modules

Bootstrap Layouts

This project is a combination of Display Suite Bootstrap Layouts and Panels Bootstrap Layouts for Drupal 8.

THE END

Continuing the conversation:

Created by Jim Birch
jimbir.ch/presentations/bootstrap
@thejimbirch
Xeno Media, Inc.