Campaign Jekyll Theme Documentation

Latest Version: 1.0.0
  • Created On: 20/03/2020
  • Last Changed: 20/03/2020
  • Current Version: 1.0.0

Introduction

Campaign is a Political Jekyll website template.

Thank you for purchasing the theme. We provide support for all of our themes at http://go.scube.co/campaign-js, but please make sure you read this documentation in it's entirety first. Thanks again!

Theme Installation

Installing The Theme

  • Copy the theme files to your website directory.
  • To run the theme locally, navigate to the theme directory in your terminal
  • Run bundle install to install the theme's dependencies.
  • Then run jekyll serve to start the Jekyll server.
  • If any error occurs click here to troubleshoot.

Plugins

Installed Plugins

  • Jekyll Feed plugin: This plugin is used to generate an Atom (RSS-like) feed of your Jekyll posts. Click here to know about the plugin.
  • Jekyll SEO Tag: This plugin add metadata tags for search engines and social networks to better index and display your site's content. Click here to know about the plugin.
  • Jekyll Paginate V2: This plugin is used for pagination. Pagination generates paginated pages for all your tags, categories and collections. Click here to know about the plugin.

Configuration Options Setup

Manage the configuration setup in _config.yml file.

Basic Settings


title: Campaign Jekyll Template
description: >-  # this means to ignore newlines until "baseurl:"
Campaign Jekyll Template
  • title: Use website title here.
  • description: Use website description here.

Logo & Favicon Settings

This section has options to setup Logo & Favicon.

# Logo & Favicon Settings
logo: /assets/images/campaignlogo.png  # Use logo icon here
logo-width:  # Use logo width here (default 150px)
favicon: /assets/images/favicon.png  # Use favicon here
  • logo: Use logo to displays in the header section.
  • logo-width: Add the width for the logo.
  • favicon: Upload a favicon for the website.

Header

  • Campaign Header is created as an include, which is included in _layout > default.
  • On page include use {% include do-header.html %}
    •   {% include do-head.html %}
  <body class="content_left bg_linen body_boxed scheme_blue">
    {% include do-switcher-button.html %}
    <div class="pre-header"></div>
    {% include do-header.html %}
    <section class="cp-section">
      <div class="container">
        <div class="row">
          <div class="col-md-8 content-order extra-padding the-blog">
            {{ content }}
          </div>
          <div class="col-md-4 sidebar">
            {% include do-side-widget.html %}
          </div>
        </div>
      </div>
    </section>
  {% include do-footer.html %}
  {% include do-footer-script.html %}
  • Campaign Header consists of 4 items: Logo/Site Title, Search bar, Menu, Donation Butoon.
    • screenshot
  • Logo/Site Title: You can add logo and it's width in _config.yml > Logo & Favicon Settings tab. Click here for more information.
  • Menu: To add in header menu, _data > do-menu.yml. Click here for more information.
  • Search Bar: Search bar is used to search the file.
  • Donation Button: User can donate the money using the donate button.

Includes

Call To Action

Description

Call to action is an include, which contain some text and a button.

screenshot
How to add content
  • In _data > do-call-to-action.yml
    • call-to-action:
- title: Call To Action
  conten: You can fill this banner up with whatever you want. These three sections and their buttons serve as a perfect call to action to navigate your users around the site.
  link-name: Contribute
  link: \#
- title: Collect Emails
  content: Campaign makes it easy to capture the names and emails of your constituents. You can easily put in code from your list manager to sign up users in a jiffy.
  link-name: get in touch
  link: \#
    • title: Title for the call to action.
    • content: Content for the call to action.
    • link-name: Name of the button is used here.
    • link: Link for the button is used here
How to add on page
  • It can be used by
    • {% include do-call-to-action.html %}

Form

Description

Form is an html block which provides the user to contact the owner of the site with its available elements. This form is just a example one which you can embed on your site.

screenshot
How to add on page
  • It can be used by
    • {% include do-form.html %}

Hero Content

Description

The section contains two columns one with image and other with text. Text column contains some spacing before and after.

screenshot
How to add content
  • In _data > do-hero-content.yml
    • hero-content:
- title: Video Title  # Use hero-content title here
  description: This is a short description of the video. Simply put in the embed code for whatever video you want here. This is an HTML template, so whatever you want put here will work just fine. Get your point across with video and a little bit of text.  # Use hero-content description here
  image:  # Use hero-content image path here
  iframe: <iframe width="100%" height="235" src="https://www.youtube.com/embed/k5q8y9_BXOs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> # Use hero-content iframe path here
  button:
    - button-name:  # Use hero-content button name here
      button-href:  # Use hero-content url path here
      icon-button-name:  # Use hero-content icon-button name here
      icon-button-href:  # Use hero-content icon-button-url path here
  tag: index  # Use hero-content tag here
    • title: Title for the text column.
    • description: Description text.
    • image: Image for the hero content.
    • iframe: This iframe is used instead of image.
    • button:
      • button-name: Text for the button with background colour.
      • button-href: link for the button with background colour.
      • icon-button-name Text for the icon button.
      • icon-button-href link for the icon button.
    • tag: Tag name is used in page to add the hero content. (Mandatory)
How to add in page
  • It can be used by
    • {% include do-hero-content.html layout="image-left" tag="index" mobile-image-order="top" %}
  • Attributes
    • Tag (Mandatory)
      • Tag is a Mandatory attribute without using tag hero content will not be displayed.
    • Layout (Mandatory)
      • image-left: Image displays on left column.
      • image-right: Image displays on right column.
      • Layout is a Mandatory attribute without using layout hero content will not be displayed.
    • Mobile Image Order
      • top: Image aligned to top of the content in responsive.
      • bottom: Image aligned to the bottom of the content in responsive.

