DEV Community: Aaron Westbrook

Beginner's Guide to Customizing Bootstrap 5 with SASS

Aaron Westbrook — Thu, 19 May 2022 16:14:51 +0000

Bootstrap CSS is a great framework for making your web page look great, but how do you make it feel unique?

Project Setup

This guide assumes you have a project with a working SASS setup with Bootstrap. If you don't, clone our ProductDiv Bootstrap Starter project here. ProductDiv makes it easy to develop Bootstrap applications with utility classes! To learn more, check out the tutorial.

Make sure you have npm and git installed, then run:

git clone https://github.com/awestbro/productdiv-bootstrap-starter-free.git
cd productdiv-bootstrap-starter-free
npm i

To start our app, run npm run dev and visit http://localhost:3000/! Now we can start customizing the look and feel of our app.

How Customizing Bootstrap Works

Bootstrap 5 uses SASS to compile CSS files using variables and mixins. One cool feature of SASS variables is the !default property. Defining a variable like this: $white: #fff !default;, tells the SASS compiler to set the variable named $white to #fff unless the variable $white is already defined.

Luckily for us, Bootstrap's variables are all defined with !default so we can overwrite them before we compile the library.

For example: try adding the line $primary: blue; in our theme.scss file before the line that imports the Bootstrap library. Save, then check out the app in the browser. The navbar and primary button should be a blue now! Any variable can be overwritten by redefining the variable before importing Bootstrap. This feature lets you change the library to fit your exact style and needs!

Adding your own Colors

Like $primary, you can override any color you like in Bootstrap. Check out the colors documentation for all the main colors to override.

The main color variables you'll work with are:

$primary
$secondary
$success
$info
$warning
$danger
$light
$dark

Overwriting any one of these will give your app a custom feel already! Bootstrap defines these in the $theme-colors variable. If you redefine that map, you can add any color you like to bootstrap. For example, what would happen if we add a $tertiary variable to the $theme-colors map? Bootstrap would generate utility classes like: bg-tertiary, btn-tertiary, etc.

Importing New Fonts

Something as simple as changing a font can give your app a custom look and feel. Bootstrap also provides variables for fonts so they're easy to overwrite, but there are some gotchas to look out for.

Bootstrap has utility classes for fonts built in. These let you apply different weights to fonts like light, bold, etc. To get a font that will work out of the box, we need to know what weights Bootstrap supports. In the variables file, Bootstrap defines:

$font-weight-lighter:         lighter !default;   
$font-weight-light:           300 !default;   
$font-weight-normal:          400 !default;   
$font-weight-semibold:        600 !default;   
$font-weight-bold:            700 !default;   
$font-weight-bolder:          bolder !default;

To accommodate the lighter and bolder weights, we'll need to include 100 and 900 weights too.

To bring in custom fonts, we can use Google fonts here: https://fonts.google.com/. We'll use the Lato font since it has all the weights we need! To import it, use the @import directive in SASS like so:

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap");
$font-family-sans-serif: "Lato", -apple-system, system-ui, BlinkMacSystemFont,
 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;

Overwriting the $font-family-serif variable tells Bootstrap to use our imported Lato font. Now our application has a beautiful default font!

You can import fonts and apply them only to specific elements as well!

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700;900&display=swap");
h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
.btn,
.card-header {
 font-family: "Poppins";
}

Change fonts further by playing around with the $font- variables. For instance, changing the $font-size-base to 1.2rem increases your font size across all elements.

Fonts set the tone for your visitors and can change a site from feeling basic to bespoke!

What next?

Now that you have a good feel how to overwrite variables, you can change whatever you'd like! Try changing border-radius, box-shadow, and spacing variables to make a beautiful custom theme!

If you would like to get a head start on your next application, check out ProductDiv's Bootstrap PRO starter kit! It includes custom SASS themes and examples for you along with high quality HTML templates to get you started!

Visually building websites

Aaron Westbrook — Fri, 13 May 2022 13:41:51 +0000

My name is Aaron and I've been writing web applications since 2011. In that time I've worked with Java, Javascript, Python, XSLT, React, Knockout.js, Backbone.js, Rails, Elixir/ Phoenix, Next.js, Remix.js and more.

In all the frameworks, I kept running into the same issues...

The Problem

Writing HTML and CSS by hand requires a lot of:

Domain knowledge
Troubleshooting
Open Documentation tabs
Time

While writing user interfaces can be very fun and rewarding, I found that too much of my time building new applications was spent re-learning the same patterns and re-writing the same HTML. Not only that but after talking with peers, I found many software developers didn't feel confident making good looking web pages because of the HTML and CSS knowledge barrier. Many would write the code, but always get confounded when the browser gave them different results than what was expected ("How do I vertically center this thing???").

Existing tools

After some research, I found tools that were visual (like Elementor) and had templates for code re-use, but lacked tools that made them useful for my web development workflow. I wanted a tool that:

Has templates and a drag and drop page builder
Works with my CSS framework of choice
Exports clean code (No unnecessary inline styles or machine-generated classes)
Is configurable and grows with my project

The Solution

I started work on ProductDiv in July of 2021. It went through many design iterations to finally become a productive tool for web development.

ProductDiv is an open-source library for developing web applications quickly, with any CSS framework. It accomplishes this by running entirely on configuration!

Has templates and a drag and drop page builder

In ProductDiv, you can write re-usable templates and include them in your configuration. A simple template definition is a simple as:

const myTemplate = {
  name: 'Test',
  htmlTemplate: '<h1>Hello World!</h1>',
  tags: ['Test'],
}

Any template can be previewed inside your page, meaning if you make changes in your CSS, they are reflected in your template!

Works with my CSS framework of choice

The real magic of ProductDiv is in its configuration. Since more and more CSS frameworks have moved towards using utility classes, I wanted to design an experience for easily selecting and applying them to existing elements. With a little configuration, you can encapsulate any utility class like so:

const themeBreakpoints = "sm|md|lg|xl|xxl";

export const MarginStart = {
  name: "Margin Start",
  type: "selectMany",
  classes: [
    "ms-(0|1|2|3|4|5|auto)",
    `ms-(${themeBreakpoints})-(0|1|2|3|4|5|auto)`,
  ],
  tags: ["Spacing", "Margin"],
  selectors: ["h1"]
};

This example configuration is what is needed to encapsulate all of Bootstrap 5's Margin End classes. Its name is shown in the editor, many of them can be selected at once, and the shorthand classes syntax is expanded at runtime to save time. For example m-(1|2) will be expanded to: m-1 and m-2. The selectors option allows you to match utility classes to elements! In this exmaple, if you clicked a h1 tag, it would show our Margin Start utility class at the top. In the ProductDiv editor, now you can apply these classes to any element you want. Hovering over any of the options applies it to the element you're editing so you never have to second-guess which class you need!

Exports clean code (No unnecessary inline styles or machine-generated classes)

The beauty of ProductDiv and its configuration allows you to generate code at the same quality you would write it by hand. Templates copy out exactly as they came in, and utility classes help you avoid inline styles everywhere and lead to a more consistent code base.

Is configurable and grows with my project

Since ProductDiv is entirely configuration-based, it grows as you do. Need to encapsulate a new design element? Make a template. Pull in an icon library? Write a simple utility class definition. ProductDiv's easy to use interface lets you spend more time designing and less time digging through documentation.

How do I get started?

To learn more about the editor, take a look at the tutorial.Check out the ProductDiv documentation for instructions on how to add ProductDiv to your project. If you would like to save time on your next application, please check out our Bootstrap PRO project that includes everything you need for building your next application quickly with Bootstrap 5!