Style Guide

Flamed Fury Style guide included for my own reference.

A lot of markdown packages are installed to help write posts. They can be configured in config/plugins/markdown.js.

h2 Heading

h3 Heading

h4 Heading

Skate ipsum dolor sit amet, nose blunt mute-air deck sick. Axle axle set baseplate method air. Steve Caballero coper bail crailtap transition. Nose blunt hip fakie China Banks crail slide. McTwist concave Christ air steps nose-bump. Half-flip quarter pipe rails roll-in.

Mini ramp skate or die yeah Bonite nose blunt.


Typographic replacements

The replacement converts this input:

(c) (C) (r) (R) (tm) (TM) (p) (P) +-
test.. test... test..... test?..... test!....
!!!!!! ???? ,, -- ---
"Smartypants, double quotes" and 'single quotes'

To this:

© © ® ® ™ ™ (p) (P) ±
test… test… test… test?.. test!..
!!! ??? , – —
“Smartypants, double quotes” and ‘single quotes’


This is bold text
This is italic text


Heel flip hanger Skateboarder masonite flail. Nosepicker shoveit dude lipslide. Madonna pivot fakie cab flip camel back. Crail grab masonite cab flip cess slide.


Unordered lists

  • Create a list by starting a line with +, -, or *
  • Sub-lists are made by indenting 2 spaces:
  • Very simple!

Ordered lists

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa


Syntax highlighting is handled by 11ty’s Syntax Highlighting Plugin, a pack of Eleventy plugins for PrismJS syntax highlighting. No browser/client JavaScript, highlight transformations are all done at build-time.

var foo = function (bar) {
  return bar++;

*::after {
  box-sizing: border-box;

body {
  margin: 0;

Edit styles in css/blocks/code.css


Option Description
data path to data files to supply the data that will be passed into templates.
engine engine to be used for processing templates. Handlebars is the default.
ext extension to be used for dest files.

rel="noreferrer noopener" and target="_blank" is added automatically to external links. Edit styles in css/global/global-styles.css

link text
link with title

Autoconverted link (enabled via linkify)


Classic markup: 😉 :crush: 😢 :tear: 😆 😋
Shortcuts (emoticons): 😃 😦 😎 😉


Marked text


Footnote 1 link[1].
Footnote 2 link[2].
Inline footnote[3] definition.
Duplicated footnote reference[2:1].

*[HTML]: Hyper Text Markup Language



Use Eleventy’s build-time image transformations. More info at and edit settings in config/shortcodes/imagePlaceholder.


{% imagePlaceholder "path to image", "alt text", "caption - optional" %}

Image with caption

Alt... a person riding a skateboard on top of a ramp about to pop a kickflip

Caption.. Pop a kickflip!


If there is ever a need to include a YouTube video, Justin Ribeiro’s lite-youtube web component takes care off this. Add youtube: true to frontmatter to activate.


URLs can change over time, pages are moved around or you update your file structure.

A 301 is used when a page has permanently changed location.
Informing about this change is indispensable if you want to keep your incoming links working, be it from organic Google search or other pages that have linked to your content.

Aleksandr Hovhannisyan came up with an elegant solution for Eleventy and Netlify. To directly cover several possible previous routes it is created as an array. You can find the loop in _redirects.njk.


redirectFrom: ['/old-route/', '/optionally-another-old-route/']

  1. Footnotes can have markup
    and multiple paragraphs. ↩︎

  2. Footnote text. ↩︎ ↩︎

  3. Text of inline footnote ↩︎