Welcome to my style guide

Here you will find all the things I generally use to build web pages. This is probably the third or fourth personal style guide I've attempted to make. So really what we're doing is seeing if I can complete it and make it look good.

Here are some links:

Here are some headings that seem important

<h1> Heading

<h2> Heading

<h3> Heading

Lists

Buttons

Class Example
.button or <button>
.primary
.warning

Button groups

Forms

Please login

Basics

Git Repository
node_modules Initial commit 10 hours ago
test Initial commit 10 hours ago
build Initial commit 10 hours ago
package.json Initial commit 10 hours ago
Gruntfile.js Initial commit 10 hours ago

Photo Cards

Image Title

other actions

~ Mango - Wat ~

X

Blog Post

Welcome to Ghost

Just start writing

Ghost has a powerful visual editor with familiar formatting options, as well as the ability to add dynamic content.

Select your text to add formatting such as headers or to create links. Or use Markdown shortcuts to do the work for you - if that's your thing.

Rich editing at your fingertips

The editor can also handle rich media objects, called cards, which can be organised and re-ordered using drag and drop.

You can insert a card either by clicking the + button, or typing / on a new line to search for a particular card. This allows you to efficiently insert images, markdown, html, embeds and more.

For example:

<header class="site-header outer">
        
Welcome to Ghost
<div class="inner"> something codey </div> </header>

It's also possible to share links from across the web in a visual way using bookmark cards that automatically render information from a websites meta data. Paste any URL to try it out:

Ghost: The #1 open source headless Node.js CMS
The world’s most popular modern open source publishing platform. A headless Node.js CMS used by Apple, Sky News, Tinder and thousands more. MIT licensed, with 30k+ stars on Github.

Working with images in posts

You can add images to your posts in many ways:

Image sizes

Once inserted you can blend images beautifully into your content at different sizes and add captions and alt tags wherever needed.

Image galleries

Tell visual stories using the gallery card to add up to 9 images that will display as a responsive image gallery:

Image optimisation

Ghost will automatically resize and optimise your images with lossless compression. Your posts will be fully optimised for the web without any extra effort on your part.

Next: Publishing Options

Once your post is looking good, you'll want to use the publishing options to ensure it gets distributed in the right places, with custom meta data, feature images and more.

Hey! Welcome to Ghost, it's great to have you :)

We know that first impressions are important, so we've populated your new site with some initial Getting Started posts that will help you get familiar with everything in no time. This is the first one!

There are a few things that you should know up-front:

  1. Ghost is designed for ambitious, professional publishers who want to actively build a business around their content. That's who it works best for. If you're using Ghost for some other purpose, that's fine too - but it might not be the best choice for you.

  2. The entire platform can be modified and customized to suit your needs, which is very powerful, but doing so does require some knowledge of code. Ghost is not necessarily a good platform for beginners or people who just want a simple personal blog.

  3. For the best experience we recommend downloading the Ghost Desktop App for your computer, which is the best way to access your Ghost site on a desktop device.

Ghost is made by an independent non-profit organisation called the Ghost Foundation. We are 100% self funded by revenue from our Ghost(Pro) service, and every penny we make is re-invested into funding further development of free, open source technology for modern journalism.

The main thing you'll want to read about next is probably: the Ghost editor.

Once you're done reading, you can simply delete the default Ghost user from your team to remove all of these introductory posts!

Flex Layout

.flex-container .row

.flex-1
.flex-1

start
.flex-1
end

.flex-2
.flex-1

.flex-container .column

.flex-1
.flex-1
start
.flex-1
end
.flex-2
.flex-1

Vertically center

vertically centered

Colors

.bg-c## .c00 .c01 .c02 .c03 .c04 .c05 .c06 .c07 .c08 .c09 .c10 .c11 .c12 .c13 .c14 .c15 .c16 .c17
.bg-c00 .c00 .c01 .c02 .c03 .c04 .c05 .c06 .c07 .c08 .c09 .c10 .c11 .c12 .c13 .c14 .c15 .c16 .c17
.bg-c01 .c00 .c01 .c02 .c03 .c04 .c05 .c06 .c07 .c08 .c09 .c10 .c11 .c12 .c13 .c14 .c15 .c16 .c17
.bg-c02 .c00 .c01 .c02 .c03 .c04 .c05 .c06 .c07 .c08 .c09 .c10 .c11 .c12 .c13 .c14 .c15 .c16 .c17
.bg-c03 .c00 .c01 .c02 .c03 .c04 .c05 .c06 .c07 .c08 .c09 .c10 .c11 .c12 .c13 .c14 .c15 .c16 .c17
.bg-c04 .c00 .c01 .c02 .c03 .c04 .c05 .c06 .c07 .c08 .c09 .c10 .c11 .c12 .c13 .c14 .c15 .c16 .c17
.bg-c05 .c00 .c01 .c02 .c03 .c04 .c05 .c06 .c07 .c08 .c09 .c10 .c11 .c12 .c13 .c14 .c15 .c16 .c17
.bg-c06 .c00 .c01 .c02 .c03 .c04 .c05 .c06 .c07 .c08 .c09 .c10 .c11 .c12 .c13 .c14 .c15 .c16 .c17
.bg-c07 .c00 .c01 .c02 .c03 .c04 .c05 .c06 .c07 .c08 .c09 .c10 .c11 .c12 .c13 .c14 .c15 .c16 .c17
.bg-c08 .c00 .c01 .c02 .c03 .c04 .c05 .c06 .c07 .c08 .c09 .c10 .c11 .c12 .c13 .c14 .c15 .c16 .c17
.bg-c09 .c00 .c01 .c02 .c03 .c04 .c05 .c06 .c07 .c08 .c09 .c10 .c11 .c12 .c13 .c14 .c15 .c16 .c17
.bg-c10 .c00 .c01 .c02 .c03 .c04 .c05 .c06 .c07 .c08 .c09 .c10 .c11 .c12 .c13 .c14 .c15 .c16 .c17
.bg-c11 .c00 .c01 .c02 .c03 .c04 .c05 .c06 .c07 .c08 .c09 .c10 .c11 .c12 .c13 .c14 .c15 .c16 .c17
.bg-c12 .c00 .c01 .c02 .c03 .c04 .c05 .c06 .c07 .c08 .c09 .c10 .c11 .c12 .c13 .c14 .c15 .c16 .c17
.bg-c13 .c00 .c01 .c02 .c03 .c04 .c05 .c06 .c07 .c08 .c09 .c10 .c11 .c12 .c13 .c14 .c15 .c16 .c17
.bg-c14 .c00 .c01 .c02 .c03 .c04 .c05 .c06 .c07 .c08 .c09 .c10 .c11 .c12 .c13 .c14 .c15 .c16 .c17
.bg-c15 .c00 .c01 .c02 .c03 .c04 .c05 .c06 .c07 .c08 .c09 .c10 .c11 .c12 .c13 .c14 .c15 .c16 .c17
.bg-c16 .c00 .c01 .c02 .c03 .c04 .c05 .c06 .c07 .c08 .c09 .c10 .c11 .c12 .c13 .c14 .c15 .c16 .c17
.bg-c17 .c00 .c01 .c02 .c03 .c04 .c05 .c06 .c07 .c08 .c09 .c10 .c11 .c12 .c13 .c14 .c15 .c16 .c17