In my first blog post I did a walk through of how I set up this site using Jekyll and the Sass port of Bootstrap 3. Be sure to check it out if you haven’t already! After, I was able to line up content using the bootstrap grid system and use bootstrap components like the Navbar, Jumbotron, Wells, and others. This was great and all but everything looked very, well, bootstrap-y. In this post I’m going to share how I override some of the default bootstrap sass variables and css classes to start customizing the look and feel of my site.
After adding the bootstrap sass files to Jekyll _sass directory (see my first post post for a full walk through) you should have a directory that looks something like this:
_sass
| _bootstrap.scss
|____bootstrap
| _grid.scss
| _jumbotron.scss
| ...
The _bootstrap.scss file in the root of the _sass folder above is responsible for doing the work of importing select sass files in the bootstrap/ directory like _gird.scss and _jumbotron.scss. Outside of this in the sites root folder is another @import statement found in styles/site.scss - this pulls all of this sites sass files together into the built output, here is what that file looks like in my site:
---
---
/*Imports base variables, custom css, syntax-highlighitng and the bootstrap framework
and builds the output in _site/styles/site.css*/
@import "base","syntax-highlighting";
@import "bootstrap", "layout";
As you can see above, in addition to importing the bootstrap sass file I’m also importing a _base.scss file (which you can go ahead and create in your Sass directory from above if you’re following along) - this is where I’m overriding default bootstrap variables used in the jumbotron, hyperlinks, and navigation bar. Here it is:
/*Primary site color scheme*/
$primary: #04151F;
$secondary: #D6D6B1;
$secondary-dark: #494331;
$third: #878472;
$fourth: #DE541E;
/*Overridden bootstrap variables*/
$jumbotron-heading-color: $fourth;
$link-color: $fourth;
$jumbotron-bg: $primary;
$navbar-inverse-bg: $primary;
With Sass, once a variable has been assigned it will not get re-assigned again. The order of imports in the styles/site.scss file above is important because it provides the ability to override default Bootstrap variables. This structure also allows me to avoid modifying the bootstrap file but still change the colors of the elements I’m using with sass variables. So whenever I get around to upgrading my sites version of Bootstrap it will (hopefully) be less of a headache.
In case you missed it earlier in the styles/site.scss in addition to importing a _base.scss file I’m also importing a _layout.scss file. This _layout.scss provides the ability to override bootstrap classes (maybe they aren’t using variables that I can override) and also write my own CSS. I’m importing this after bootstrap in the case that I want to directly override something inside of the bootstrap framework. It currently looks like this:
/* File for custom CSS rules - will override anything in bootstrap */
.jumbotron p {
color: white;
}
As you can see here, I’m changing the color of text inside of paragraphs in a jumbotron to white. In the future, maybe i’ll write some custom CSS classes if I need something not found in the bootstrap framework.
Just like last time, if you’re feeling lost after reading this or want to get your hands dirty checkout My Sample on GitHub. I created a new branch for this post so you can easily compare this post with my first one. Keep in mind that this is definitely not the only way to override bootstrap and make it your own - just the way I’m currently doing it. Hope you enjoyed!