Home

Writing Articles

Articles live in the _posts folder, and are written in markdown. File naming:

0000-01-01-article-name.md
`The numbers at the start of the file name are required and should be used to order articles.
The first number is always 0000
The second number is the ID of the category the article is in
The third number is the ID of the article (unique in its category)

Front Matter

Each article needs front matter, which goes at the top of the file. The four items below are required; other optional fields are detailed further down this page.

Categories don't have to be defined anywhere else on the site - they are retrieved automatically.

---
title: "Structure"
excerpt: "How the theme is organized and what all of the files are for."
last_modified_at: 2018-03-20
category: Getting Started
---

Blockquotes

Single line blockquote:

> Stay hungry. Stay foolish.

Multi line blockquote with a cite reference:

> People think focus means saying yes to the thing you've got to focus on. But that's not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I'm actually as proud of the things we haven't done as the things I have done. Innovation is saying no to 1,000 things.

<cite>Steve Jobs</cite> --- Apple Worldwide Developers' Conference, 1997
{: .small}

Tables

| Employee         | Salary |                                                              |
| --------         | ------ | ------------------------------------------------------------ |
| [John Doe](#)    | $1     | Because that's all Steve Jobs needed for a salary.           |
| [Jane Doe](#)    | $100K  | For all the blogging she does.                               |
| [Fred Bloggs](#) | $100M  | Pictures are worth a thousand words, right? So Jane × 1,000. |
| [Jane Bloggs](#) | $100B  | With hair like that?! Enough said.                           |

| Header1 | Header2 | Header3 |
|:--------|:-------:|--------:|
| cell1   | cell2   | cell3   |
| cell4   | cell5   | cell6   |
|-----------------------------|
| cell1   | cell2   | cell3   |
| cell4   | cell5   | cell6   |
|=============================|
| Foot1   | Foot2   | Foot3   |

Definition Lists

Definition List Title
:   Definition list division.

Startup
:   A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.

#dowork
:   Coined by Rob Dyrdek and his personal body guard Christopher "Big Black" Boykins, "Do Work" works as a self motivator, to motivating your friends.

Do It Live
:   I'll let Bill O'Reilly [explain](https://www.youtube.com/watch?v=O_HyZ5aW76c "We'll Do It Live") this one.

Unordered Lists (Nested)

  * List item one 
      * List item one 
          * List item one
          * List item two
          * List item three
          * List item four
      * List item two
      * List item three
      * List item four
  * List item two
  * List item three
  * List item four

Ordered List (Nested)

  1. List item one 
      1. List item one 
          1. List item one
          2. List item two
          3. List item three
          4. List item four
      2. List item two
      3. List item three
      4. List item four
  2. List item two
  3. List item three
  4. List item four

Buttons

Make any link standout more when applying the .btn class.

<a href="#" class="btn--success">Success Button</a>

[Primary Button Text](#link){: .btn}
[Success Button Text](#link){: .btn .btn--success}
[Warning Button Text](#link){: .btn .btn--warning}
[Danger Button Text](#link){: .btn .btn--danger}
[Info Button Text](#link){: .btn .btn--info}
[Inverse Button](#link){: .btn .btn--inverse}
[Light Outline Button](#link){: .btn .btn--light-outline}

[X-Large Button](#link){: .btn .btn--x-large}
[Large Button](#link){: .btn .btn--large}
[Default Button](#link){: .btn}
[Small Button](#link){: .btn .btn--small}

Notices

**Watch out!** You can also add notices by appending `{: .notice}` to a paragraph.
{: .notice}

HTML Tags

Address Tag

<address>
  1 Infinite Loop<br /> Cupertino, CA 95014<br /> United States
</address>

Anchor Tag (aka. Link)

This is an example of a [link](http://apple.com "Apple").

Abbreviation Tag

The abbreviation CSS stands for "Cascading Style Sheets".

*[CSS]: Cascading Style Sheets

Cite Tag

"Code is poetry." ---<cite>Automattic</cite>

Code Tag

You will learn later on in these tests that `word-wrap: break-word;` will be your best friend.

Strike Tag

This tag will let you <strike>strikeout text</strike>.

Emphasize Tag

The emphasize tag should _italicize_ text.

Insert Tag

This tag should denote <ins>inserted</ins> text.

Keyboard Tag

This scarcely known tag emulates <kbd>keyboard text</kbd>, which is usually styled like the `<code>` tag.

Preformatted Tag

This tag styles large blocks of code.

<pre>
.post-title {
  margin: 0 0 5px;
  font-weight: bold;
  font-size: 38px;
  line-height: 1.2;
  and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}
</pre>

Quote Tag

<q>Developers, developers, developers&#8230;</q> &#8211;Steve Ballmer

Strong Tag

This tag shows **bold text**.

Subscript Tag

Getting our science styling on with H<sub>2</sub>O, which should push the "2" down.

Superscript Tag

Still sticking with science and Albert Einstein's E = MC<sup>2</sup>, which should lift the 2 up.

Variable Tag

This allows you to denote <var>variables</var>.

Figures (Images)

Generate a <figure> element with a single image and caption.

Include Parameter	Required	Description
image_path	Required	Full path to image e.g.: `filename.jpg`. Use absolute URLS for those hosted externally.
alt	Optional	Alternate text for image.
caption	Optional	Figure caption text. Markdown is allowed.

Using the figure include like so:

{% include figure image_path="/assets/images/unsplash-image-10.jpg" alt="this is a placeholder image" caption="This is a figure caption." %}

Responsive video embed

Embed a video from YouTube, Vimeo, Google Drive, or bilibili that responsively sizes to fit the width of its parent. To help with GDPR compliance, the theme is using the privacy enhanced version of YouTube and Vimeo providers out of the box.

Parameter	Required	Description
`id`	Required	ID of the video
`provider`	Required	Hosting provider of the video: `youtube`, `vimeo`, `google-drive`, or `local`

YouTube

To embed the following YouTube video at url https://www.youtube.com/watch?v=XsxDH4HcOWA (long version) or https://youtu.be/XsxDH4HcOWA (short version) into a post or page's main content you'd use:

{% include video id="XsxDH4HcOWA" provider="youtube" %}

Vimeo

To embed the following Vimeo video at url https://vimeo.com/212731897 into a post or page's main content you'd use:

{% include video id="212731897" provider="vimeo" %}

Google Drive

To embed the following Google Drive video at url https://drive.google.com/file/d/1u41lIbMLbV53PvMbyYc9HzvBug5lNWaO/preview into a post or page's main content you'd use:

{% include video id="1u41lIbMLbV53PvMbyYc9HzvBug5lNWaO" provider="google-drive" %}

Hosted in this Repo

To embed the following video at relative url /assets/videos/video1.mp4 into a post or page's main content you'd use:

{% include video id="video1.mp4" provider="local" %}

Gallery

Generate a <figure> element with optional caption of arrays with two or more images.

To place a gallery add the necessary YAML Front Matter.

Name	Required	Description
url	Optional	URL to link gallery image to (eg. a larger detail image).
image_path	Required	Full path to image eg: `/assets/images/filename.jpg`. Use absolute URLS for those hosted externally.
alt	Optional	Alternate text for image.
title	Optional	Title text for image. Will display as a caption in a Magnific Popup overlay when linked to a larger image with `url`.

gallery:
  - url: /assets/images/unsplash-gallery-image-1.jpg
    image_path: /assets/images/unsplash-gallery-image-1-th.jpg
    alt: "placeholder image 1"
    title: "Image 1 title caption"
  - url: /assets/images/unsplash-gallery-image-2.jpg
    image_path: /assets/images/unsplash-gallery-image-2-th.jpg
    alt: "placeholder image 2"
    title: "Image 2 title caption"
  - url: /assets/images/unsplash-gallery-image-3.jpg
    image_path: /assets/images/unsplash-gallery-image-3-th.jpg
    alt: "placeholder image 3"
    title: "Image 3 title caption"

And then drop-in the gallery include in the body where you'd like it to appear.

Include Parameter	Required	Description	Default
id	Optional	To add multiple galleries to a document uniquely name them in the YAML Front Matter and reference in `{% include gallery id="gallery_id" %}`	`gallery`
layout	Optional	Layout type. 2 column: `half`, 3 column: `third`, single column: `''` (blank)	Determined by gallery size. Two items: `half`, three or more items: `third`.
class	Optional	Use to add a `class` attribute to the surrounding `<figure>` element for additional styling needs.
caption	Optional	Gallery caption description. Markdown is allowed.

{% include gallery caption="This is a sample gallery with **Markdown support**." %}

Feature row

To add a feature row containing three content blocks with text and image, add the following YAML Front Matter

Name	Required	Description	Default
image_path	Required	Full path to image eg: `/assets/images/filename.jpg`. Use absolute URLS for those hosted externally.
image_caption	Optional	Caption for image, Markdown is supported eg: `"Image from Unsplash"
alt	Optional	Alternate text for image.
title	Optional	Content block title.
excerpt	Optional	Content block excerpt text. Markdown is allowed.
url	Optional	URL that the button should link to.
btn_label	Optional	Button text label.	`more_label` in UI Text data file.
btn_class	Optional	Button style.	`btn`

feature_row:
  - image_path: /assets/images/unsplash-gallery-image-1-th.jpg
    alt: "placeholder image 1"
    title: "Placeholder 1"
    excerpt: "This is some sample content that goes here with **Markdown** formatting."
  - image_path: /assets/images/unsplash-gallery-image-2-th.jpg
    alt: "placeholder image 2"
    title: "Placeholder 2"
    excerpt: "This is some sample content that goes here with **Markdown** formatting."
    url: "#test-link"
    btn_label: "Read More"
    btn_class: "btn--inverse"
  - image_path: /assets/images/unsplash-gallery-image-3-th.jpg
    title: "Placeholder 3"
    excerpt: "This is some sample content that goes here with **Markdown** formatting."

And then drop-in the feature row include in the body where you'd like it to appear.

Include Parameter	Required	Description	Default
id	Optional	To add multiple rows to a document uniquely name them in the YAML Front Matter and reference in `{% include feature_row id="row2" %}`	`feature_row`
type	Optional	Alignment of the featured blocks in the row. Options include: `left`, `center`, or `right` aligned.

{% include feature_row %}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly