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 - the official open source SVG icon library for Bootstrap, as well as built-in Sass support for Rouge - Jekyll’s default code syntax highlighter.

Installation

Add this line to your Jekyll site’s Gemfile:
```
gem "paraqeet"
```
Add this line to your Jekyll site’s _config.yml:
```
theme: paraqeet
```
Then execute:
```
bundle
```

Usage

Bootstrap

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

To make it easy to use Bootstrap Icons in your project, Paraqeet ships with an icon include.

Basic Usage

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

which will produce:

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

which looks like:

Advanced Usage

{% include icon.html name='rocket-takeoff-fill' type='sprite' size='40' class='text-primary' %}

which will produce:

<svg aria-label="Rocket takeoff fill" role="img" focusable="false" class="bi bi-rocket-takeoff-fill text-primary" width="40" height="40" fill="currentColor"><use xlink:href="/paraqeet/assets/bootstrap-icons/bootstrap-icons.svg#rocket-takeoff-fill"/></svg>

which looks like:

Options

Name	Description	Deafult	Required?
`name`	The name of the icon (e.g. `bootstrap-fill`).	`nil`	Yes
`type`	The type of icon. Available values are `font`, `image`, and `sprite`.	`font`	No
`size`	The width and height of the icon in pixels.	`16`	No
`class`	Any additional class attribute values to be applied (e.g. `fs-3 text-info`).	`nil`	No

Highlight

To customise syntax highlighting to the look and feel of your project, override _sass/_highlight.scss in your own project. Below are examples of the syntax highlighter in use.

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">
  {{ content }}
</article>

To customise typographic defaults to the look and feel of your project, override _sass/_prose.scss in your own project.

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