Folkbot Drupal 8 Bootstrap based Custom theme

Like the web at large, the formerly Twitter Bootstrap base theme is now the de-facto standard, the go-to theme in Drupal.

The internet is increasingly being dominated by mega corporations, and the leading FLOSS projects are often coming from projects sponsored by them.

For instance the Zurb Foundation project is struggling and many of its ambitious branches are un-maintained, from the issues on GH it seems competition from Google is denying Zurb oxygen.

Drupal 8 Custom Theme

Let’s build a custom distribution for the Folk Bot Drupal 8 Distribution.

From the Bootstrap Drupal 8 Subtheming docs with the SASS Starterkit.

Change directory to our Installation profile directory

[code lang=text]
cd /var/www/folkbot_drupal8/profiles/folkbot/themes
[/code]

we copy the SASS starterkit folder and create a new folder

Bootstrap SASS starterkits
Bootstrap SASS starterkits

and we rename it folkbot

folkbot theme based on sass starter kit
folkbot theme based on sass starter kit

Rename and Customize

Next we rename the and customize

[code lang=text]
THEMENAME/THEMENAME.starterkit.yml becomes folkbot/folkbot.info.yml
THEMENAME/THEMENAME.libraries.yml becomes folkbot/folkbot.libraries.yml
THEMENAME/THEMENAME.theme becomes folkbot/folkbot.theme
[/code]

Inside our folkbot.info.yml file we make changes

[code lang=text]
core: 8.x
type: theme
base theme: bootstrap

name: 'FolkBot Bootstrap'
description: 'FolkBot Uses the Bootstrap framework Sass source files and must be compiled (not for beginners).'
package: 'Bootstrap'

regions:
navigation: 'Navigation'
navigation_collapsible: 'Navigation (Collapsible)'
header: 'Top Bar'
highlighted: 'Highlighted'
help: 'Help'
content: 'Content'
sidebar_first: 'Primary'
sidebar_second: 'Secondary'
footer: 'Footer'
page_top: 'Page top'
page_bottom: 'Page bottom'

libraries:
– 'folkbot_bootstrap/global-styling'
– 'folkbot_bootstrap/bootstrap-scripts'
[/code]

we also change the sub-theme config settings

THEMENAME/config/install/THEMENAME.settings.yml becomes folkbot/config/install/folkbot.settings.yml

and THEMENAME/config/schema/THEMENAME.schema.yml becomes folkbot/config/schema/folkbot.schema.yml

/var/www/folkbot_drupal8/profiles/folkbot/themes/folkbot/config/schema/folkbot.schema.yml is also changed

[code lang=text]
# Schema for the theme setting configuration file of the THEMETITLE theme.

folkbot.settings:
type: theme_settings
label: 'FolkBot settings'
[/code]

Enable Folkbot Bootstrap theme

We can now see our new FolkBot Bootstrap sub-theme

FolkBot Bootstrap
FolkBot Bootstrap

Now its enabled

FolkBot enabled
FolkBot enabled

We check the homepage and see we need to add logo, favicons and compile the SASS to get the needed CSS.

FolkBot before SASS compile
FolkBot before SASS compile

Install SASS Compiler

Now we focus on the SASS starterkit docs we need to install Ruby and SASS

Install Ruby

Lets use Gorails for Ruby installation docs

Ruby pre-requisites

[code lang=text]
sudo apt-get update
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
[/code]

there are a few Ruby version managers, Gorails recommends rbenv

[code lang=text]
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
rbenv global 2.4.0
ruby -v
[/code]

Once Ruby is installed we shall have Ruby

[code lang=text]
ruby -v
ruby 2.4.0p0 (2016-12-24 revision 57164) [x86_64-linux]
[/code]

<h2>Install Bundler</h2>

We need the Ruby package manager for gems, called Bundler

[code lang=text]
gem install bundler
Fetching: bundler-1.14.4.gem (100%)
Did you know that maintaining and improving Bundler and RubyGems.org costs more than $25,000 USD every month? Help us keep the gem ecosystem free for everyone by joining the hundreds of companies and individuals who help cover these costs: https://ruby.to/support-bundler
Successfully installed bundler-1.14.4
Parsing documentation for bundler-1.14.4
Installing ri documentation for bundler-1.14.4
Done installing documentation for bundler after 5 seconds
1 gem installed

[/code]

we now install SASS

[code lang=text]
gem install sass
Fetching: sass-3.4.23.gem (100%)
Successfully installed sass-3.4.23
Parsing documentation for sass-3.4.23
Installing ri documentation for sass-3.4.23
Done installing documentation for sass after 4 seconds
1 gem installed
[/code]

Now we need to download the Bootstrap SASS code into our new subtheme as described in the Drupal Bootstrap <a href="http://drupal-bootstrap.org/api/bootstrap/starterkits%21sass%21README.md/group/sub_theming_sass/8">docs</a>

[code lang=text]
/var/www/folkbot_drupal8/profiles/folkbot/themes/folkbot (master) $
git clone https://github.com/twbs/bootstrap-sass.git bootstrap
[/code]

now we start SASS compilation and polling, where it watches the SASS folder for changes and compiles to style.css

[code lang=text]
/var/www/folkbot_drupal8/profiles/folkbot/themes/folkbot (master) $ sass –watch sass:css
>>> Sass is watching for changes. Press Ctrl-C to stop.
directory css
write css/style.css
write css/style.css.map
[/code]

we can now do some changes to SASS and see our results

vi /var/www/folkbot_drupal8/profiles/folkbot/themes/folkbot_bootstrap/sass/_default-variables.scss

[code lang=text]
$gray-base: #0a0c16 !default;
$gray-darker: lighten($gray-base, 13.5%); // #222
$gray-dark: lighten($gray-base, 20%); // #333
$gray: lighten($gray-base, 33.5%); // #555
$gray-light: lighten($gray-base, 46.7%); // #777
$gray-lighter: lighten($gray-base, 93.5%); // #eee

$brand-primary: darken(#ca278e, 6.5%); // #337ab7
$brand-success: #52b820;
$brand-info: rgba(58, 115, 196, 0.33);
$brand-warning: #f0965f;
$brand-danger: #d959c0;
[/code]

and our crazy color scheme can be seen

Folkbot Pink
Folkbot Pink