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.
Change directory to our Installation profile directory
we copy the SASS starterkit folder and create a new folder
and we rename it folkbot
Rename and Customize
Next we rename the and customize
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
Inside our folkbot.info.yml file we make changes
base theme: bootstrap
name: 'FolkBot Bootstrap'
description: 'FolkBot Uses the Bootstrap framework Sass source files and must be compiled (not for beginners).'
navigation_collapsible: 'Navigation (Collapsible)'
header: 'Top Bar'
page_top: 'Page top'
page_bottom: 'Page bottom'
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
# Schema for the theme setting configuration file of the THEMETITLE theme.
label: 'FolkBot settings'
Enable Folkbot Bootstrap theme
We can now see our new FolkBot Bootstrap sub-theme
Now its enabled
We check the homepage and see we need to add logo, favicons and compile the SASS to get the needed CSS.
Install SASS Compiler
Lets use Gorails for Ruby installation docs
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
there are a few Ruby version managers, Gorails recommends rbenv
git clone https://github.com/rbenv/rbenv.git ~/.rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(rbenv init -)"' >> ~/.bashrc
git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
echo 'export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"' >> ~/.bashrc
rbenv install 2.4.0
rbenv global 2.4.0
Once Ruby is installed we shall have Ruby
ruby 2.4.0p0 (2016-12-24 revision 57164) [x86_64-linux]
We need the Ruby package manager for gems, called Bundler
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
we now install SASS
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
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>
/var/www/folkbot_drupal8/profiles/folkbot/themes/folkbot (master) $
git clone https://github.com/twbs/bootstrap-sass.git bootstrap
now we start SASS compilation and polling, where it watches the SASS folder for changes and compiles to style.css
/var/www/folkbot_drupal8/profiles/folkbot/themes/folkbot (master) $ sass –watch sass:css
>>> Sass is watching for changes. Press Ctrl-C to stop.
we can now do some changes to SASS and see our results
$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-info: rgba(58, 115, 196, 0.33);
and our crazy color scheme can be seen