Side Widget

Description

This section displays a variety of information to the right side of web page.

How to add in page
  • It can be used by
    • {% include do-sidewidget.html %}
  • It has been used on page for various layouts on this theme.

File structure

  • A jekyll site consist of these following directories and files.
  • Jekyll directories
    • _data
    • _includes
    • _layouts
    • _posts
    • _sass
    • _site
    • assets
  • Jekyll files
    • _config.yml
    • Gemfile
    • Gemfile.lock

Jekyll Directories

  • _data
    • Well-formatted site data should be placed here. The Jekyll engine will autoload all data files (using either the .yml, .yaml, .json, .csv or .tsv formats and extensions) in this directory, and they will be accessible via `site.data`. If there's a file menu.yml under this directory, then you can access contents of the file through site.data.menu.
    • In order work with this directory you should have a clear knowledge with .yml, .yaml, .json, .csv, .tsv
  • _includes
    • These are the partials that can be mixed and matched by your layouts and posts to facilitate reuse. The liquid tag {% include header.html %} can be used to include the partial in _includes/header.html
    • Includes are very useful and it completly removes code redundancy.
    • With includes one can create a file once and use anywhere without repeating the same blocks of codes.
  • _layouts
    • These are the templates that wrap posts and pages. Layouts are chosen on a post-by-post and page-by-page basis in the front matter. The liquid tag {{ content }} is used to inject content into the web page.
    • This theme has used several layouts for different page structures and post individuals structures.
    • Front Matter
      • Any file that contains a YAML front matter block will be processed by Jekyll as a special file. The front matter must be the first thing in the file and must take the form of valid YAML set between triple-dashed lines. Here is a basic example:
        •   ---
  layout: default
  title: Contact
  ---
  • _posts
    • Your dynamic content, so to speak. The naming convention of these files is important, and must follow the format: YEAR-MONTH-DAY-title.MARKUP. The permalinks can be customized for each post, but the date and markup language are determined solely by the file name.
    • Your post can be organized by directories as categories or tags.
    • These tags, categories and all post values can be provided through post front matter and are displayed with their layouts.
    • Post can be accesed through 'site.posts' variable.
    • Permalinks
      • Permalinks are the output path for your pages, posts, or collections. They allow you to structure the directories of your source code different from the directories in your output.
  • _sass
    • These are sass partials that can be imported into your main.scss which will then be processed into a single stylesheet main.css that defines the styles to be used by your site.
    • All css packages can be combined into a package with this sass directory.
  • _site
    • This is where the generated site will be placed (by default) once Jekyll is done transforming it.
  • assets
    • Assets directory consist of all the css, js, images and other packages for your site.
  • Click here for more information.

Jekyll Files

  • _config.yml
    • Stores configuration data. Many of these options can be specified from the command line executable but it’s easier to specify them here so you don’t have to remember them.
    • Jekyll gives you a lot of flexibility to customize how it builds your site. These options can either be specified in a _config.yml or _config.toml file placed in your site’s root directory, or can be specified as flags for the jekyll executable in the terminal.
  • Gemfile
    • A Gem is a bundle of code which can be include in Ruby projects. This allows us to take someone else’s code and drop it into our own project.
    • Jekyll itself is a Gem as well many Jekyll plugins including jekyll-feed, jekyll-pagination, jekyll-seo-tag and jekyll-archives.
    • A Gemfile is Ruby’s dependency management system or in other words, a list of Gems a Ruby project needs to run. We use Gemfiles on Jekyll sites when we have Jekyll plugins.
    • A Gemfile requires at least one source which tells us where to download the Gems. Unless we have an advanced use case rubygems.org will be fine.
    • Next specify the Gems we’re using. We can include a version number if want a specific version. It’s important to always include Jekyll in our Gemfile.
    • Usually we’d have to also specify our plugin Gems in _config.yml so Jekyll knows about them. We can avoid this by putting our plugin Gems in a “jekyll_plugins” group which Jekyll includes automatically.
  • Gemfile.lock
  • When we create or change a Gemfile, we need to run bundle install which performs two tasks:
    • Creates a Gemfile.lock file if it doesn’t exist. This file is auto-generated and includes all the Gems in Gemfile with the addition of a version number even if it wasn’t specified. This ensures that other people we share the source code to will have the same version of the gems.
    • Downloads the gems in Gemfile.lock.
  • Usually when we run jekyll we’d do something like this:
  • jekyll serve
  • When we’re using a Gemfile we need to run Jekyll slightly differently. We might have multiple versions of the jekyll-feed plugin on our machine and if we run jekyll serve, it might use the wrong version. We can solve this using bundle exec which makes only the Gems in the Gemfile available. For example if we want to run jekyll serve we’d run:
  • bundle exec jekyll serve
  • Click here for more details

Troubleshoot

  • After downloading the package we have run 'jekyll serve' on the terminal to run jekyll server.
  • If you found any errors or bugs run 'bundle install' to update missing gems for jekyll.
  • After doing 'bundle install' it will install all the dependency for the jekyll.
  • Try 'jekyll serve' to run the jekyll server. If any error occurs in dependency files try 'bundle exec jekyll serve'.
  • It will fix the dependencies and run the server.

Campaign - A Political Jekyll Theme.

Instance Theme

Campaign is a Political Jekyll website template.

Thank you for purchasing the theme. We provide support for all of our themes at http://go.scube.co/campaign-js, but please make sure you read this documentation in it's entirety first.

Thanks again!

Scube Themes