Header two

Header three

Header four

Header five

Header six

small text

smaller text

Blockquotes

Single line blockquote:

Software is like sex: it’s better when it’s free.

Multi line blockquote with a cite reference:

Sharing knowledge is the most fundamental act of friendship. Because it is a way you can give something without loosing something.

Richard Stallman

Tables

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 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

HTML Tags

<address>

<href>

This is an example of an anchor tag or link.

<abbr>

The abbreviation CSS stands for “Cascading Style Sheets”.

<cite>

“Code is poetry.” —Automattic

<code>

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

<del>

This tag will let you strikeout text.

<em>

The emphasize tag should italicize text.

<ins>

This tag should denote inserted text.

<kbd>

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

<pre>

This tag styles large blocks of code.

.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;
}

<q>

Just a short text, with automatically inserted quotation marks.

<strong>

This tag shows bold text.

<sub>

Getting our science styling on with H₂O, which should push the “2” down.

<sup>

Still sticking with science and Albert Einstein’s E = MC², which should lift the 2 up.

<var>

This allows you to denote variables.

However it is advisable to do so in combination with our own responsive images:

{% include image.html class="img-thumb lightbox" src="1280px-van_gogh_-_starry_night_-_google_art_project.jpg" alt="The painting..." %}

A few lines of text to put the image in context…Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.

• First, switch on responsive images in _config.yml:

  responsive_images: 
    active: true

• Place your images in /assets/images/uploads/
• Start the npm script by typing npm run rig while in the /npm directory
• Restart Jekyll

(…ok, a bit convoluted, I know, but we’re working on an automated process…).

Note that npm needs to be installed in your system, refer to https://www.npmjs.com/get-npm for instructions.

Also be aware that the original files will be optimized, and then deleted; see npm/uploads_cleanup.js for more informations.

But let’s see how this works in practice. A medium sized image is the default value, and since it fill all the available space, it doesn’t need any alignment:

{% include image.html src="1280px-vincent_van_gogh_-_de_slaapkamer_-_google_art_project.jpg" alt="The painting..." %}

A small image is aligned to the left by default:

{% include image.html class="img-small" src="1280px-vincent..." alt="The painting..."

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.

And now, for a perfectly centered image:

{% include image.html class="img-small center" src="1280px-vincent..." %}

or a right leaning one; let’s also add a caption, for a change:

{% include image.html class="img-small right" src="1280px-vincent..." caption='"The Bedroom in Arles" (first version) by Vincent Van Gogh - public domain image' %}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.

Well, you get the gist of it… but before we wrap it up, let me introduce you the thumbnail:

{% include image.html class="img-thumb" src="1280px-vincent..." %}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt inculpa qui officia deserunt mollit anim id est laborum.

Of course it’s possible to center and caption the thumbnails as well:

{% include image.html class="img-thumb center" src="1280px-vincent..." caption='"The Bedroom in Arles"...' %}

You might be wondering: what if I don’t have a wall of text like your lorem ipsum, how will the text wrap properly around the image?

Let’s take, as an example, a right aligned thumbnail with a shorter text:

{% include image.html class="img-thumb right" src="1280px-vincent..." %}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.

Now, how does this very text gets to hang around here, and not wrap around the image? Well, that’s because it has a .clear class… to use it, put this just after the paragraph:

(...)
to use it, put this just after the paragraph:
{: .clear }

And this concludes our tour. Enjoy your responsive images!

Here’s what the post’s Front Matter looks like:

---
title: "Demo Post"
tagline: "that makes use of every option in Front Matter"
author: An Author
image: assets/img/1280px-vincent_van_gogh_-_de_slaapkamer_-_google_art_project.jpg
alt: This is the alt text of a featured image.
caption: This is the **caption** text of a featured image.
excerpt: This article sets any possible variable in the post's Front Matter. Also, as part of the demo, this is a manually written `excerpt`... and it even contains some **markdown** and <strong>HTML</strong> formatting in it. Clever, innit?
slug: set-every-variable-post-front-matter-now-with-custom-slug
categories:
  - Markup
tags:
  - front matter
  - markup
  - variables
sticky: true
---

It’s possible to give it a distinctive style using the .sticky class.

GFM Code Blocks

GitHub Flavored Markdown fenced code blocks are supported. To modify styling and highlight colors edit /_sass/_highlighter.scss.

css

#container {
  float: left;
  margin: 0 -240px 0 0;
  width: 100%;
}

scss

.highlight {
  margin: 0;
  padding: 1em;
  font-family: $monospace;
  font-size: $type-size-7;
  line-height: 1.8;
}

html

<nav class="pagination" role="navigation">
  {% if page.previous %}
    <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
  {% endif %}
  {% if page.next %}
    <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
  {% endif %}
</nav><!-- /.pagination -->

ruby

module Jekyll
  class TagIndex < Page
    def initialize(site, base, dir, tag)
      @site = site
      @base = base
      @dir = dir
      @name = 'index.html'
      self.process(@name)
      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
      self.data['tag'] = tag
      tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
      tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
      self.data['title'] = "#{tag_title_prefix}#{tag}"
      self.data['description'] = "An archive of posts tagged #{tag}."
    end
  end
