Writing Custom Bootstrap Themes
I’ve used bootstrap CSS since sometime during version 3, and also closely followed the custom bootstrap CSS themes put out by bootswatch.
Recently, I wanted to learn SASS (which is used by bootstrap) to make my own CSS files, so I made a few of my own bootswatch-like bootstrap themes. The process to gets started with this is surprisingly simple.
Here is a way how.
Start with a new directory and run npm init.
Install a few basic dependencies:
npm i --save bootstrap jquery popper.js
This part is not necessary to just start working with SASS and bootstrap, but all of this section is the setup I did to make an environment where I could easily view a web server showing my various CSS outputs.
Create an output folder for everything to test the CSS files.
mkdir dist/ && mkdir dist/js/# copy bootstrap, jquery, and popper to dist
cp -r node_modules/bootstrap/dist/ dist/js/bootstrap/
cp -r node_modules/jquery/dist/ dist/js/jquery/
cp -r node_modules/popper.js/dist/ dist/js/popper.js/# install sass globally
npm i -g sass# I will be making pages for each theme, so I will be using nunjucks templates
npm i --save nunjucks
mkdir templates
Place two nunjucks templates in the templates directory, templates/theme.html and template/main.html . They are on GitHub here.
To set up with the format I will be using for my custom themes, I start with the default theme (which is just the default bootstrap look). For this workspace, a theme is defined by two files: config.json and theme.scss . The first theme is located in themes/default/ .
themes/default/config.json :
{
"name": "Default",
"slug": "default",
"description": "The default bootstrap."
}themes/default/theme.scss consists only of one line:
@import "../../node_modules/bootstrap/scss/bootstrap";The first real theme is based on some Minecraft colors.
The config:
{
"name": "Minecraft",
"slug": "minecraft",
"description": "The colors of minecraft."
}Starting out:
// Minecraft$primary: #36b030;
$secondary: #757575;
$info: #996a41;
$warning: #5a381e;
$danger: #ff0000;
$dark: #313131;// make everything more blockish
$enable-rounded: false;@import "../../node_modules/bootstrap/scss/bootstrap";
This is a enough for a basic bootstrap theme. It will replace most of the main colors and force everything to have blockish corners instead of rounded ones:
To get this working, copy index.js from the GitHub repo (it does all the building of templates and css files).
To simply work with sass, you could directly run:
sass themes/minecraft/theme.scss dist/minecraft/minecraft.css
Everything else in index.js is just building the HTML templates and putting things in the right place.
An additional step I took for each theme was to take a screenshot of part of each theme and place it asdist/<themename>/img.jpg . Before that step, the front page looked wrong because there was no image.
After this, you just go and edit the variables until the theme looks the way you want. Look at the some of the examples on my repository for this project.
Originally published at medium.com on July 3, 2018.
