AddingPages

Adding Pages to your site

Adding a page to your static website couldn't be simpler with the help of the flow.html Jekyll layout that this theme provides. The layout allows you to choose from multiple content rows/sections built with bootstrap 3. Simplifying the process of building out static pages. This keeps content pages clean from HTML and also means pages are easily edited with a Jekyll CMS such as CloudCannon

Rows

There are multiple row types that you can utilise when structuring your page.

Row Types	Description
main_content_row	Outputs your pages' main content inside of a bootstrap 3 container
container_row	Outputs your sections inside of a bootstrap container
full_width_row	Outputs your sections in a fluid container
custom_include_row	Allows you to specify a Jekyll include to be used as a row

Rows in depth

main_content_row

This row can be used to output the main content of your markdown file (the page content below the frontmatter ---). Your page content is added to a boostrap container.

flow:
    - row: main_content_row

The above yaml (frontmatter) will add your page content (page.content) to it's own bootstrap row inside of a bootstrap container.

container_row

This row type will output your sections inside of a bootstrap 3 container.

flow:
    - row: container_row
      sections: 
        ...

full_width_row

This row type will output your sections inside of a container-fluid bootstrap container.

flow:
    - row: full_width_row
      sections: 
        ...

custom_include_row

This row type allows you to include your own custom section with ease. Your custom include is added to a bootstrap 3 container-fluid container

flow:
    - row: full_width_row
      sections: 
        ...

Sections

Each row can contain multiple sections. These sections are described below.

Section Type	Description
title	Outputs a title section.
members	Outputs a typical members section.
block	Outputs a block row. Closest core bootstrap 3 element is a panel. Closest Bootstrap 4 element would be a card element
buttons	Outputs the array of bootstrap 3 buttons provided. A custom icon/title/url can also be provided.
text	Outputs a text column for a block of text in a section.
custom	Takes include_name which is the filename of a jekyll include
slider	Outputs an owlCarousel based slider based on either a source _data file or an array of items in the slider.
feature_block	Outputs a text/image or slider feature block. The image/slider is placed inside of a col-sm-7 bootstrap 3 column and can pe positioned either to the left or right using the push/pull utility classes.

Sections in-depth

Each section is rendered inside it's own bootstrap col-xs-12 column (with the exception of the custom section as it depends on the content of your custom jekyll include). The order your sections are added to the row's items" array is the order they are displayed on your page. Below is a break down of each section type with an example of the frontmatter options you can utilise.

title

This section simplifies the addition of a title in your content row. Provide a size, text content and an optional css class (css classes are applied to the bootstrap column).

    sections:
    ...
        - format: title
          size: h2
          content: Block Row
    ...

members

block

buttons

text

custom

slider

feature_block