How to use Bootstrap with SASS variables in your PWA or Website

Why you could/should use a frontend library

You are going to build a Website or Progressive Web App. You are not that keen about how it looks like but it should meet current state-of-the-art criteria like different states for buttons, good-looking forms, tooltips, popovers, modals etc. and of course a mobile responsive grid system. But you don't have the time or the pretension to set those all up by yourself.

The good thing is somebody already made a great bundle of all these design elements and you can use it right away.

Besides others the most popular frontend-component library is maybe Bootstrap (https://getbootstrap.com/). Originally Bootstrap was developed at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden.

Embedding Bootstrap in your project

If you are creating a basic HTML project you can just use a CDN to use a precompiled version of bootstrap styles and JavaScript. You will also need to add jquery and popper so everything works properly:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

But normally you would today use a package manager like npm and just add it to your project folder with

npm install bootstrap

and then require the parts you really need in your code. The real magic here is that you can make use of SASS variables to customize your whole look and feel. But we will come to this point later.

If you are using a JavaScript library like Angular or React, there are even more possibilities like for example the https://ng-bootstrap.github.io Project for Angular or https://reactstrap.github.io/ for React which we regularly use.

By installing those with for example npm, you will also add the regular bootstrap package to your dependencies.

In the following we will focus on the customization of Bootstrap in a React project created with https://create-react-app.dev/

Customizing Bootstrap with SASS Variables

Prerequisites

• node & npm
• create-react-app

npx create-react-app my-app
cd my-app
npm start

npm install --save reactstrap react react-dom

What Reactstrap is instructing you is to Import Bootstrap CSS in the src/index.js file:

import 'bootstrap/dist/css/bootstrap.css';

but this won't let you use the full power of SASS. What we are proposing is this:

Your src/index.js will import an ./index.sass file.

in this index sass file we will import the scss version of bootstrap:

@import "../node_modules/bootstrap/scss/bootstrap"

then we will copy the variables file from node_modules/bootstrap/scss/_variables.scss to our src/styles/ folder, name it bootstrapvariables.sass and remove all the  !default via find and replace. In this file we can later change all the variables to get our own custom version of bootstrap.

To do so we need to import this file above the bootstrap import. Since the variables file uses some functions, we also need to import those functions even before our custom bootstrapvariables.sass. The index sass file will now look like this:

// theme
@import "../node_modules/bootstrap/scss/functions"
@import "styles/bootstrapvariables"
// vendor modules
@import "../node_modules/bootstrap/scss/bootstrap"

// your other custom styles for components etc
// ....

The cool thing is:

"Every Sass variable in Bootstrap 4 includes the !default flag allowing you to override the variable's default value in your own Sass without modifying Bootstrap's source code. Copy and paste variables as needed, modify their values, and remove the !default flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap." (https://getbootstrap.com/docs/4.3/getting-started/theming/)

And now you can start theming your PWA in your bootstrapvariables.sass file with your Corporate Design. Start by setting up your color pallet and the default colors for bootstrap elements (primary, secondary, success, info, warning, danger, light, dark). You can change the grid-breakpoints, container-widths, font-sizes, default font and many other things.

Wrap-up / tldr;

You don't have to reinvent the wheel to have a good-looking website or PWA. By using a frontend library like Bootstrap you get a modern looking website in no time. Extending the styling with sass variables even provides you a custom look that can be refined also later in the process.

At LEAN BAKERY we are building digital products for major brands, corporates, NGOs and startups. We dedicate ourselves to your idea and love to fully understand the problem you want to solve. We've spent more than 300 days developing our technology and methodology bakerplate which can also help you to turn your ideas into a scalable product within weeks. Talk to us, we love new challenges 😊 https://leanbakery.com/