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
:
- Create a SCSS partial which imports the Bootstrap parts and optional customized SASS variables.
- Import the Bootstrap partial at the top of
index.scss
. - 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.