ARCTIC Program Resources

How to use Feeling Responsive

Documentation for ARCTIC website templating system

Edit

This content is open source. Help improve it.

Getting Started

Open _config.yml and work it through, it’s well documented
Add your own logo.png to /assets/img/.
Open _data/socialmedia.yml and add your own social media links.
Open _data/navigation.yml and customize your navigation.
Open _data/language.yml and translate the theme if necessary.
Open _data/services.yml and customize links in the footer.
Open _data/network.yml and customize links in the footer.
Open _data/authors.yml and edit author information and set default author in config.yml.
Read the documentation to check out all features of Feeling Responsive.
Make it yours and add your own content.

Check out the documentation for all the tricks ›

Headers

Style your Header!

These are your options to style the header of each webpage individually. Feeling Responsive uses Backstretch by Scott Robin to expand them from left to right. The width should be 1600 pixel or higher using a ratio like 16:9 or 21:9 or 2:1.”

To customize the navigation of Feeling Responsive, you have to open the YAML-file _data/navigation.yml. Edit the data and adjust it to your own needs.

Different Page/Posts Formats

Feeling Responsive supports you with different templates for your content. These are the actual page/post formats:

Page/Post

The page/post format 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.

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, then use the page fullwidth template. To set up a grid, just use the foundation grid system.

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

Style your content with

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

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 ›

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

Responsive Videos

With foundation responsive videos are easy. More ›

Code to use for flexible videos

<div class="flex-video">
  <iframe with video />
</div>

Images: Title, Thumbnails, Homepage

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.

Title Images

image:
    title: image.jpg

Thumbnails

Thumbnails are used on archive pages like the blog index. 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, then 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

Create a Table of Contents

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

Bare Bones Version

### Table of Contents
*  Auto generated table of contents
{:toc}

Foundation panel version

<div class="panel radius" markdown="1">
**Table of Contents**
{: #toc }
*  TOC
{:toc}
</div>

Up to table of contents

Breadcrumbs

To turn on breadcrumbs, just use…

breadcrumb: true

Includes

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 like this when you use all parameters. Single parameters are possible of course.

{% include list-posts entries='3' offset='1' category='design' %}

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.

 {% include next-previous-post-in-category %}

improve_content

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.

{% include _improve_content.html %}

list-collection

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.

{% include list-collection collection='wordpress' %}

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.

{% 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!' %}

This is a warning.

An info box.

Yeah, you made it!

Danger!

jekyll -serve

Just a note!

You can even use <html>-tags inside the alert. Beware: Use “ and ‘ properly.

{% include alert info='<em>Feeling Responsive</em> is listed on <a href="http://jekyllthemes.org/">http://jekyllthemes.org</a>' %}

Feeling Responsive is listed on http://jekyllthemes.org

Up to table of contents

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

Info about Feeling responsive

Since years I am programming and designing websites. I love to work with open source tools and learn via code from others. This time I want to try to give something back and learn at the same time.

Feeling Responsive is my first theme which I let into the world. It’s built on work and knowledge of others. While I am still designing it, you read about whats behind this theme in the – hopefully – near future.

Features

Responsive Gallery, Videos, Grid, Typography,…
100% GitHub Pages friendly
Easy editable navigation, footer and social media links
Language Ready – just translate one file.
Lots of possibilities to customize it to your needs
Lots of different headers
Various post formats to let your content shine
Uses Jekyll 3.0
Multiple possibilities to use images in different ways
Fine typography
Play Video and Audio with Mediaelement.js

I got inspired by…

Michael Rose and his fabulous themes for jekyll. Authors of A List Apart and Smashing Magazine since 2002. GitHub and how they built such a habitat for cooperation worldwide. Automattic and how they built a fantastic community around WordPress. And many, many more…

Please make Feeling Responsive yours and if you like it, please link back to my homebase Phlow. That would be awesome.

Since then, fork it!

Yours sincerely, Moritz »mo.« Sauer

Edit

This content is open source. Help improve it.

Getting Started

Headers

Edit Navigation

Different Page/Posts Formats

Page/Post

Page/Post with a left or right sidebar

Page/Post with or without metadata

Page Full Width

Frontpage

Video

Style your content with

subheadlines

Quotes

Comments

Responsive Videos

Code to use for flexible videos

Images: Title, Thumbnails, Homepage

Title Images

Thumbnails

Homepage Image

Captions with URL

Define all images for an article

Create a Table of Contents

Bare Bones Version

Foundation panel version

Breadcrumbs

Includes

list-posts.html

next-previous-post-in-category.html

improve_content

list-collection

alert – Embed an alert in your content

Javascript/Foundation modules

Info about Feeling responsive

Features

I got inspired by…

Since then, fork it!