Like Drupal, 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. This presentation reviews: What makes up the Bootstrap framework. The advantages and disadvantages of using the Bootstrap framework. Using the Bootstrap contributed theme as a base theme for your project. Compiling your own Bootstrap framework using Grunt. Creating your own theme with the Bootstrap framework.

1. BOOTSTRAP
FRAMEWORK
AND DRUPAL
Created by Jim Birch
jimbir.ch/presentations/bootstrap
@thejimbirch
Xeno Media, Inc.

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

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

4. SIMILAR PROJECTS
Foundation
Pure CSS
PREDECESSORS
960 Grids
YUI Grids

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

6. WHO USES
BOOTSTRAP?

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

8. And about 10 million more! BuiltWith.com

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

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

11. WHAT MAKES
UP THE
BOOTSTRAP
FRAMEWORK?

12. 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!

13. RESPONSIVE GRID SYSTEM
Container Fluid (full width), or Container (fixed width)
Row
Columns (12)

14. RESPONSIVE GRID SYSTEM
<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>

15. RESPONSIVE GRID SYSTEM

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

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

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

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

21. TYPOGRAPHY BASE
HEADERS

22. TYPOGRAPHY BASE
BLOCKQUOTES
TABLES

23. TYPOGRAPHY BASE
FORMS

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

25. Modal
Dropdown
Scrollspy
Tabs
Tooltip
Popover
Collapsible Alerts
Button states
Collapsible/Accordions
Carousel
Affix

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

27. PROS & CONS
OF USING THE
BOOTSTRAP
FRAMEWORK

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

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

30. USING THE
BOOTSTRAP
DRUPAL THEME

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

32. TWO OPTIONS TO CREATING A SUBTHEME
Loading Bootstrap Framework from a Content Delivery
Network (CDN)
Compiling your own using a local LESS preprocessor

33. 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!

34. CREATING A SUBTHEME - CDN (D7)

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

37. CREATING A SUBTHEME - CDN (D8)
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

38. CREATING A SUBTHEME - CDN (D8)

39. 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!

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

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

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

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

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

45. COMPILING
YOUR OWN
THEME USING
BOOTSTRAP

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

47. THEMEABLE DRUPAL ELEMENTS
Fields
Entities/Blocks/Panes
Regions
Layouts
Pages

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

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

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

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

52. GRUNTFILE.JS

53. BOOTSTRAP.LESS

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

55. THE WONDERFUL WORLD OF MIXINS

57. 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);

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

59. BOOTSTRAP
NAVBAR IN
DRUPAL 8

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

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

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

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

66. BOOTSTRAP
DRUPAL
MODULES

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

68. DRUPAL MODULES
As of the writing of this presentation, there were 332
modules that contain "Bootstrap" in their name.
Drupal.org Bootstrap Modules

69. DRUPAL MODULES
VIEWS BOOTSTRAP
No release yet for D8

70. DRUPAL MODULES
BOOTSTRAP LAYOUTS
This project is a combination of
and for Drupal 8.
Display Suite Bootstrap
Layouts Panels Bootstrap Layouts

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