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

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.

Ut at interdum nunc. Maecenas commodo turpis quis elementum gravida.
Nunc ac sapien tellus. Quisque risus enim, tempus eget porttitor in.
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

A post shared by Ahmad Ajmi (@ahmadajme) on Apr 2, 2018 at 2:18pm PDT

Twitter Embed

Very excited to release Nubia, a new Responsive & Multipurpose Ghost Theme 🚀🚀https://t.co/LATsykOLDJ pic.twitter.com/zG2PFVwe7G
— Aspire Themes (@aspirethemes) December 24, 2017

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

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>

Style Guide

Simple default styles for headings