Skip to content

Latest commit

 

History

History
171 lines (126 loc) · 5.31 KB

index.md

File metadata and controls

171 lines (126 loc) · 5.31 KB
Raw
layout
home

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

  1. Add this line to your Jekyll site's Gemfile:
gem "paraqeet"
  1. Add this line to your Jekyll site's _config.yml:
theme: paraqeet
  1. 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

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

which will produce:

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

which looks like: {% include icon.html name='bootstrap' %}

Advanced Usage

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

which will produce:

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

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

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:

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

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

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

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

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">
  {% raw %}{{ content }}{% endraw %}
</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]({{- '/typography' | relative_url -}}).