Yolo

Yolo is laser focused on static single page sites, and while anyone can Yolo, it’s purposely built for writers, techies, and picture taking folk.

I don’t always use single-page sites but when I do, I yolo.

Goals for Yolo

1. Live the best single page life.

Pamper single page sites like we pamper our pets.

2. Strive for simplicity.

No dependencies other than jekyll.

3. Make it customizable

Bring your own colors and fonts.

Table of Contents

↑↑↑

Getting Started

You need jekyll.

git clone https://github.com/corbtastik/yolo.git
cd yolo
jekyll build
jekyll serve

↑↑↑

Themes

Yolo doesn’t implement an “according to hoyle” gem based theme, but the colors and fonts can be customized as outlined below.

Note: “Theming” for Yolo is accomplished by providing a custom scss file in _sass/yolo/themes. Each theme must specify “light” and “dark” values to support switching between the two modes.

1. Create a new scss file for your theme.

# Use whatever NAME you like
make theme NAME=domino

2. Customize the theme values.

Color properties:

Font family properties:

Note: Add font-family in _data/fonts.yml to customize what fonts are available.

Theme file:

$light-primary-color: #fff;
$light-secondary-color: #000;
$light-accent-color: #383838;
$light-code-background-color: #fff;
$light-code-color: #000;
$light-link-color: #2196f3;
$light-sidebar-color: #fff;

$dark-primary-color: #000;
$dark-secondary-color: #fff;
$dark-accent-color: #b3b2b2;
$dark-code-background-color: #000;
$dark-code-color: #fff;
$dark-link-color: #2196f3;
$dark-sidebar-color: #000;

$family-primary: "Open Sans", sans-serif;
$family-secondary: "Raleway", sans-serif;
$family-monospace: "Inconsolata", monospace;

3. Enable by setting site.style in _config.yml.

# Site customizations
style: domino

That’s it, run Yolo and adjust colors to your liking.

↑↑↑

Colors

Yolo’s colors can be customized as outlined in Yolo Themes.

↑↑↑

Typography

Yolo’s fonts can be customized as outlined in Yolo Themes.

Three families

• Primary Font Family - body and most text
• Secondary Font Family - headers and accent text
• Monospaced Font Family - code

Primary

• This is-size-7 text.
• This is-size-6 text.
• This is-size-5 text.
• This is-size-4 text.
• This is-size-3 text.
• This is-size-2 text.
• This is-size-1 text.

Secondary

• This is-size-7 text.
• This is-size-6 text.
• This is-size-5 text.
• This is-size-4 text.
• This is-size-3 text.
• This is-size-2 text.
• This is-size-1 text.

Monospace

• This is-size-7 text.
• This is-size-6 text.
• This is-size-5 text.
• This is-size-4 text.
• This is-size-3 text.
• This is-size-2 text.
• This is-size-1 text.

↑↑↑

Elements

• Headers
• Paragraph Text
• Blockquotes
• Inline Text
• Code
• Lists
• Tables
• Markdown Images
• Videos
• Prezos

↑↑↑

Headers

H1 is reserved for the site header and not shown here.

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

↑↑↑

Paragraph text

Baseball is a bat-and-ball sport played between two teams of nine players each, taking turns batting and fielding. The game is in play when a player on the fielding team, called the pitcher, throws a ball that a player on the batting team tries to hit with a bat. The objective of the offensive team (batting team) is to hit the ball into the field of play, away from the other team’s players, allowing its players to run the bases, having them advance counter-clockwise around four bases to score what are called “runs”. - copied from Wikipedia.

↑↑↑

Blockquotes

Single Blockquote

In the United States and Canada, professional Major League Baseball (MLB) teams are divided into the National League (NL) and American League (AL), each with three divisions: East, West, and Central. The MLB champion is determined by playoffs that culminate in the World Series.

Two paragraph Blockquote

A baseball game is played between two teams, each usually composed of nine players, that take turns playing offense (batting and baserunning) and defense (pitching and fielding).

The game is played on a field whose primary boundaries, the foul lines, extend forward from home plate at 45-degree angles. The 90-degree area within the foul lines is referred to as fair territory; the 270-degree area outside them is foul territory.

Nested Blockquote

The number of players on a baseball roster, or squad, varies by league and by the level of organized play. A Major League Baseball (MLB) team has a roster of 25 players with specific roles. A typical roster features the following players:

Eight position players: the catcher, four infielders, and three outfielders—all of whom play on a regular basis.

Most baseball leagues worldwide have the DH rule.

Blockquote w/ markdown

Baseball Statistics

1. At Bats: Plate appearances, excluding walks and hit by pitches.
2. Hits: Number of times a base is reached safely.
3. Runs: Number of times runners reach home safely.
4. RBIs: Number of runners who scored due to a batter’s action.
5. Home Runs: Hits where the batter touches all four bases safely.
6. Batting Average: Hits divided by at bats.

