--- title: "Welcome to OneFlow Jekyll Theme" layout: page permalink: / header: overlay_image: /assets/images/header.webp overlay_filter: rgba(0, 0, 0, 0.6) actions: - label: "Get Started" url: https://github.com/perstarke-webdev/oneflow-jekyll-theme?tab=readme-ov-file#oneflow-jekyll-theme blank: true - label: "Minimal Mistakes, the base for this theme" url: https://github.com/mmistakes/minimal-mistakes blank: true caption: "Photo by **[Alexandros Margo Photography](https://www.instagram.com/alexandrosmargo?igsh=eHl2cGx0amVocmJi)**" excerpt: "**Crafting effortless One-Pager Websites**" gallery: - url: /assets/images/header.webp image_path: /assets/images/header.webp alt: "placeholder image 1" title: "Image 1 title caption" - url: /assets/images/sydney-2.webp image_path: /assets/images/sydney-2.webp alt: "placeholder image 2" title: "Image 2 title caption" - url: /assets/images/sydney-3.webp image_path: /assets/images/sydney-3.webp alt: "placeholder image 3" title: "Image 3 title caption" round-images: - image-path: "/assets/images/header.webp" size: "full" header: "Header 1" caption: "Caption 1" - image-path: "/assets/images/sydney-2.webp" size: "third" header: "Header 2" caption: "Caption 2" - image-path: "/assets/images/sydney-3.webp" size: "third" header: "Header 3" caption: "Caption 3" - image-path: "/assets/images/sydney-4.webp" size: "third" header: "Header 4" caption: "Caption 4" - image-path: "/assets/images/sydney-5.webp" size: "half" header: "Header 5" caption: "Caption 5" - image-path: "/assets/images/sydney-6.webp" size: "half" header: "Header 6" caption: "Caption 6" image-text-row: - header: "Image-Text-Row" excerpt: "This is an image-text-row" image-url: "/assets/images/header.webp" alt-text: "Alternative text for the image" image-width: "400px" image-right: false image-text-row-two: - header: "Image-Text-Row" excerpt: "This is an image-text-row with the image on the right (on large enough screens) and a little bit longer text plus a button" btn-url: "#" btn-class: "info" btn-label: "A button" blank: false image-url: "/assets/images/sydney-2.webp" alt-text: "Alternative text for the image" image-width: "400px" image-right: true ---

This is OneFlow Jekyll Theme. Section 1, in alternative color

Practical Design

With its practical design and intuitive layout, OneFlow offers a seamless user experience for showcasing your content.

Theme Example Website One Theme Example Website Two Also check out the Homepage Canvas

Open-Source & free to use

OneFlow is licensed under the MIT License. That means, you can freely copy, use and customize it - whatever you like!

Drop in galleries, round images or image-text-rows

Gallery

{% include gallery caption="Gallery captions, just like the rest of the theme, **support Markdown**"%}

Round Images

{% include round-images %}

Image-Text-Rows

{% include image-text-row %}
{% include image-text-row id="image-text-row-two" %}

Responsive Video Embed

{% include video id="xTo8Q9asVfc" provider="youtube" %}

This is OneFlow Jekyll Theme. Section 2, in normal color

Utilities

Notices

Notice

This is a notice. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Primary Notice

This is a pirmary notice. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Success Notice

This is a success notice. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Warning Notice

This is a warning notice. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Danger Notice

This is a danger notice. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Info Notice

This is an info notice. Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Boxes of different sizes in a container

Box

Text in a box

Primary Box

Text in a box

Success Box

Text in a box

Warning Box

Text in a box

Danger Box

Text in a box

Info Box

Text in a box


Buttons

Primary Button Success Button Warning Button Danger Button Info Button Inverse Button

Extra Large Button Large Button Default Button Small Button

This is OneFlow Jekyll Theme. Section 3

Easy customization

Color skins

OneFlow offers various color skins, easily settable in the _config.yml file.

Masthead

The masthead is set to sticky, so it always stays visible. You can easily change that in the _config.yml file.
You can also set the opacity of the masthead there.
Of course, the navigation links also can easily be changed, in /_data/navigation.yml.
The masthead can show your logo, the site title or the site title + a subtitle.

Footer

The links, copyright and creator in the footer can easily be set in the _config.yml file.

Custom stylesheet, custom fonts

Add your own styles in /assets/css/custom-styles.css, and easily apply any font you want.

Cookie / cdn-usage consent banner

OneFlow comes with a build-in popup banner that you can easily turn on and off plus customize to suit your needs. The existing version of the popup is a suggestion and should (no legal advice given) fulfill german laws regarding cookie and cdn-usage consent.

This is OneFlow Jekyll Theme. Section 4

Easy local build with docker

OneFlow comes with build-in docker configuration using BretFisher's jekyll serve. Just open up a terminal, navigate to your site and run docker-compose up. Easy as that.

Client editables

{% include /editables/editables.html %}

HTML and Markdown

Use raw and flexible HTML or clear markdown to write your content. Markdown is rendered with kramdown, which supports applying css classes to the Markdown. That means, you can add notices, boxes and other utilities even to your Markdown content, as simple as "Text you want to add the classes to {: .class1 .class2}".

Icons with Font Awesome

Add icons anywhere, using Font Awesome. Locally hosted and directly build into OneFlow, ready to be applied.

Responsive design

All of OneFlows features are 100% responsive and adapt to different screen sizes, so your site looks good on all devices!