Elements

Features

Available as a theme gem and GitHub Pages theme
Simple and elegant design that can be used out of the box or as solid starting point
Tested in all major browsers, including IE and Edge
Built in Service Worker so it can work offline and on slow connections
Configurable colours and typography in a single settings file
Extensive set of shortcodes to include various elements; such as buttons, icons, figure images and more
Solid typographic framework from Sassline
Configurable navigation via a single file
Modular Jekyll components
Post category support in the form of a single post index page grouped by category
Built in live search using JavaScript
Contact form built in using Formspree
Designed with Siteleaf in mind
Has 9 of the most popular networks as performant sharing buttons
Has documentation

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

A small element

A link

Lorem ipsum dolor sit amet, consectetur adip* isicing elit, sed do eiusmod *tempor incididunt ut labore et dolore magna aliqua.

Duis aute irure dolor in A link reprehenderit in voluptate velit esse cillum bold text dolore eu fugiat nulla pariatur. Excepteur span element sint occaecat cupidatat non proident, sunt italicised text in culpa qui officia deserunt mollit anim id some code est laborum.

An item
An item
An item
An item
An item

Item one
Item two
Item three
Item four
Item five

A simple blockquote

Some HTML…

<blockquote cite="http://www.imdb.com/title/tt0284978/quotes/qt1375101">
  <p>You planning a vacation, Mr. Sullivan?</p>
  <footer>
    <a href="http://www.imdb.com/title/tt0284978/quotes/qt1375101">Sunways Security Guard</a>
  </footer>
</blockquote>

…CSS…

blockquote {
  text-align: center;
  font-weight: bold;
}
blockquote footer {
  font-size: .8rem;
}

…and JavaScript

const blockquote = document.querySelector("blockquote")
const bolden = (keyString, string) =>
  string.replace(new RegExp(keyString, 'g'), '<strong>'+keyString+'</strong>')

blockquote.innerHTML = bolden("Mr. Sullivan", blockquote.innerHTML)

Single line of code

HTML Includes

Contact form

{% include site-form.html %}

Demo map embed

{% include map.html id="XXXXXX" title="Coffee shop map" %}

Button include

A button

A button with icon

{% include button.html text="A button" link="https://david.darn.es" %}
{% include button.html text="A button with icon" link="https://twitter.com/daviddarnes" icon="twitter" %}

Icon include

{% include icon.html id="twitter" title="twitter" %}
[{% include icon.html id="linkedin" title="twitter" %}](https://www.linkedin.com/in/daviddarnes)

Video include

{% include video.html id="zrkcGL5H3MU" title="Siteleaf tutorial video" %}

Image includes

{% include figure.html image="https://picsum.photos/600/800?image=894" caption="Image with caption" width="300" height="800" %}

{% include figure.html image="https://picsum.photos/600/800?image=894" caption="Right aligned image" position="right" width="300" height="800" %}

{% include figure.html image="https://picsum.photos/600/800?image=894" caption="Left aligned image" position="left" width="300" height="800" %}

{% include figure.html image="https://picsum.photos/1600/800?image=894" alt="Image with just alt text" %}