Skip to content

Adds the Twitter Bootstrap framework to your Jekyll site.

License

Notifications You must be signed in to change notification settings

free-creations/bootstrap4jekyll

Repository files navigation

bootstrap4jekyll

Adds the Twitter Bootstrap framework to your Jekyll site.

Although the Twitter Bootstrap - framework exists as a GEM, called Bootstrap Ruby Gem, it cannot be used directly in a Jekyll site, because it is specifically made for the Rails asset pipeline.

bootstrap4jekyll integrates the Bootstrap Ruby Gem into Jekyll. Thus making the Bootstrap Ruby Gem available to Jekyll users.

This GEM is inspired by the jekyll-bootstrap-sass GEM, which has not been maintained for a while.

Installation in a normal Jekyll site

Add the following to your site's Gemfile:

group :jekyll_plugins do
  gem "bootstrap4jekyll", "~> 1.0"
end

Now run Bundler:

$ bundle install

This will add the bootstrap4jekyll plugin to your site. Together with the plugin also the Twitter Bootstrap - framework will added to your site.

Installation in a Jekyll theme

When you plan to build a Jekyll theme, instead of declaring the plugin in the Gemfile you should declare it in your *.gemspec file. Like this:

  spec.add_runtime_dependency "bootstrap4jekyll", "~> 1.0"

And additionally in your _config.yml file, like this:

plugins:
  - bootstrap4jekyll

When you use this theme in a Jekyll site the bootstrap4jekyll plugin and the Twitter Bootstrap - framework will be automatically loaded together with your theme.

Usage

To customize the Twitter Bootstrap - framework, you can proceed as explained in the Jekyll Docs about Sass assets. Create a .scss file (e.g., assets/myStyle.scss), with the following:

---
---

@import 'bootstrap';

// (Your custom SCSS Here)

When your site is built, Jekyll will automatically add the Twitter Bootstrap - framework before it renders your site's css. In the above example, the resulting file would be assets/myStyle.css with Bootstrap's CSS followed by your own.

Assets

By default, bootstrap4jekyll will simply make the @import 'bootstrap'; directive available to your custom stylesheets so that you can more easily include Bootstrap's CSS.

If you would like to use Bootstrap's javascripts, you'll need to add the following to your site's _config.yml:

bootstrap:
  assets: true

This will create assets/javascripts/bootstrap folders in the generated site, which you can include in your site's header as you would any other javascript file.

Specifying the Bootstrap version

bootstrap4jekyll relies on official Bootstrap Ruby Gem. By default, the newest version starting from 4.2 will be used.

To use a specific version of the Bootstrap Ruby Gem, simply specify the desired version in your Gemfile. Like this:

  gem 'bootstrap', '~> 4.5'

To see how the version of the Bootstrap Ruby Gem relates to the version of the included framework, look into the GEM's changelog

About

Adds the Twitter Bootstrap framework to your Jekyll site.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages