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 4. Simplifying the process of building out static pages. This keeps content pages clean from HTML and also means pages are easily edited with a CMS such as NetlifyCMS.

Page Jumbotron Headers

Custom page headers can be added to pages that using the flow layout. You can display one of either a Slider Header (using owl-carousel), a background image header, breadcrumb header or a standard jumbotron header. Complete examples of these are listed below:

Slider Header

jumbotron:
  class: home # Applied to the jumbotron itself
  inner_class: dotted # Applied to the each slides container.
  # List of the slides to display
  slider:
    - title: A feature-packed Jekyll theme # Title displayed as a h1 heading
      inner-image: /assets/images/your-inner-image.png # An image to be added above the main title.
      # Description text to be displayed on the slider
      description: >
        Your slides description
      title-class: big-title # Class applied to the heading
      image: /assets/images/test/background-image1.jpg # The background image to be used for the slider item
      # A list of "call to action" buttons to be displayed on your slide
      buttons:
        - title: View on GitHub
          url: https://github.com/linaro-marketing/jumbo-jekyll-theme
          icon: fa fa-github
    - title: Slide 2
      description: ""
      slide-style: "background-position-y: bottom;"
      # Same as the above slider example...

Background Image Header

jumbotron:
  class: text-center # Applied to the jumbotron itself
  inner_class: dotted # Applied to the each slides container.
  title: A feature-packed Jekyll theme # Title displayed as a h1 heading
  # Description text to be displayed on the slider
  description: >
    Your slides description
  image: /assets/images/test/background-image1.jpg # The background image to be used for your header.
  buttons:
    - title: View on Github
      icon: icon-github
      class: test
      url: https://github.com

Standard Header with no background image

jumbotron:
  class: text-center # Applied to the jumbotron itself
  inner_class: dotted # Applied to the each slides container.
  title: A feature-packed Jekyll theme # Title displayed as a h1 heading
  # Description text to be displayed on the slider
  description: >
    Your slides description
  buttons:
    - title: View on Github
      icon: icon-github
      class: test
      url: https://github.com

Breadcrumb Header

For a breadcrumb header simply set breadcrumb: true in your page's front matter.

breadcrumb: true

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

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
image	Used to add a content image. Images are optimized for web using the jekyll_picture_tag plugin.
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_include	Takes source 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.
tabs	Outputs a bootstrap 4 tab panel
collapse	Outputs a bootstrap 4 collapse panel - ideal for FAQ etc

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
    style: text-center # class to be applied to the surrounding column
    title_content:
      style: display-3 # class to be applied to the heading tag
      size: h2 # Size of the heading e.g h1, h2, h3, h4, h5
      text: Your Centered Heading

members

This section adds an inline image row. Usually good for displaying current clients/members or your organisation/service.

Below is an example of a members section.

Settings	Example	Limitations
style	zoom grayscale	The zoom style adds a css transformation on hover adding a zoom effect. grayscale adds a grayscale filter and on hover the filter is removed.
members_content.items	see below	Contains an array of members (see below for an example)
members_content.item_width	3	This value is used to determine the col-sm- size. You can use any of the bootstrap defaults and 5ths
data_source	members-section-example	Takes the name of a Jekyll data file and requires the same format as under content (shown below in example)

- format: members
  #data_source: members-section-example
  style: zoom grayscale
  members_content:
    item_width: "3" #bootstrap col-sm- value e.g 3, 4, 5ths etc
    items:
      - name: Arm
        image:
          path: https://event.linaro.org/assets/images/sponsors/arm.jpg
          alt: Arm Logo
        url: https://github.com/linaro-marketing/jumbo-jekyll-theme
      - name: Packet
        image:
          path: https://event.linaro.org/assets/images/sponsors/packet.png
          alt: Packet Logo
        url: https://github.com/linaro-marketing/jumbo-jekyll-theme
      - name: Qualcomm Logo
        image:
          path: https://event.linaro.org/assets/images/sponsors/qualcomm.jpg
          alt: Qualcomm Logo Logo
        url: https://github.com/linaro-marketing/jumbo-jekyll-theme
      - name: Cannonical
        image:
          path: https://event.linaro.org/assets/images/sponsors/canonical.png
          alt: Cannonical Logo
        url: https://github.com/linaro-marketing/jumbo-jekyll-theme

block

This section allows you to add content blocks to list out key features / items as you wish. You can specify a custom width for your blocks, background image, url and more.

Settings	Example	Limitations
style	zoom grayscale	Add a css class to your block section
block_section_content.blocks	see below	Contains an array of blocks (see below for an example)
block_section_content.item_width	3	This value is used to determine the col-sm- size. You can use any of the bootstrap defaults and 5ths

sections:
  - format: block
    style: text-center text-white
    block_section_content:
      item_width: "4"
      blocks:
        # Repeat this section for each of your blocks
        # Title for your block element
        - title:
            # Size of your title
            size: "h3"
            # Text content for your title
            text: Block 1
          # Optional - Url used for anchor tag wrapping block.
          url: /about/
          # Optional - background image to be used for your block
          background_image: /assets/images/content/background-image1.jpg
          # Optional - text for your block element.
          text_content:
            text: >
              See our photos from event.
          # Optional - add bootstrap buttons to your block.
          buttons:
            # Repeat this section for each of your buttons if you have more than one.
            - title: More Details # Required - button title (text) .
              url: /flow/ # Required - button url
              icon: fa fa-arrow-right # Optional - add an icon element to your button this is the css class used.
              style: btn-primary # Optional - specifiy a class for your button. Defaults to btn-primary

image

The image section allows you to add a single content image to your page using the jekyll_picture_tag plugin to output web optimized picture tags with webp image format support.

sections:
  - format: image
    #style: #optional style for your image section
    alt: Your Image alt tag # required - alt tag for your image.
    size: 8 # optional - column size (centered) e.g a size of 8 will add your image to a col-sm-8 div with an offset of 2 to ensure it's centered.
    path: /assets/images/breadcrumb-image.jpg #requried - the full path to your image.

buttons

This section adds a bootstrap column with the buttons you provide. Great channeling users to another page (call to action etc).

sections:
  - format: buttons
    style: text-center # specify custom css classes to use
    buttons_content:
      # Repeat this section for each of your buttons if you have more than one.
      - title: More Details # Required - button title (text) .
        url: /about/ # Required - button url
        icon: fa fa-arrow-right # Optional - add an icon element to your button this is the css class used.
        # Optional - specifiy a class for your button. Defaults to btn-primary
        class: btn-danger

text

Adds the specified text to a bootstrap column. Your text content can use markdown formatting as the markdownfiy Jekyll filter is applied to text content.

sections:
  - format: text
    style: text-center # Optional css class to applied to section
    text_content:
      text: Some block of text to describe _something_ about such and such...

custom_include

This section adds your custom Jekyll include to a boostrap container.

sections:
  - format: custom_include
    source: custom_include.html

slider

This section allows you to easily add a slider (or carousel) to your page. The following settings can be used to add a new slider.

sections:
  - format: slider
    style: newSlider #optional css class to apply to the encapsulating bootstrap column
    slider_content:
      lightbox_enabled: true
      seconds_per_slide: 5
      nav: true
      dots: false
      xs_items: 1
      sm_items: 3
      md_items: 6
      lg_items: 9
      # Content for the slider
      # Optional name of the data file to use for the slider source
      # data_source: example-carousel-data-source
      # A list of slider items
      items:
        # Image for the slider item
        - image: /assets/images/content/background-image1.jpg
          # Alt tag to use on the img element
          alt: Background Image
          # Title to use in conjunction with the slider item
          # This will add a bootstrap tooltip to the slider item containing the specified title.
          title: Background Image 1
        - image: /assets/images/content/background-image2.png
          alt: Background Image
          title: Background Image 1
        - image: /assets/images/content/background-image3.jpg
          alt: Background Image
          title: Background Image 1

feature_block

The feature_block section adds unique content section divided into 7 (image or slider )/ 5 (text content) column widths. You can also toggle the position of the media (image/video) to alternate the position for repeated feature_blocks. See below for an example of a feature_block.

Below is a commented example of the featureblock section of your flow page _frontmatter.

sections:
  - format: feature_block
    style: text-center text-white
    feature_block_content:
      # Position of your featured content. "left" or "right"
      position: "left"
      # Optional - specify a youtube video url to be used as featured content
      # type: "youtube_video"
      # video_content_url: https://www.youtube.com/watch?v=QH2-TGUlwu4
      # Optional - specify an image to be used as featured content
      # type: "image"
      # image_content_path: /assets/images/content/background-image1.jpg
      # Optional - add an images slider to be used as featured content
      type: "slider"
      # Slider content - see the slider section details for more information on adding slider's
      slider_content:
        lightbox_enabled: true
        seconds_per_slide: 5
        nav: true
        dots: false
        xs_items: 1
        sm_items: 1
        md_items: 1
        lg_items: 1
        items:
          - image: /assets/images/content/background-image1.jpg
            alt: Background Image
            title: Background Image 1
          - image: /assets/images/content/background-image2.png
            alt: Background Image
            title: Background Image 1
          - image: /assets/images/content/background-image3.jpg
            alt: Background Image
            title: Background Image 1
          - image: /assets/images/content/background-image1.jpg
            alt: Background Image
            title: Background Image 1
          - image: /assets/images/content/background-image2.png
            alt: Background Image
            title: Background Image 1
          - image: /assets/images/content/background-image3.jpg
            alt: Background Image
            title: Background Image 1
          - image: /assets/images/content/background-image1.jpg
            alt: Background Image
            title: Background Image 1
          - image: /assets/images/content/background-image2.png
            alt: Background Image
            title: Background Image 1
          - image: /assets/images/content/background-image3.jpg
            alt: Background Image
            title: Background Image 1
      title: Feature Block
      text: >
        A feature block with a youtube video.
      buttons:
        - title: Button 1
          url: /about/
          style: btn-primary
        - title: Button 2
          url: /about/
          style: btn-primary

tabs

sections:
  - format: tabs
    style: #
    tabs:
      - title: Test
        content: |
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

          > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis > nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore > eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

          - Test
          - Test
          - Test

          This is some more [content](/).
      - title: Test 2
        content: |
          This is some test tab content. 2

          - Test

          - Test

          - Test

          This is some more [content](/).
      - title: Test 3
        content: |
          This is some test tab content. 3

          - Test
          - Test
          - Test

          This is some more [content](/). 3

collapse

sections:
  - format: collapse
    style: #
    panels:
      - title: Test Panel Title
        content: |
          ## Test Panel Content

          Some other text

          - Bullet 1
          - Bullet 2
          - Bullet 3
      - title: Test Panel Title 2
        content: |
          ## Test Panel Content 2

          Some other text

          - Bullet 1
          - Bullet 2
          - Bullet 3