styleguide.md

layout	title	permalink
page	Styleguide	/styleguide/

Demo of the content, layout, styleguide, etc.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a paragraph. This contains a marked text, while trying to include others such as quotes, and some italic text, while being not subtle enough to be bold and beautiful.

The blockquote element is used to indicate the quotation of a large section of text from another source. Using the default HTML styling of most web browsers, it will indent the right and left margins both on the display and in printed form, but this may be overridden by Cascading Style Sheets. The non-semantic use of the blockquote element purely to indent text has been deprecated by the W3C since HTML 4. The preferred approach is the use of CSS.

Wrap content blocks in a class .content-medium, .content-large, or .content-full to have it extend out of the default content-width on large screens.

Here is a Youtube¹ video using {%raw%}{% include video source="youtube" id="qaF6dPiJ-NM" %}{%endraw%}. You can extend the video with just wrapping with something like <div class="content-medium">, replace medium with large or full. You can apply this not only videos but photos or any other block content.

So, did you see the Footnote² I added above. You will need to be using markdown: kramdown as your MarkdDown.

{% include video source="youtube" id="RYit_gUzq08" %}

On larger screens, photos are treated a little differently. A simple picture will be part of the content but you can highlight it by adding the appropriate classes to the img html element -- medium, large, and full.

There are times when you want to use smaller images and flushed them right or left. Add the class small to the IMAGE and chose left or right. For example, an image to flushed right will be <img class="small right" src="" alt="">.

EM text that follows an Image immediately are treated as a Caption.

This is a placeholder picture from Unsplash.

A simple photos gallery is also included. There are two ways of using it. You can either have a gallery of photos in a page or post, or have a separate page of its own - [view example]({{ site.baseurl | prepend: site.url }}/gallery/).

1. Use a normal HTML element figure to display your images. But you throw in multiple images inside wrapped in a div.gallery. They can either be hyperlink or just the images.
2. Or wrapped a bunch of images, either hyperlinked or not, inside a div.gallery. You can combine the div.gallery with other contend-extenders -- content-medium, content-large or content-full.

A gallery of images can be wrapped inside a `figure` along with a caption displayed as `figcaption`.

There is a Jekyll Default highlighter built-in for code blocks powered by Rouge. You can replace it with your choice of highlighter styles.

// external links opens in new tab
function externalLinks() {
  for(var c = document.getElementsByTagName("a"), a = 0;a < c.length;a++) {
    var b = c[a];
    b.getAttribute("href")
    && b.hostname !== location.hostname
    && (b.target = "_new")
    && (b.rel = "noopener")
  }
}
;
externalLinks();

Form

Please fill up the non-working form and we will never get back to you. ;-)

Name

Email

Subject

Message
<textarea cols="50" rows="10" name="message" required></textarea>

Send Email

Footnotes

1. YouTube is an online video sharing and social media platform owned by Google. It was launched in February 2005 by Steve Chen, Chad Hurley, and Jawed Karim. It is the second most visited website, with more than one billion monthly users who collectively watch more than one billion hours of videos each day. ↩

2. Footnotes may be used at the editor's discretion in accordance with the guideline on Variation in citation methods. ↩