↑↑↑

Inline Text

• Just plain text
• Bold text
• Italicize text
• Abbr (abbreviation)
• Citation
• Deleted
• Underlined
• Superscript ^text
• Subscript _text
• Inline code SELECT * FROM players;

↑↑↑

Code

Tip: Click header to copy a snippet.

#!/bin/bash
function say_howdy() {
  echo "Howdy $1!"
}

if [ $# -ne 1 ]; then
    echo "Usage: Howdy <NAME>"
    exit 1
fi

# Say Howdy
say_howdy $1

↑↑↑

#include <stdio.h>
// Say Howdy
int main(int argc, char **argv) {
    if(argc != 2) {
        printf("Usage: Howdy <NAME>");
        return 1;
    }
    printf("Howdy %s!\n", argv[1]);
    return 0;
}

↑↑↑

#include <iostream>
using namespace std;

int main(int argc, char** argv) {
    if(argc != 2) {
        cout << "Usage: Howdy <NAME>";
        return 1;
    }
    cout << "Howdy " << argv[1];
    return 0;
}

↑↑↑

import 'dart:io';
// Say Howdy
void main(List<String> args) {
    exitCode = 0;
    if(args.length != 1) {
        stdout.writeln("Usage: Howdy <NAME>");
        exitCode = 1;
        return;
    }
    stdout.writeln("Howdy ${args[0]}!");
}

↑↑↑

package main

import (
    "os"
    "fmt"
)

// Say Howdy
func main () {
    if len(os.Args) != 2 {
        fmt.Println("Usage: Howdy <NAME>")
        os.Exit(1)
    }
    fmt.Println("Howdy " + os.Args[1] + "!")
    os.Exit(0)
}

↑↑↑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Howdy!</title>
</head>
<body>
    <h1>Howdy from an HTML page!</h1>
</body>
</html>

↑↑↑

{
  "apiVersion": "v1",
  "kind": "Service",
  "metadata": {
    "name": "minio-server-lb",
    "namespace": "minio",
    "labels": {
      "app/name": "minio"
    }
  },
  "spec": {
    "ports": [{
        "port": 9000,
        "targetPort": 9000,
        "protocol": "TCP"
      }],
    "selector": {
      "app/name": "minio",
      "app/component": "backend"
    },
    "type": "LoadBalancer"
  }
}

↑↑↑

// Say Howdy
public class Howdy {
    public static void main(String[] args) {
        if(args.length != 1) {
            System.out.println("Usage: Howdy <NAME>");
            System.exit(1);
        }
        System.out.println("Howdy " + args[0] + "!");
    }
}

↑↑↑

function sayHowdy(name) {
    console.log("Howdy " + name + "!");
}

if(process.argv.length != 3) {
    console.log("Usage: Howdy <NAME>");
    process.exit(1);
}

// Say Howdy
sayHowdy(process.argv[2]);

↑↑↑

// Say Howdy
fun main(args: Array<String>): Int {
    if(args.size != 1) {
        println("Usage: Howdy <NAME>")
        return 1
    }
    println("Howdy " + args[0] + "!")
    return 0
}

↑↑↑

# Markdown

* __Howdy__
* _from_
* <ins>a</ins>
* [Markdown](https://en.wikipedia.org/wiki/Markdown)
* `document`!

↑↑↑

import sys

def sayHowdy(name):
    print("Howdy " + name + "!")

if len(sys.argv) != 2:
    print("Usage: Howdy <NAME>")
    sys.exit(1)

# Say Howdy
sayHowdy(sys.argv[1])

↑↑↑

.light-theme {
  color: $light-secondary-color;
  background-color: $light-primary-color;
  font-family: $family-primary;

  a {
    color: $light-link-color;
  }

  h1, h2, h3, h4, h5, h6 {
    color: $light-accent-color;
    font-family: $family-secondary, sans-serif;
  }
}

↑↑↑

-- Select orders for micky
SELECT *
FROM orders
WHERE cust_id = "mickey@mouse.com"
AND   price > 5000
AND   price <= 10000

↑↑↑

apiVersion: v1
kind: Service
metadata:
  name: minio-server-lb
  namespace: minio
  labels:
    app/name: minio
spec:
  ports:
    - port: 9000
      targetPort: 9000
      protocol: TCP
  selector:
    app/name: minio
    app/component: backend
  type: LoadBalancer

↑↑↑

Lists

Unordered

• Arlington Stadium
• Rangers Ballpark in Arlington

• Ebbets Field

• Boston Red Stockings
  • Boston Red Caps
    • Boston Beaneaters
      • Boston Red Sox

Ordered

1. Babe Ruth
2. Willie Mays
3. Dale Murphy
4. Mookie Wilson

↑↑↑

Tables

Basic

See: Github markdown tables

Formatted content

Cell alignment

↑↑↑

Markdown Images

Images added via markdown receive styling from the <img> element, they’re not styled with yolo classes.

![Moonie Moonpie](assets/images/moonpie.png "Sweet Moonpie")
![BIG yawn Bucky](assets/images/bucky.png "Sleepy Bucky")

↑↑↑

Styled Images

You can use yolo Styled Images in addition to markdown images if you’re looking for a little eye-candy. Yolo includes support for common aspect ratios, an image-grid and image-lightbox.

• Thumbnail Images
• Square Images
• Circle Images
• 4-by-3 Images
• 3-by-4 Images
• 16-by-9 Images
• 9-by-16 Images

Thumbnail Images

Thumbnails are 128px x 128px and use the thumbnail class.

{%
  include image/image.html
  classes="thumbnail"
  src="https://storage.googleapis.com/corbs-foto/yolo/yolo/big-face-bucky.png"
%}

Tip: Click to enlarge.

↑↑↑

Square Images

Square images can be added with the following classes: is-16, is-24, is-32, is-48, is-64, is-96, is-128, is-192, is-256, is-384, is-448, is-512, is-640.

{%
  include image/image.html
  classes="image is-256"
  src="https://storage.googleapis.com/corbs-foto/yolo/yolo/drive-in.png"
%}

Tip: Click to enlarge.

↑↑↑

Circle Images

Circle images can be added with the following classes: is-circle-16, is-circle-24, is-circle-32, is-circle-48, is-circle-64, is-circle-96, is-circle-128, is-circle-192, is-circle-256, is-circle-384, is-circle-448, is-circle-512, is-circle-640.

{%
  include image/image.html
  classes="is-circle-256"
  src="https://storage.googleapis.com/corbs-foto/yolo/yolo/big-face-bucky.png"
%}

Tip: Click to enlarge.

↑↑↑

4-by-3 Images

4 by 3 aspect ratio images can be added with the following classes: is-100-by-75, is-120-by-90, is-128-by-96, is-160-by-120, is-200-by-150, is-240-by-180, is-256-by-192, is-320-by-240, is-400-by-300, is-480-by-360, is-512-by-384, is-640-by-480.

{%
  include image/image.html
  classes="image is-256-by-192"
  src="https://storage.googleapis.com/corbs-foto/yolo/yolo/bluebonnet.png"
%}

Tip: Click to enlarge.

↑↑↑

3-by-4 Images

3 by 4 aspect ratio images can be added with the following classes: is-75-by-100, is-90-by-120, is-96-by-128, is-120-by-160, is-150-by-200, is-180-by-240, is-192-by-256, is-240-by-320, is-300-by-400, is-360-by-480, is-384-by-512, is-480-by-640.

{%
  include image/image.html
  classes="image is-240-by-320"
  src="https://storage.googleapis.com/corbs-foto/yolo/yolo/bluebonnet.png"
%}

Tip: Click to enlarge.

↑↑↑

16-by-9 Images

16 by 9 aspect ratio images can be added with the following classes: is-112-by-63, is-128-by-72, is-144-by-81, is-160-by-90, is-192-by-108, is-224-by-126, is-256-by-144, is-320-by-180, is-400-by-225, is-480-by-270, is-512-by-288, is-640-by-360.

{%
  include image/image.html
  classes="image is-256-by-144"
  src="https://storage.googleapis.com/corbs-foto/yolo/yolo/bluebonnet.png"
%}

Tip: Click to enlarge.

↑↑↑

9-by-16 Images

9 by 16 aspect ratio images can be added with the following classes: is-63-by-112, is-72-by-128, is-81-by-144, is-90-by-160, is-108-by-192, is-126-by-224, is-144-by-256, is-180-by-320, is-225-by-400, is-270-by-480, is-288-by-512, is-360-by-640.

{%
  include image/image.html
  classes="image is-225-by-400"
  src="https://storage.googleapis.com/corbs-foto/yolo/yolo/bluebonnet.png"
%}

Tip: Click to enlarge.

↑↑↑

Image Grid

The Image Grid is similar to the Lightbox, except it shows images inline, instead of in a modal.

Tip: Click an image to enlarge, click again to minimize.

• Add image data into _data/ig-images.yml.
• Include image/grid.html on your page.

Default data file

The _data/ig-images.yml file is the default data file, just replace with your data to display images.

{% include "image/grid.html" %}

Greetings from Marfa, Texas!

Welcome to Marfa!

Presidio County Courthouse.

Hotel Paisano at nite, what a beauty.

Golden range outside of Marfa, TX.

Cotton candy dipped cone at DQ in Marfa.

The Get Go, get in, get go, Marfa TX.

Stardust Motel sign, Marfa TX.

Tumbleweed gonna tumble.

Hotel Paisano courtyard from our room.

The ole silver Marfa water tower.

Big sky, Marfa TX.

Custom data file

A custom data file can be added to create an Image Grid.

• Create a new file in _data/ and prefix name with ig-.
• Use the data file name (w/o .yml ext) as the value to ig-data.
• Customize the number of columns by setting ig-columns.

{% include image/grid.html ig-data="ig-pets" ig-columns="2" %}

Texas Ranger Bucky.

R.I.P. Nachooooooo!!!

Moonpie the house kitty, we see your poochie poo!

Bucky itches his nose.

↑↑↑

Image Lightbox

Yolo includes a Lightbox to showcase pics.

Tip: Click an image to open Lightbox, click left or right, key < or > to move.

• Add image data into _data/lb-images.yml.
• Include image/lightbox.html on your page.

Default data file

The _data/lb-images.yml file is the default Lightbox data file, just replace with your data to display images.

{% include image/lightbox.html %}

×

❮ ❯

Custom data file

A custom data file can be added to create a Lightbox.

• Create a new file in _data and prefix name with lb-.
• Use the data file name (w/o .yml ext) as the value to lb-data.

{% include image/lightbox.html lb-data="lb-marfa" %}

×

❮ ❯

↑↑↑

Videos

↑↑↑

Prezos

Yolo has basic support for embedding Google Slides.

• Enter prezo data into _data/prezos.yml
• Include prezo.html on your page.
• Set title value to match prezo in _data/prezos.yml.
• By default, prezos are displayed with a is-16-by-9 aspect ratio.
• Optionally set aspect-ratio to is-16-by-9, is-4-by-3, or is-1-by-1.

Sample 1

{% include prezo.html title="blinged-macmini" %}

Aspect ratio is-16-by-9.

A blinged out Mac Mini development box.

Sample 2

{% include prezo.html title="one-awesome-prezo" aspect-ratio="is-4-by-3" %}

Aspect ratio is-4-by-3.

One Awesome Prezo!

Sample 3

{% include prezo.html title="yolo-on" aspect-ratio="is-1-by-1" %}

Aspect ratio is-1-by-1.

Get ya some Yolo!

↑↑↑

Containers

This section “contains” information on building and running your single page Yolo site as a container.

The project Makefile includes targets for building a container with podman.

Tools

• Podman
• Make (optional but recommended)

Two container images are built using the Makefile.

• The first is yoloc which is a “builder” image, to “build” your site.
• The second is yolo, to “run” your site.

yoloc

Yoloc is a “builder” image based on ubi8-minimal, with the following packages added:

• gcc
• gcc-c++
• make
• ruby
• ruby-devel
• jekyll

Yoloc isn’t a runtime image, meaning it doesn’t run a server process, it’s a build time image, with the tooling needed to run jekyll build. The output _site will be passed to the yolo container, where it’s served by apache httpd.

yolo

The Yolo image is a runtime image based on ubi8-minimal, with apache httpd installed. Your yolo _site is configured in /var/www/html where it’s served by apache on port 9696.

Building and running

# First build yoloc
podman build -f ./src/yoloc.Containerfile -t yoloc:latest ./src

# Then build yolo
podman build -f Containerfile -t yolo:latest .

# Now run and access on http://localhost:9696
podman run --name yolo -d -p 9696:9696 yolo:latest

The Makefile automates the build and run process, with make yolo-pod, which:

• Creates the yoloc image.
• Uses yoloc to build your _site.
• Creates the yolo image to run your site.
• Starts a yolo container from the yolo image, on http://localhost:9696.

# Build and run with make
make yolo-pod

↑↑↑

Thanks

I’m a developer by trade with roots in C and Java. I once read something like - “write code every day” and although I haven’t, I like to try. I enjoy frontend development but consider myself a hack. I get by, but get by with a little help from my friends.

Many thanks for these resources and the folks behind them.

w3schools

When I want an unvarnished take on HTML, CSS, and Javascript I go to w3schools. That and every time I google for frontend related stuff w3schools comes up. Great reference material, some of which guided the Yolo Lightbox implementation.

Sanks w3schools people.

Solo

Years ago I googled “minimal jekyll theme”, which led me to Solo. It was exactly what I was looking for, simple to get started and customize. Not to mention there’s a quirky beauty in its look. Over the years I’ve used Solo for single page “technical” docs.

Yolo is cut from the cloth of “Solo” which was previously developed by Shu Uesugi.

Well done Shu Uesugi, sanks amigo.

Bulma

“The modern CSS framework that just works”, true dat. Bulma is not included as a library, but Yolo contains slightly modified scss from select areas, namely flexbox, typography and image styling. For my tastes Bulma is the best css framework, they be awesome yo.

Sanks Bulma people.

↑↑↑

License

MIT License (MIT)

Copyright (c) 2022 Corbs

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

↑↑↑