Observorama

Bridgetown Site Setup with Bootstrap

Notes on setting up a new Bridgetown site with Sass and Bootstrap 5.

ERB and Sass

Create a new Bridgetown site with ERB and Sass configurations.

$ bridgetown new <site-name> -t erb --use-sass

Install Bootstrap

Go into the new site folder and install Bootstrap with yarn:

$ yarn add bootstrap@5.2.0

Import Bootstrap into index.scss

Steps to import custom Bootstrap into frontend/styles/index.scss:

  1. Create a SCSS partial which imports the Bootstrap parts and optional customized SASS variables.
  2. Import the Bootstrap partial at the top of index.scss.
  3. Optionally, create a SCSS partial such as bootstrap-custom-variables.scss with customized Bootstrap Sass variables and import the custom variables partial into the Bootstrap partial.

Create custom Bootstrap 5.2.0 partial

Create a SCSS partial such as _bootstrap-custom.scss in the frontend/styles folder and add the Bootstrap import lines.

// frontend/styles/_bootstrap-custom.scss

// *** BOOTSTRAP ***
// Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "~bootstrap/scss/functions";

// Include any default variable overrides here
// @import "bootstrap-custom-variables";

// Include remainder of required Bootstrap stylesheets
@import "~bootstrap/scss/variables";

// Include any default map overrides here
// @import "bootstrap-custom-maps";

// Include remainder of required parts
@import "~bootstrap/scss/maps";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/root";

// Optionally include any other parts as needed
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/containers";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/button-group";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/accordion";
@import "~bootstrap/scss/breadcrumb";
@import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/badge";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
@import "~bootstrap/scss/toasts";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/popover";
@import "~bootstrap/scss/carousel";
@import "~bootstrap/scss/spinners";
@import "~bootstrap/scss/offcanvas";
@import "~bootstrap/scss/placeholders";

// Helpers
@import "~bootstrap/scss/helpers";

// Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "~bootstrap/scss/utilities/api";

Import the Bootstrap partial at the top of index.scss

Then import the _bootstrap-custom.scss partial at the top of frontend/styles/index.scss:

// frontend/styles/index.scss

// IMPORT CUSTOM BOOTSTRAP
@import "bootstrap-custom";

Add Bootstrap Javascript to bottom of <body>

Some Bootstrap components require Javascript. Add the Bootstrap <script> at the bottom of <body> in src/_layouts/default.erb.

Create _body-js.erb partial

<!-- src/_partials/body-js.erb -->

<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
  crossorigin="anonymous">
</script>

Render body-js.erb partial in default.erb layout

The Bootstrap Javascript body-js partial goes right before the closing <body> tag .

<!-- src/_layouts/default.erb -->

<body>
  ...

  <%= render "body-js" %>
</body>

Configure bridgetown.config.yml

Configuration options are here.

This file is NOT reloaded automatically when you use bin/bridgetown start. If you change this file, please restart the server process.

Include

Force inclusion of directories and/or files in the conversion. .htaccess is a good example since dotfiles are excluded by default.

include: [DIR, FILE, ...]

Exclude

Exclude directories and/or files from the conversion. These exclusions are relative to the site’s source directory and cannot be outside the source directory.

exclude: [DIR, FILE, ...]

Configure site_metadata.yml

You can store site-wide metadata variables in _data/site_metadata.yml so they’ll be easy to access and will regenerate pages when changed. This is a good place to put <head> content like your website title, description, favicon, social media handles, etc. Then you can reference site.metadata.title, etc. in your ERB templates.

More on site_metadata.yml and additional custom data files here.