Styling your Bootstrap project with Bootswatch and SASS

This tutorial is now available from: https://pinegrow.com/tutorials/styling-your-bootstrap-project-with-bootswatch-and-sass/

Have questions or comments about this tutorial? Let’s talk about it!

2 Likes

The : is missing in the link on the tutorial page!

This should be fixed (shift+reload to prevent cache effect).
Thanks for the feedback. :ok_hand:t2:

A useful tip.

If you want to SEE the Bootstrap components BUT with the Bootswatch style that you have selected, just use a custom page library and enter the URL of the demo from the style you have selected.

Screenshot 2020-04-22 15.59.33

Here, I have selected the sktechy style, and I load the https://bootswatch.com/sketchy/ URL as a library.

Then I can clearly see the look of the elements that I can drag/drop into my page/tree.

4 Likes

Thanks for this wonderful tutorial!

Minor feedback - would be good to have the imports in custom.scss under the relevant comments like below, as the order matters, and it’s also a good way to understand what the two bootswatch files are…

/* Bootstrap theme customized with Pinegrow Web Editor */

/* Vars go before the @import */
@import "variables";

/* Import the Bootstrap files */
@import "bootstrap/bootstrap";

/* Custom CSS rules come here */
@import "bootswatch";

.lead-text {
    color: $green
}

this also syncs with the flow in the main bootstrap customization documentation -

Hi @Akayy
Thanks for the feedback! You are right. For tutorial purposes I should have been a little more clear with this. In the end, the file load order is correct, but adding the comments in between makes it clearer.
Bob

1 Like

Do I need to delete the original bootstrap folder from my project? When I customize bootstrap everything looks fine while in Pinegrow but once I upload to the host it defaults back to normal bootstrap.

As an example if I changed $primary: $blue; to $primary: $gold; It shows up perfectly in Pinegrow but goes back to the default color once uploaded.