Style Guide

At Aspire Themes I use a lot of tools to help me create WordPress, Ghost and Jekyll themes. Tools will range from development, design, services, hosting and automation.

Graphic design is the paradise of individuality, eccentricity, heresy, abnormality, hobbies, and humors. — George Santayana.


Simple default styles for headings

Simple default styles for headings

Simple default styles for headings

Simple default styles for headings

Simple default styles for headings
Simple default styles for headings

  • Ut at interdum nunc. Maecenas commodo turpis quis elementum gravida.
  • Nunc ac sapien tellus. Quisque risus enim, tempus eget porttitor.
  • Donec nibh massa, rutrum a sollicitudin eu, lacinia in lorem.

  1. Ut at interdum nunc. Maecenas commodo turpis quis elementum gravida.
  2. Nunc ac sapien tellus. Quisque risus enim, tempus eget porttitor in.
  3. Donec nibh massa, rutrum a sollicitudin eu.

Graphic design is the paradise of individuality, eccentricity, heresy, abnormality, hobbies, and humors. — George Santayana


You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

attr

HTML


Responsive Tables

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell

YouTube Responsive Embed


Vimeo Responsive Embed


TED Responsive Embed


Twitch Responsive Embed


SoundCloud Embed


CodePen Embed


Instagram Embed


Twitter Embed


Responsive & Medium Style Image Zoom

Click the image to zoom it :)

styleguide


Syntax Highlighting

'use strict';
var markdown = require('markdown').markdown;
function Editor(input, preview) {
  this.update = function() {
    preview.innerHTML = markdown.toHTML(input.value);
  };
  input.editor = this;
  this.update();
}

You can add inline code just like this, E.g. .code { color: #fff; }

pre {
  background-color: #f4f4f4;
  max-width: 100%;
  overflow: auto;
}

GitHub gist Embed

  1. Create _data directory in theme root.

  2. Create navigation.yml file inside the _data directory and add the following as per the website:

- title: Home
  url: /
- title: Contact Cycling Today
  url: /contact
- name: Live Cycling Races
  link: /live-cycling
- name: Privacy Policy
  link: /privacy_policy
  1. In navigation.html replace all the current content with the following lines:
{% for link in site.data.navigation %}
  <li class='c-nav__item'><a class='c-nav__link' href='{{ link.url }}'>{{ link.title }}</a></li>
{% endfor %}
view raw navigation.md hosted with ❤ by GitHub

Input Style


Buttons Style


<button class='c-btn'>Button</button>
<button class='c-btn c-btn--small'>Button</button>
<button class='c-btn c-btn--full'>Button</button>


<button class='c-btn c-btn--active'>Button</button>
<button class='c-btn c-btn--active c-btn--small'>Button</button>
<button class='c-btn c-btn--active c-btn--full'>Button</button>