1 of 8

Bootstrap 5 + Backdrop CMS = Beautiful websites out of the box

Working session demo

2 of 8

Building webtools for research and academia

  • Research applications
  • Productivity applications
  • Informational Websites

​

  • Building with Drupal 7 since 2013
  • Need new supported framework moving forward
  • Backdrop CMS is best fit for our use case for new websites and for migrating existing web applications
  • Users want to keep feel and look of current D7 sites

3 of 8

Demo - From Basic to Bootstrap5+

  • Header - logo, menu, search
  • Title
  • Collapsible sidebars
  • Three column layout
  • Front page
  • Colors / sass

4 of 8

Bootstrap basics

5 of 8

Site setup

  • Install Backdrop CMS
  • Bootstrap 5 lite - bootstrap css, js and sass
  • Harris flexible - collapsible sidebars
  • Fibonacci B5 custom theme
    • Header
    • Sass

​

​

6 of 8

Header block

  • Set in block
    • Main menu under the title or to the right of the title
    • Logo
  • Extend with bootstrap5 lite
    • Sticky header
    • Colors
  • Custom theme
    • Extends header menu for better display on mobile
    • Search block

​

  • Challenges and issues
    • Header changes are applied to each layout separately, not entire website
    • How to make changes in all layouts simultaneously when needed?

7 of 8

Front page

  • Hero image
  • There blocks layout - new out of the box setup coming soon?
  • Use “display: grid;” for easy layout in any section
  • Challenges and issues
    • Blocks placement has different logic - need to figure out good strategy for content editors

8 of 8

Other notes from Backdrop Live

  • From playing in a band to playing in the symphony
  • Migration to D9 required insurmountable effort ($$)
  • Demo here with https://live-birthequity.pantheonsite.io/