end

Code Blocks in Lists

Indentation matters. Be sure the indent of the code block aligns with the first non-space character after the list item marker (e.g., 1.). Usually this will mean indenting 3 spaces instead of 4.

1. Do step 1.

2. Now do this:

   def print_hi(name)
     puts "Hi, #{name}"
   end
   print_hi('Tom')
   #=> prints 'Hi, Tom' to STDOUT.
   

3. Now you can do this.

Jekyll Highlight Tag

An example of a code blocking using Jekyll’s {% highlight %} tag.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 'gulp html' -- does nothing
// 'gulp html --prod' -- minifies and gzips HTML files for production
gulp.task('html', () => {
  return gulp.src(paths.siteFolderName + paths.htmlPattern)
    .pipe(when(argv.prod, htmlmin({
      removeComments: true,
      collapseWhitespace: true,
      collapseBooleanAttributes: false,
      removeAttributeQuotes: false,
      removeRedundantAttributes: false,
      minifyJS: true,
      minifyCSS: true
    })))
    .pipe(when(argv.prod, size({title: 'optimized HTML'})))
    .pipe(when(argv.prod, gulp.dest(paths.siteFolderName)))
    .pipe(when(argv.prod, gzip({append: true})))
    .pipe(when(argv.prod, size({
      title: 'gzipped HTML',
      gzip: true
    })))
    .pipe(when(argv.prod, gulp.dest(paths.siteFolderName)))
});

1
2
3
4
Module[{},
  Sqrt[2]
  4
]

GitHub Gist Embed

An example of a Gist embed below.

The image above happens to be centered.

The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is left aligned.

As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we’ll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it’s thing. Mission accomplished!

And now for a massively large image. It also has no alignment.

The image above, though 1200px wide, should not overflow the content area. It should remain contained with no visible disruption to the flow of content.

And now we’re going to shift things to the right align. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there — Hey guy! Way to rock that right side. I don’t care what the left aligned image says, you look great. Don’t let anyone else tell you differently.

In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah — Just like that. It never felt so good to be right.

And just when you thought we were done, we’re going to do them all over again with captions!

The figure above happens to be centered. The caption also has a link in it, just to see if it does anything funky.

The rest of this paragraph is filler for the sake of seeing the text wrap around the 150×150 image, which is left aligned.

As you can see the should be some space above, below, and to the right of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like you words. Let them do their jobs without any hassle from the text. In about one more sentence here, we’ll see that the text moves from the right of the image down below the image in seamless transition. Again, letting the do it’s thing. Mission accomplished!

And now for a massively large image. It also has no alignment.

The figure element above has an inline style of width: 1200px set which should break it outside of the normal content flow.

And now we’re going to shift things to the right align. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there — Hey guy! Way to rock that right side. I don’t care what the left aligned image says, you look great. Don’t let anyone else tell you differently.

In just a bit here, you should see the text start to wrap below the right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah — Just like that. It never felt so good to be right.

And that’s a wrap, yo! You survived the tumultuous waters of alignment. Image alignment achievement unlocked!

This is a paragraph. It should not have any alignment of any kind. It should just flow like you would normally expect. Nothing fancy. Just straight up text, free flowing, with love. Completely neutral and not picking a side or sitting on the fence. It just is. It just freaking is. It likes where it is. It does not feel compelled to pick a side. Leave him be. It will just be better that way. Trust me.

Left Align

This is a paragraph. It is left aligned. Because of this, it is a bit more liberal in it’s views. It’s favorite color is green. Left align tends to be more eco-friendly, but it provides no concrete evidence that it really is. Even though it likes share the wealth evenly, it leaves the equal distribution up to justified alignment.

Center Align

This is a paragraph. It is center aligned. Center is, but nature, a fence sitter. A flip flopper. It has a difficult time making up its mind. It wants to pick a side. Really, it does. It has the best intentions, but it tends to complicate matters more than help. The best you can do is try to win it over and hope for the best. I hear center align does take bribes.

Right Align

This is a paragraph. It is right aligned. It is a bit more conservative in it’s views. It’s prefers to not be told what to do or how to do it. Right align totally owns a slew of guns and loves to head to the range for some practice. Which is cool and all. I mean, it’s a pretty good shot from at least four or five football fields away. Dead on. So boss.

Justify Align

This is a paragraph. It is justify aligned. It gets really mad when people associate it with Justin Timberlake. Typically, justified is pretty straight laced. It likes everything to be in it’s place and not all cattywampus like the rest of the aligns. I am not saying that makes it better than the rest of the aligns, but it does tend to put off more of an elitist attitude.

• The post title renders the word “with” in italics and the word “Markdown” in bold.
• The post title markup should be removed from the browser window / tab.

Special characters in the post title have been known to cause issues with JavaScript and XML when not properly encoded and escaped.

Please be aware that if you put markdown and html formatted characters in the title field they will be properly interpreted and rendered, so pay attention to potentially breaking text.