This page contains almost all elements that can be used for pages. Check out the source of this page to see how it is made. (markdown tutorial and cheatsheet link)

For information regarding the site architecture and other things besides content, please visit the github project and read the README file.

Including content

To write content that has to be easily injectable in other pages, navigate to the folder _includes and then the folder _content. There will be folders for every language, as content is language specific. Go to the correct folder and make a new file there. You can name it anything, as long as it ends with .md . Make sure there is no so-called Front Matter in the file, which are the — lines at the top of content pages. To inject it in a page, use the include tag with the file path like so:

Hello, this is an _included_ piece of content, which can also be enriched with **markdown**.

Which results in the following:

Hello, this is an included piece of content, which can also be enriched with markdown.

Including a table of content

This table of content element is not to list all sections of the current page, but rather to list all children pages. This can be done the same way as including content, but using the path “_content/table-of-contents.html”. It is not in a language folder because it is not language specific and is rendered with the page’s titles themselves.

Including code

Including code can be done with the highlight tag. It also takes a parameter for the language that the code is written in. Refer to this github page to see all supported languages.

A code block can be added with the following:

{% highlight html %}
  <html></html>
{% endhighlight %} 

Elements

Information boxes

A specific element that can be inserted is the information box. This can be used to highlight information in a certain way.

Notification / Information box

This is a notification box, we can put anything, including markup in here.

Warning box

This is a warning box.

Error box

This is an error box.

Tables

Tables are styled in a specific way, but this will happen automatically.

Number Next number Previous number
Five Six Four
Ten Eleven Nine
Seven Eight Six
Two Three One

Images

Images should be saved in the /img/content folder.

To make it a specific size, add height=”200px” and width=”200px”. Be aware that if a big size is used and the image is viewed on mobile, it does shrink to the screen size (to prevent sideways scrolling), but does not scale proportionally, which gives an undesired effect. As such, it is advised that if height and width are added, the class img-responsive is also added, so it will scale proportionally on small screens.

Benjamin Bannekat

To only make them responsive, and thus screen-filling, only add class=”img-responsive”.

Benjamin Bannekat