jekyll-gl

This is a very simple Jekyll plugin to be used on Hyojun.guideline project. It'll place .gl class on all markdown generated elements. It also creates some liquid tags for creating specific modules: example, typography, colors and.

Installation

Place this gem on your project Gemfile:

gem "jekyll-gl", "~>0.1.0"

Or install it via gem install:

$ gem install jekyll-gl

Usage

On jekyll _config.yaml file, add this gem to be loaded as a plugin:

source: ./_jekyll
destination: ./guideline

url: /guideline

gems: ["jekyll-gl"]

defaults:
  -
    scope:
      type: pages
    values:
      layout: default

kramdown:
  transliterated_header_ids: true

Tags

There are some liquid tags defined to be used inside the markdown files that should be used as helpers on creating the guideline:

Example boxes

To create an example box with an html inside, just wrap the code with {% example [checkers] [dark|inline] [full] %} tag. Ex.:

• Basic example box:

  {% example %}
  box de exemplo padrão
  {% endexample %}
  

• Example box with checkers background:

  {% example checkers %}
  box de exemplo padrão com checkers
  {% endexample %}
  

• Dark version of the checkers background:

  {% example checkers dark %}
  box de exemplo padrão com checkers escuro
  {% endexample %}
  

• Full-width example box won't be limited by the guideline default max-width:

  {% example full %}
  box de exemplo full
  {% endexample %}
  

• Inline example box to be used in the middle of texts for small examples:

  {% example inline %}
  box de exemplo full
  {% endexample %}
  

Note that any of the options can be combined, such as full checkers, inline checkers dark, etc.

Char-tables

To create a chartable, just use the {% typography [...font-family] %} tag with the glyph list inside, separated by ,. Example:

{% typography Helvetica, sans-serif %}
a,b,c,d,e,f,g,h,i,j,k 
A,B,C,D,E,F,G,H,I,J,K
{% endtypography %}

Color pallete

To create a color pallete, just use the {% colors %} tag with the colors values inside, separated by a line break. You can algo place another value to be shown to the user instead of the raw data, useful for projects that uses color variables:

{% colors %}
#fefede
rgba(10,20,10,.5)
rgba(10,20,10,.3);$var-name
{% endcolors %}

Contributing

Go to Hyojun.guideline for more information.