WordPress Bootstrap 4 and Material Design with Understrap Child Theme

Brand Primary

I am trying to standardize on Bootstrap 4 and Material Design and am going to test the UnderStrap theme direct from Github and will use the UnderStrap child-theme for our FolkBot WordPress theme.

We create the WordPress site, salts, database, user and gitignore

We change to the themes folder and use ZIP to download the parent and child-theme and the child-theme will have its own name folkbot-understrap.

we add the themes to GIT, create a repo on Gitlab and push the entire site repo.

git add .
git status
git commit -am "Understrap and Folkbot Understrap"
git status
git remote add gitlab_com [email protected]:folkbot/folkbot_wordpress.git
git push gitlab_com master

we activate the theme using WP cli

wp theme activate understrap
Success: Switched to 'UnderStrap' theme.

we check the browser and we see with our biological eyes in our human heads we have an Understrap theme

Folkbot Understrap default
Folkbot Understrap default

we activate the new FolkBot Understrap child theme

wp theme list
| name | status | update | version |
| folkbot_understrap | inactive | none | 0.2.2 |
| twentyfifteen | inactive | none | 1.7 |
| twentyseventeen | inactive | none | 1.1 |
| twentysixteen | inactive | none | 1.3 |
| understrap | active | none | 0.5.7 |

wp theme activate folkbot-understrap/

Success: Switched to 'UnderStrap Child' theme.

Folkbot Understrap
Folkbot Understrap

All pretty standard so far, next we are going to try to bring in the Daemonite Material Design Bootstrap 4 library.

Lets try to put it /var/www/html/wp-content/themes/folkbot_understrap/sass

git clone https://github.com/Daemonite/material.git

We add this to git by deleting the material repo’s own .git git dot folder

Material repo
Material repo

Custom CSS

Understrap wants Nodejs, Bower, Gulp and Browser Sync

sudo apt-get install git-core curl zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev python-software-properties libffi-dev nodejs
git clone https://github.com/rbenv/rbenv.git ~/.rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(rbenv init -)"' >> ~/.bashrc
exec $SHELL
git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
echo 'export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"' >> ~/.bashrc
exec $SHELL
rbenv install 2.4.0
ruby -v
gem install bundler
curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo apt-get install -y build-essential
ruby -v
sudo npm install -g bower
bower --version

We change directory and install via npm install

Gulp Watch

We change the gulpfile.js so it works for our DNS and in our folder we run gulp watch

Now in folkbot-understrap/sass/theme/_child_theme_variables.scss we can change our $brand-primary: #4c4d4a; and gulp watch updates and we get a new theme color

Material Design

Next, we want to integrate Material Design

// Material Design for Bootstrap 4
@import "material/assets/sass/material";

@import "theme/child_theme_variables"; // <--------- Add your variables into this file. Also add variables to overwrite Bootstrap variables here
@import "assets/bootstrap4";// <--------- Loads Bootstrap3 or Bootstrap4. Change from /bootstrap3 to /bootstrap4 Watch out! just for testing in the moment!
@import "../src/sass/understrap/understrap/understrap";// <-------- Loads the UnderStrap defaults. Just a few classes to incorporate BS in WP
@import "../src/sass/understrap/theme/contact-form7";// <-------- Loads some basic styling for contact form 7 plugin

//Optional files - If you don´t use the corresponding scripts/fonts comment em out
@import "assets/font-awesome"; // <------- Font Awesome Icon font
@import "assets/underscores"; // <------- Underscores media styles

// Any additional imported files //
@import "theme/child_theme"; // <--------- Add your styles into this file

to modify Understrap theme settings we need to bring variables across from the theme and place them into

$brand-primary: #fe9ecd;

// Basics of a navbar
$navbar-height: 60px;
$navbar-margin-bottom: 0px;
$navbar-border-radius: 0px;

we can now add the kitchen sink from Bootswatch Bootstrap 4 and we can see Material Design Bootstrap 4

we also change material design folkbot-understrap/sass/material/assets/sass/variables/_colour.scss and other variables

$brand-color: $palette-grey-500 !default;
$brand-color-dark: $palette-grey-700 !default;
$brand-color-light: $palette-grey-100 !default;
$brand-text-color: $white-primary !default;
$brand-text-color-dark: $white-primary !default;
$brand-text-color-light: $black-primary !default;

$brand-color-accent: $palette-green-a200 !default;
$brand-color-accent-dark: $palette-green-a400 !default;
$brand-color-accent-light: $palette-green-a100 !default;
$brand-text-color-accent: $white-primary !default;
$brand-text-color-accent-dark: $white-primary !default;
$brand-text-color-accent-light: $black-primary !default;

Brand Primary
Brand Primary

Obviously, this is just the start

Next, Phoenix, Elm, Angular, Sketch, Android and Swift