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
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.
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
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
cd
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
folkbot-understrap/sass/theme/_child_theme_variables.scss
$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;
Obviously, this is just the start
Next, Phoenix, Elm, Angular, Sketch, Android and Swift