Paraqeet

Paraqeet is a Jekyll theme for building websites using Bootstrap - the most popular HTML, CSS, and JS library in the world. Paraqeet comes pre-loaded with the latest versions of Bootstrap and Bootstrap Icons, as well as built-in CSS theme support for Rouge - Jekyll’s default code syntax highlighter.

Paraqeet is intended to be used as the basis for highly customised websites using Bootstrap. Like any Jekyll theme, Paraqeet ships with a base set of:

• _includes
• _layouts
• _sass
• assets

These can be used, overridden or disabled as required.

Installation

1. Add this line to your Jekyll site’s Gemfile:

   gem "paraqeet"
   

2. Add this line to your Jekyll site’s _config.yml:

   theme: paraqeet
   

3. Then execute:

   bundle
   

Usage

Bootstrap

The core of Paraqueet is Bootstrap - the most popular HTML, CSS, and JS library in the world.

To customise Bootstrap to the look and feel of your project, override the variables found in _sass/bootstrap/_variables.scss and _sass/bootstrap/_variables-dark.scss with your own values in _sass/_variables.scss and _sass/_variables-dark.scss respectively.

For example, to change the primary theme colour to purple and the default sans-serif font family to Roboto, add the following to _sass/_variables.scss:

$primary: $purple !default;
$font-family-sans-serif: "Roboto", sans-serif !default;

Bootstrap Icons

Paraqeet ships with Bootstrap Icons - the official open source SVG icon library for Bootstrap.

To make it easy to use Bootstrap Icons in your project, Paraqeet ships with an icon include. The most basic usage of the icon include is:

{% include icon.html name='bootstrap' %}

which will produce:

<i class="bi-bootstrap" role="img" aria-label="Bootstrap"></i>

which looks like:

Advanced Usage

{% include icon.html
  name='bootstrap'
  type='sprite'
  size=64
  class='fs-3 text-info'
%}

which will produce:

<svg class="bi fs-3 text-info" width="64" height="64" fill="currentColor" role="img" aria-label="Bootstrap"><use xlink:href="/paraqeet/assets/bootstrap-icons/bootstrap-icons.svg#bootstrap"/></svg>

which looks like:

Options

Highlight

Paraqeet ships with syntax highlighting out of the box by providing built-in CSS theme support for Rouge - Jekyll’s default code syntax highlighter.

To customise syntax highlighting to the look and feel of your project, override _sass/_highlight.scss.

Below are examples of the syntax highlighter at work.

Without Line Numbers

```ruby
class Greeter
  def initialize(name="World")
    @name = name
  end

  def say_hi
    puts "Hi #{@name}!"
  end
end
```

class Greeter
  def initialize(name="World")
    @name = name
  end

  def say_hi
    puts "Hi #{@name}!"
  end
end

With Line Numbers

{% highlight ruby linenos %}
class Greeter
  def initialize(name="World")
    @name = name
  end

  def say_hi
    puts "Hi #{@name}!"
  end
end
{% endhighlight %}

1
2
3
4
5
6
7
8
9
class Greeter
  def initialize(name="World")
    @name = name
  end

  def say_hi
    puts "Hi #{@name}!"
  end
end

Typography

Inspired by the Tailwind CSS Typography Plugin, Paraqeet ships with a .prose class you can use to add typographic defaults to any vanilla HTML you don’t control, like HTML rendered from Markdown, or pulled from a CMS.

<article class="prose">
  {{ markdown }}
</article>

To see what it looks like in action, check out the live demo.