Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bootstrap Framework and Drupal

1,119 views

Published on

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.

Published in: Internet
  • Be the first to comment

Bootstrap Framework and Drupal

  1. 1. BOOTSTRAP FRAMEWORK AND DRUPAL Created by Jim Birch jimbir.ch/presentations/bootstrap @thejimbirch Xeno Media, Inc.
  2. 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. 3. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
  4. 4. SIMILAR PROJECTS Foundation Pure CSS PREDECESSORS 960 Grids YUI Grids
  5. 5. Originally developed at Twitter by and to document and share common design patterns and assets within the company. @mdo @fat
  6. 6. WHO USES BOOTSTRAP?
  7. 7. Apple FIFA HBO Ing Instacart Ly Microso NASA New Relic Newsweek Spotify Vogue
  8. 8. And about 10 million more! BuiltWith.com
  9. 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. 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. 11. WHAT MAKES UP THE BOOTSTRAP FRAMEWORK?
  12. 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. 13. RESPONSIVE GRID SYSTEM Container Fluid (full width), or Container (fixed width) Row Columns (12)
  14. 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. 15. RESPONSIVE GRID SYSTEM
  16. 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. 17. CONTENT ELEMENTS Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.
  18. 18. Dropdowns Buttons Inputs Navs Navbars Breadcrumbs Pagination Jumbotron Thumbnails Alerts Progress Bars List Groups Panels Wells
  19. 19. CARDS, COMING IN BOOTSTRAP 4 Replaces wells, thumbnails, and panels
  20. 20. TYPOGRAPHY BASE HEADERS
  21. 21. TYPOGRAPHY BASE BLOCKQUOTES TABLES
  22. 22. TYPOGRAPHY BASE FORMS
  23. 23. JAVASCRIPTS Bring Bootstrap's components to life with jQuery plugins. Easily include them all, or one by one.
  24. 24. Modal Dropdown Scrollspy Tabs Tooltip Popover Collapsible Alerts Button states Collapsible/Accordions Carousel Affix
  25. 25. 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.
  26. 26. PROS & CONS OF USING THE BOOTSTRAP FRAMEWORK
  27. 27. 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
  28. 28. 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
  29. 29. USING THE BOOTSTRAP DRUPAL THEME
  30. 30. 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
  31. 31. TWO OPTIONS TO CREATING A SUBTHEME Loading Bootstrap Framework from a Content Delivery Network (CDN) Compiling your own using a local LESS preprocessor
  32. 32. 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!
  33. 33. CREATING A SUBTHEME - CDN (D7)
  34. 34. 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 >>>
  35. 35. 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
  36. 36. CREATING A SUBTHEME - CDN (D8)
  37. 37. 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!
  38. 38. 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
  39. 39. 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
  40. 40. 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.
  41. 41. 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
  42. 42. 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
  43. 43. COMPILING YOUR OWN THEME USING BOOTSTRAP
  44. 44. 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
  45. 45. THEMEABLE DRUPAL ELEMENTS Fields Entities/Blocks/Panes Regions Layouts Pages
  46. 46. 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
  47. 47. 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
  48. 48. 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
  49. 49. 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
  50. 50. GRUNTFILE.JS
  51. 51. BOOTSTRAP.LESS
  52. 52. 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.
  53. 53. THE WONDERFUL WORLD OF MIXINS
  54. 54. 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);
  55. 55. 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%); } }
  56. 56. BOOTSTRAP NAVBAR IN DRUPAL 8
  57. 57. 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
  58. 58. 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
  59. 59. 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
  60. 60. 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
  61. 61. BOOTSTRAP DRUPAL MODULES
  62. 62. JQUERY UPDATE Required for Drupal 7 to bring jQuery up to modern times. Not needed for Drupal 8
  63. 63. DRUPAL MODULES As of the writing of this presentation, there were 332 modules that contain "Bootstrap" in their name. Drupal.org Bootstrap Modules
  64. 64. DRUPAL MODULES VIEWS BOOTSTRAP No release yet for D8
  65. 65. DRUPAL MODULES BOOTSTRAP LAYOUTS This project is a combination of and for Drupal 8. Display Suite Bootstrap Layouts Panels Bootstrap Layouts
  66. 66. THE END CONTINUING THE CONVERSATION: Created by Jim Birch jimbir.ch/presentations/bootstrap @thejimbirch Xeno Media, Inc.

×