Bootstrap CLI Webtools

This is a four-parts article. There are few sections here.

Summary Part One: NodeJS Part Two: Ruby Part Three: PHP

Local Group

Gemfile

This is pretty easy if yu have ever use Jekyll before.

Install bundler

In order to use this Gemfile, you need to install Bundler.

% gem install bundler

Ruby Gem: Install Bundler

Gemfile Inside Bootstrap.

Consider go back to bootstrap-less directory. You may notice this Gemfile in root directory.

source 'https://rubygems.org'

group :development, :test do
  gem 'jekyll', '~> 3.1.2'
  gem 'jekyll-sitemap', '~> 0.11.0'
end

Now you can run Gemfile. This will install all the files needed by the dependencies. I’ using RVM, so in my case this will ~/.rvm/gems/ruby-2.4.1/ directory.

% bundle install

Do not worry if this does nothing. We need this Gemfile information, if we want to install bootstrap from outside.

Gemfile Outside Bootstrap.

You can install bootstrap using Gem.

% gem install bootstrap-sass

Gem: Install Bootstrap SASS

SASS (Ruby)

I cannot find anywhere in bootstrap that I can use as an example of SASS command. I decide to use my own Jekyll site as a standalone example. Here it is, I copied my _sass, and rename it to input. Then I make an empty output directory. Now we can run sass.

% sass --help

% sass --update input:output  --style compressed --sourcemap=none

For my Hugo blog, I have my real directory as below:

% sass -I sass --update sass/themes/oriclone:static/assets/css

% sass --watch -I sass  sass/themes/oriclone:static/assets/css --style compressed --sourcemap=none

And there are also alternative, using Node.

% node-sass _sass/themes --include-path _sass --output assets/themes

Jekyll (Static Site Generator)

Yes, the documentaion is in Jekyll. And you can run it offline using localhost:4000.

Additional Setup

You need to create this Jekyll’s _config.yml as this example below:

# Site settings
title: "bootstrap docs"

# the subpath of your site, e.g. /blog
baseurl: "" 

# the base hostname & protocol for your site
url: "localhost:4000"

You also need to copy grunt config as well if needed.

Run Server

Now you can run the server

% jekyll server

Jekyll: Bootstrap Offline Documentation

Sache

There is this sache official documentation. But I consider this good article:

Share your Sass with Sache

If you use Bootstrap v4, you might recognize, this sache.json at root directory.

{
  "name": "bootstrap",
  "description": "The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.",
  "tags": ["bootstrap", "grid", "typography", "buttons", "ui", "responsive-web-design"]
}

What’s Next

There are still, some interesting topic for PHP, the composer. Consider finish reading [ Part Three ].

Thank you for reading.

Bootstrap CLI Webtools - Part Two