Bootstrap Framework and Drupal

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 and to
document and share common design patterns and assets
within the company.
@mdo @fat

Apple FIFA HBO Ing
Instacart Ly Microso NASA
New Relic Newsweek Spotify Vogue

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)

<div class="container-fluid">
<div class="row">
<div class="col-md-8">Lorem ipsum...</div>
<div class="col-md-4">Sed ut perspiciatis...</div>
</div>
</div>

Columns will wrap if more that 12
Columns can be set per responsive screen size
Columns can be oﬀset
Columns can be ordered

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

Dropdowns Buttons
Inputs
Navs
Navbars
Breadcrumbs
Pagination
Jumbotron
Thumbnails
Alerts
Progress Bars
List Groups
Panels
Wells

CARDS, COMING IN BOOTSTRAP 4
Replaces wells, thumbnails, and panels

Bootstrap Framework and Drupal

TYPOGRAPHY BASE
BLOCKQUOTES
TABLES

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

Modal
Dropdown
Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts
Button states
Collapsible/Accordions
Carousel
Aﬀix

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 diﬀicult
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.cdnto
YOURNEWTHEMENAME.info
Edit the .info file.
Activate and Set Default your new theme!

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 >>>

Rename THEMENAME.themeto
YOURNEWTHEMENAME.theme
Rename THEMENAME.starterkit.ymlto
YOURNEWTHEMENAME.info.yml
Rename THEMENAME.libraries.ymlto
YOURNEWTHEMENAME.libraries.yml
Rename config/install/THEMENAME.settings.yml
to
config/install/YOURNEWTHEMENAME.settings.ym
Rename config/schema/THEMENAME.schema.ymlto
config/schema/YOURNEWTHEMENAME.schema.yml

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.cssto add your custom style overrides
Grab what you need to override from the parent
theme/modules/coreand 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 into the
root of your new theme. /THEMENAME/bootstrap/
You will need a - Grunt/Gulp
A er you make changes to the less files, you have to
compile them into the
/THEMENAME/css/styles.css
Bootstrap Framework Source Files
LESS compiler

/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.

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 with the word Bootstrap
in them on Drupal.org
171 themes

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 which
exports html/css
If you are making your own html/css prototypes before
moving to Drupal.
Sketch

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

CREATING YOUR OWN THEME
Create an empty theme
Download the Bootstrap Framework source files
Update Gruntfile.jsto output your css file to
css/THEMENAME.cssand your js file to
js/THEMENAME.css
Add your own less files
Include them in your 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 a er file changes.

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%);
}
}

PAGE.HTML.TWIG
1
2
3
4
5
hosted with ❤ by
{% if page.header %}
<nav class="navbar">
<div class="container-fluid">{{ page.header }}</div>
</nav>
{% endif %}
view rawBootstrap Navbar in Drupal 8 - page.html.twig GitHub

BLOCK--SYSTEM-BRANDING-
BLOCK.HTML.TWIG
Upload your logo in the UI at
/admin/appearance/settings/theme_name
1
2
3
4
5
6
7
8
9
10
11
12
13
hosted with ❤ by
{% block content %}
{% if site_logo %}
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-cont
<span class="sr-only">Toggle navigation</span>
Menu
</button>
<a class="navbar-brand" href="{{ path('<front>') }}" title="{{ site_name }}" rel="home">
<img src="{{ site_logo }}" alt="{{ site_name }}" />
</a>
</div>
{% endif %}
{% endblock %}
view rawBootstrap Navbar in Drupal 8 - block--system-branding-block.html.twig GitHub

BLOCK--THEME_NAME-MAIN-
MENU.HTML.TWIG
1
2
3
hosted with ❤ by
<div id="navbar" class="collapse navbar-collapse">
{{ content }}
</div>
view rawBootstrap Navbar in Drupal 8 - block--THEME_NAME-main-menu.html.twig GitHub

MENU--MAIN.HTML.TWIG
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
hosted with ❤ by
{{ menus.menu_links(items, attributes, 0) }}
{% macro menu_links(items, attributes, menu_level) %}
{% import _self as menus %}
{% if items %}
{% if menu_level == 0 %}
<ul class="nav navbar-nav">
{% else %}
<ul class="nav navbar-nav">
{% endif %}
{% for item in items %}
<li{{ item.attributes }}>
{{ link(item.title, item.url) }}
{% if item.below %}
{{ menus.menu_links(item.below, attributes, menu_level + 1) }}
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% endmacro %}
view rawBootstrap Navbar in Drupal 8 - menu--main.html.twig GitHub

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
and for Drupal 8.
Display Suite Bootstrap
Layouts Panels Bootstrap Layouts

THE END
CONTINUING THE CONVERSATION:
Created by Jim Birch
jimbir.ch/presentations/bootstrap
@thejimbirch
Xeno Media, Inc.

Bootstrap Framework and Drupal

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Bootstrap Framework and Drupal (20)

Recently uploaded (20)

Bootstrap Framework and Drupal