+
+
+
+
+
+**Table of Contents**
+{: #toc }
+* TOC
+{:toc}
+
+
+{% include improve_content.html %}
+
+## Different Page/Posts Formats {#formats}
+
+*Feeling Responsive* supports you with different templates for your content. These are the actual page/post formats:
+
+### Page/Post
+The [page/post format]({{ site.url }}/design/page/) has no sidebar by default, its content is centered and beneath the content the visitor gets some metadata like categories, tags, date and author if provided via data in front matter of the post.
+
+use in front matter via: `layout: page`
+
+### Page/Post with a left or right sidebar
+If you want to show the sidebar, just enter `sidebar: left` or `sidebar: right` in front matter, and *whoops, there it is*! To customize the content of the sidebar, open `_includes/sidebar.html`.
+
+
+### Page/Post with or without metadata
+If you want to show metadata like categories, tags and date at the end of the page, just enter `show_meta: true`. It's on by default. You can change it via `config.yml`. To turn of metadata just enter – *yes, you guessed right* – `show_meta: false`.
+
+
+
+### Page Full Width
+If you want full control of styling a page, than use the [page fullwidth template]({{ site.url }}/design/page-fullwidth/). To set up a grid, just use the [foundation grid system](http://foundation.zurb.com/docs/components/grid.html).
+
+use in front matter via: `layout: page-fullwidth`
+
+
+### Frontpage
+This template is special. It allows you to define three *widgets* which are displayed with a headline, image, description and a link to the content. It's used for the [homepage]({{ site.url }}) of this website.
+
+use in front matter via: `layout: frontpage`
+
+
+### Video
+If you're a video producer or cineast, you'll like the [video template]({{ site.url }}/design/video/). It darkens the layout to black and lets the video stand out full-width.
+
+use in front matter via: `layout: video`
+
+[Up to table of contents](#toc)
+{: .text-right }
+
+
+
+
+## Style your content with {#styling}
+
+Feeling Responsive offers lots of possibilities to style your articles. You can style your content in different ways. There are elements like subheadlines, feature images, header images, homepage images, meta data like categories and tags and many more.
+
+
+### subheadlines
+
+If you need a subheadline for an article, just define a subheadline in front matter like this:
+
+`subheadline: "Subheadline"`
+
+### Quotes
+
+Quotes mix it up a little bit, if you write long articles. So use quotes:
+
+> Age is an issue of mind over matter. If you don't mind, it doesn't matter.
+Mark Twain
+
+[Up to table of contents](#toc)
+{: .text-right }
+
+
+## Comments
+
+You can use comments with *Feeling Responsive* by the way of Disqus. If you want to use Disqus-Comments just open `config.yml` and add your `disqus_shortname`. [More on how to use Disqus ›](https://disqus.com/websites/)
+
+By default comments are turned off. You can customize the default behaviour in `config.yml`. To **turn on comments** just add `comments: true` to front matter using the page layout `layout: page`.
+
+[Up to table of contents](#toc)
+{: .text-right }
+
+
+
+
+## Responsive Videos
+
+With foundation responsive videos are easy. [More ›](http://foundation.zurb.com/docs/components/flex_video.html)
+
+
+
+## Images: Title, Thumbnails, Homepage {#images}
+
+There are several types of images you can define via front matter. If you want to change the images used in the header have a look at [Style your Header]({{ site.url }}/headers/).
+
+
+### Title Images
+
+~~~
+image:
+ title: image.jpg
+~~~
+
+
+### Thumbnails
+
+Thumbnails are used on archive pages like the [blog index][2]. They have a size of 150x150 pixels. Define them in front matter like this:
+
+~~~
+image:
+ thumb: thumbnail_image.jpg
+~~~
+
+
+### Homepage Image
+
+If you want to feature an article on the homepage with a huge image, than use the homepage image with a width of 970 pixels. If no homepage image is defined *Feeling Responsive* writes instead *New Blog Articles* over the blog entries. Define the homepage image like this:
+
+~~~
+image:
+ homepage: header_homepage_13.jpg
+~~~
+
+
+
+### Captions with URL
+
+Sometimes you want to give credit to the creator of your images, maybe with a link. Especially when you use Creative Commons-images like I do for this website. Just add the following front matter and *Feeling Responsive* does the rest:
+
+~~~
+image:
+ title: header_image.jpg
+ caption: Image by Phlow
+ caption_url: "http://phlow.de/"
+~~~
+
+### Define all images for an article
+
+~~~
+image:
+ title: title_image.jpg
+ thumb: thumbnail_image.jpg
+ homepage: header_homepage_13.jpg
+ caption: Image by Phlow
+ caption_url: "http://phlow.de/"
+~~~
+
+
+[Up to table of contents](#toc)
+{: .text-right }
+
+
+## Create a Table of Content
+{: .t60}
+
+With the Kramdown parser for Markdown you can render a table of contents for your documents. Just insert the following HTML in your post before the actual content. More information on [»Automatic ›Table of Contents‹ Generation«][1].
+
+### Bare Bones Version
+{% highlight html %}
+### Table of Contents
+* Auto generated table of contents
+{:toc}
+{% endhighlight %}
+
+### Foundation panel version
+
+{% highlight html %}
+
+
+
+
+
+### Code to use for flexible videos
+
+{% highlight html %}
+
+
+
+{% endhighlight %}
+
+
+
+
+## Images: Title, Thumbnails, Homepage {#images}
+
+There are several types of images you can define via front matter. If you want to change the images used in the header have a look at [Style your Header]({{ site.url }}/headers/).
+
+
+### Title Images
+
+~~~
+image:
+ title: image.jpg
+~~~
+
+
+### Thumbnails
+
+Thumbnails are used on archive pages like the [blog index][2]. They have a size of 150x150 pixels. Define them in front matter like this:
+
+~~~
+image:
+ thumb: thumbnail_image.jpg
+~~~
+
+
+### Homepage Image
+
+If you want to feature an article on the homepage with a huge image, than use the homepage image with a width of 970 pixels. If no homepage image is defined *Feeling Responsive* writes instead *New Blog Articles* over the blog entries. Define the homepage image like this:
+
+~~~
+image:
+ homepage: header_homepage_13.jpg
+~~~
+
+
+
+### Captions with URL
+
+Sometimes you want to give credit to the creator of your images, maybe with a link. Especially when you use Creative Commons-images like I do for this website. Just add the following front matter and *Feeling Responsive* does the rest:
+
+~~~
+image:
+ title: header_image.jpg
+ caption: Image by Phlow
+ caption_url: "http://phlow.de/"
+~~~
+
+### Define all images for an article
+
+~~~
+image:
+ title: title_image.jpg
+ thumb: thumbnail_image.jpg
+ homepage: header_homepage_13.jpg
+ caption: Image by Phlow
+ caption_url: "http://phlow.de/"
+~~~
+
+
+[Up to table of contents](#toc)
+{: .text-right }
+
+
+## Create a Table of Content
+{: .t60}
+
+With the Kramdown parser for Markdown you can render a table of contents for your documents. Just insert the following HTML in your post before the actual content. More information on [»Automatic ›Table of Contents‹ Generation«][1].
+
+### Bare Bones Version
+{% highlight html %}
+### Table of Contents
+* Auto generated table of contents
+{:toc}
+{% endhighlight %}
+
+### Foundation panel version
+
+{% highlight html %}
+
+**Table of Contents**
+{: #toc }
+* TOC
+{:toc}
+
+{% endhighlight %}
+[Up to table of contents](#toc)
+{: .text-right }
+
+## Breadcrumbs
+
+To turn on breadcrumbs, just use...
+
+{% highlight html %}
+breadcrumb: true
+{% endhighlight %}
+
+
+## Includes
+{: .t60}
+
+Includes can be very helpful to spice up your content. You can use includes in your Markdown-files with ease: Just call them with some Liquid code.
+
+### list-posts.html
+
+The `list-posts.html`-include is a loop to list posts. It's a helper to add some additional content fast and easy. You can use it in individual posts for example. Which parameters you use, depends on you.
+
+Possible parameter for the loop:
+
+- entries › define the number of entries to show
+- offset › define the offset (number of entries to skip before displaying the first one)
+- category › define **only one** category to display according entries
+
+The loop looks when you use all parameters. Single parameters are possible of course.
+
+~~~
+{% raw %}{% include list-posts.html entries='3' offset='1' category='design' %}{% endraw %}
+~~~
+
+### next-previous-post-in-category.html
+
+This include creates a next/previous link to a post of the same category using the first categories-variable in front matter.
+
+~~~
+{% raw %}{% include next-previous-post-in-category.html %}{% endraw %}
+~~~
+
+
+### improve_content.html
+
+If your content is on Jekyll you can use this include to automatically generate a »Edit on GitHub Link« to give people a possibility to improve your content. Got the idea from [Ben Balters Blog](http://ben.balter.com/).
+
+~~~
+{% raw %}{% include improve_content.html %}{% endraw %}
+~~~
+
+
+### list-collection.html
+
+This include lets you loop through a collection to list all entries in that collection. If you set »published: false« in front matter of a collection page the page gots filtered out via unless. The following example loops through a collection called *wordpress*.
+
+~~~
+{% raw %}{% include list-collection.html collection='wordpress' %}{% endraw %}
+~~~
+
+
+### alert – Embed an alert in your content
+
+This include lets you easily display an alert. To use the include no `.html` ending is necessary. You can use five different kinds of alerts: `warning`, `info`, `success`, `alert` and `text`.
+
+~~~
+{% raw %}{% include alert warning='This is a warning.' %}
+{% include alert info='An info box.' %}
+{% include alert success='Yeah, you made it!' %}
+{% include alert alert='Danger!' %}
+{% include alert terminal='jekyll -serve' %}
+{% include alert text='Just a note!' %}{% endraw %}
+~~~
+
+{% include alert warning='This is a warning.' %}
+{% include alert info='An info box.' %}
+{% include alert success='Yeah, you made it!' %}
+{% include alert alert='Danger!' %}
+{% include alert terminal='jekyll -serve' %}
+{% include alert text='Just a note!' %}
+
+You can even use ``-tags inside the alert. Beware: Use " and ' properly.
+
+~~~
+{% raw %}{% include alert info='Feeling Responsive is listed on http://jekyllthemes.org' %}{% endraw %}
+~~~
+
+{% include alert info='Feeling Responsive is listed on http://jekyllthemes.org' %}
+
+[Up to table of contents](#toc)
+{: .text-right }
+
+
+## Javascript/Foundation modules
+
+*Feeling Responsive* uses the foundation framework and some of its javascript components. I reduced the modules, to decrease page load and make the theme faster.
+
+I only added one other javascript-module: [`backstretch`][3] by Scott Robbin. These modules are currently used by the theme and included in `javascript.min.js`. There is also a non-minified version, if you want to take a closer look: `javascript.js`.
+
+~~~
+/foundation/bower_components/foundation/js/vendor/jquery.js'
+/foundation/bower_components/foundation/js/vendor/fastclick.js'
+/foundation/bower_components/foundation/js/foundation.accordion.js'
+/foundation/bower_components/foundation/js/foundation.clearing.js'
+/foundation/bower_components/foundation/js/foundation.dropdown.js'
+/foundation/bower_components/foundation/js/foundation.equalizer.js'
+/foundation/bower_components/foundation/js/foundation.magellan.js'
+/foundation/bower_components/foundation/js/foundation.topbar.js'
+/foundation/js/jquery.backstretch.js'
+~~~
+
+{% include improve_content.html %}
+
+