Customize Bootstrap 4 themes

As of Pinegrow 6 you can customize many aspects of your Bootstrap theme using the Design Panel, including colors and fonts. See the documentation here. Other customizations will need to be performed as outlined below.

Customizing Bootstrap is normally a bit complicated because it requires setting up the SASS compilation environment, installing Bootstrap SASS sources and creating a file structure for your custom theme.

But with Pinegrow it’s very simple.

Pinegrow takes care of all these tasks. All we have to do is the actual customization.

Don’t have experience with SASS and variables? Just keep reading and you’ll learn on the way.

If you want you can use this article as a practical tutorial, just open Pinegrow (download the trial version, if you don’t have it yet) and follow along.

This article is also available as a YouTube video if you prefer to watch the action:

Let’s get started!

Create or open a project

First, create a new Bootstrap 4 project with “File -> New page”, or open an existing Bootstrap 4 project with “File -> Open project”.

Note, in order to customize an existing project, bootstrap.css (or bootstrap.min.css) needs to be included in the page locally, not remotely from CDN.

If we created a new page, we save it first and then open the folder as a project:

Let Pinegrow setup the SASS structure for the theme

Note, this command works with projects and thus requires Pinegrow PRO edition.

Open a page from your project and select “Page -> Customize Bootstrap theme.”

A notice will pop-up, asking if we want to add Bootstrap SASS sources to the project in order to do the customization.

We confirm and Pinegrow will do all the preparatory work for us. Another notice will explain what was done:

• A folder bootstrap_theme was created in our project.
• Bootstrap source SASS files were copied into bootstrap_theme/bootstrap.
• Our new main theme file, custom.scss, was created in bootstrap_theme folder. All our custom variables and CSS rules will go into custom.scss that in turn includes the original Bootstrap SASS files.

This structure is set up in accordance with official Bootstrap guidelines for customization.

When it comes to customizing Bootstrap it is important to never change the actual Bootstrap source files. Why? Because all our changes would be overwritten if we update Bootstrap files in the future.

With this structure we keep our modifications in custom.scss and simply overwrite bootstrap_theme/bootstrap with new Bootstrap source files when we want to update the Bootstrap version used in the project.

Bootstrap SASS variables

Let’s take a look at Bootstrap variables that are available to us.

In Style panel, open the Stylesheets menu. Here we see the structure of our custom Bootstrap theme:

Don’t worry if it looks a bit scary. We’re only interested in two files:

• _variables.scss with all Bootstrap variables conveniently gathered in one place, and
• custom.scss, the top file in this structure where all our modifications will go.

Click on the _variables.scss to open it in a separate tab within the Style panel.

In SASS, variables are prefixed by the $ character. When SASS is compiled into CSS, the compiler will replace variables with their values.

Pinegrow has a SASS compiler bundled in, so there’s no need to install anything else. The unique feature of SASS in Pinegrow is that all changes to SASS files are immediately compiled and shown on the page – no need to save changes first.

Changing the primary color

To start, let’s change the primary color of the theme.

The $primary variable is responsible for that. It’s default value is $blue, another variable that is defined in the beginning of the _variables.scss.

We could just start changing the $primary variable in _variables.scss, but remember – that’s a bad idea. Doing that would make it impossible to easily update Bootstrap version without loosing our edits.

Note, we’re working on the feature that would lock certain stylesheets so that any such accidental edits can be prevented. For now, we have to be mindful of that.

To customize $primary, we right-click on it and select “Customize in custom.scss”. If custom.scss is not yet selected, we select it from the dropdown list.

Pinegrow creates a copy of $primary in custom.scss and displays custom.scss in its own Style panel tab.

Not only that, Pinegrow also copied the variable $blue because it is used in the value of $primary. Without doing that our theme could not compile because the SASS compiler would have no idea about what $blue means in the definition of $primary.

Now we can go ahead and change the value of $primary in the custom.scss tab.

The colors on the page change immediately.

We can enter a direct color value or we can create a new variable, for example $violet and use that.

Create a new variable

To create a new variable click on the insertion lines that appear after hovering between two items:

Then type: $violet [TAB] #aa00aa [ENTER].

It makes sense to define a new color as a variable so that we can easily reuse it in other places.

Because we want to use $violet in $primary we need to place the definition of $violet before $primary.

Now, we can use $violet as a value of $primary.

Using Bootstrap variables in custom values

How about if we want $primary to use an existing variable that is defined in _variables.scss?

First we have to bring that variable to custom.scss by going to _variables.scss tab, right-clicking on $pink and choosing “Customize in custom.scss”. Pinegrow will copy the variable to custom.scss.

Remember, the order of variables that reference each other is important. Pinegrow tries to automatically keep the correct order of variables when we do “Customize in…”. In this case, $pink was inserted before $primary because that’s how it is positioned in _variables.scss.

And that’s precisely what we want so that we can use $pink as the value of $primary.

Saving the CSS theme file

Whenever we save the page, the compiled bootstrap.css (or bootstrap.min.css, if that was used on the page) is saved as well.

Note, at the moment, Pinegrow doesn’t actually minify the css file if the name bootstrap.min.css is used.

Deleting unused variables

We can delete variables that are not used anymore. For example, $blue is not used in $primary anymore, so we can safely delete it from custom.scss by clicking on the Trash bin icon next to it. This will only delete $blue from custom.scss – it will still remain in _variables.scss.

Searching for variables

Let’s change fonts now.

Scrolling down through all the variables in _variables.scss, we discover that there are lots of them. We can use the search function of the Style panel to help us find the right variables.

Click on the Search icon to show the search bar and then enter the search term “font”. Now, in all tabs of the Style panel, we only see CSS rules and variables that contain the term “font”.

And here is our variable: $font-family-sans-serif.

Again, we right-click on it and select “Customize in custom.scss”.

In custom.scss tab (note, the active search term also affects what’s displayed there) we change the variable so that it uses Georgia, a beautiful serif system font.

Nice!

Using custom fonts

But how about using custom fonts, for example Google Fonts?

Easy as well. Although Pinegrow has “Page -> Manage Google fonts” tool, it’s easier for this task to include fonts manually.

Let’s go to Google Fonts and find a font, for example Lato.

Click on “Select this font” and choose the @import option for embedding the font.

We just copy the @import statement without