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