phlow/feeling-responsive

»Feeling Responsive« is a free flexible theme for Jekyll built on Foundation framework. You can use it for your company site, as a portfolio or as a blog.

You like and use this theme? Then support me. Just paypal.me/PhlowMedia :)

Newsletter: Stay in Touch for Future Updates

If you are a webdesigner interested in Jekyll, the static website generator, this little newsletter is for you. I share tutorials, clever code snippets and information about my own Jekyll Themes called Feeling Responsive and Simplicity. Please don't expect weekly emails :)

A Responsive Jekyll Theme: Feeling Responsive

Do you want to get to know Feeling Responsive? Than check it out first and have a look on its home at http://phlow.github.io/feeling-responsive/.

To get to know Feeling Responsive check out all the features explained in the documentation.

And what license is Feeling Responsive released under? This one.

Why use this theme?

Feeling Responsive is heavily customizable.

1. Language-Support :)
2. Optimized for speed and it's responsive.
3. Built on Foundation Framework.
4. Six different Headers.
5. Customizable navigation, footer,...

More ›

Changelog

Feeling Responsive is in active development. Thank you to everyone who contributed, especially Róbert Papp, Alexandra von Criegern and Juan Jose Amor Iglesias.

Read Changelog ›

Video Tutorial

Click the image to watch the YouTube-Video-Tutorial.

feeling-responsive's Issues

Opened DIV in Footer.html

I believe that the id="footer" div in _Footer.html ...

  <footer id="footer-content" class="bg-grau">
    <div id="footer">
      <div class="row">

should be closed as follows:

    </div><!-- /#subfooter -->
  </div> <!-- id=footer -->
</footer>

Regards,
Roger.

Facebook OG meta

I changed _includes/head.html from:

{% if page.image %}<meta property="og:image" content="{{ site.urlimg }}{{ page.image }}">{% endif %}

to:

{% if page.image.thumb %}<meta property="og:image" content="{{ site.urlimg }}{{ page.image.thumb }}">{% endif %}

How can I set up the "Blog" page as my frontpage?

Hi, I want the Blog page be my homepage, how can I achieve this?

google site search isn't working - specifically the site: prefix is having no effect.

I tried to get https://developers.google.com/custom-search/ working too, yet the CSS for feeling-responsive is clashing with Google's CSS for the search box and search button.

$topbar-bg-color in colors/globals .scss files

Hi, I'm learning Jekyll, Sass and Foundation all at the same time, so I may have missed something basic.

Anyhow, https://github.com/Phlow/feeling-responsive/blob/gh-pages/_sass/_01_settings_colors.scss#L74

$topbar-bg-color: #fff;

(which seems the obvious place to change/define that colour) never gets used because of https://github.com/Phlow/feeling-responsive/blob/gh-pages/_sass/_04_settings_global.scss#L1375

$topbar-bg-color: #fff;

As I say this may be just that I have misunderstood something.

Not compatible with a CNAME?

Hi,

When I load my website, all the CSS and JS dosen't dispaly.
Here is the console error log;

(index):1 GET https://felixinx.me/assets/css/styles_feeling_responsive.css net::ERR_CONNECTION_TIMED_OUT

(index):1 GET https://felixinx.me/assets/js/modernizr.min.js net::ERR_CONNECTION_TIMED_OUT

(index):1 GET https://felixinx.me/assets/js/javascript.min.js net::ERR_CONNECTION_TIMED_OUT

(index):1 GET https://felixinx.me/assets/img/logo.png net::ERR_CONNECTION_TIMED_OUT

(index):1 Uncaught ReferenceError: $ is not defined(anonymous function) @ (index):1

(index):1 GET http://www.google-analytics.com/analytics.js net::ERR_BLOCKED_BY_CLIENT(anonymous function) @ (index):1(anonymous function) @ (index):1

/assets/img/touch-icon-192x192.png:1 GET https://felixinx.me/assets/img/touch-icon-192x192.png net::ERR_CONNECTION_TIMED_OUT

/assets/img/touch-icon-192x192.png:1 GET https://felixinx.me/assets/img/touch-icon-192x192.png net::ERR_CONNECTION_TIMED_OUT

/assets/img/touch-icon-192x192.png:1 GET https://felixinx.me/assets/img/touch-icon-192x192.png net::ERR_CONNECTION_TIMED_OUT

/assets/img/favicon-32x32.png:1 GET https://felixinx.me/assets/img/favicon-32x32.png n

As you can see, my website cannot reach all the files. You can access my configuration here

Thanks

site.url versus site.baseurl

What is the intended difference between site.url and site.baseurl? The example in _config.yml is:

# This URL is the main address for absolute links. Don't include a slash at the end.
#
url: 'https://phlow.github.io/feeling-responsive'
baseurl: ''

But in the footer, site.baseurl is the prefix for items without "http" in the URL, which results in that link being broken (I'm seeing links to "http://phlow.github.io/feed.xml" on your demo, a 404). There are also many instances of site.url and site.baseurl being put together, like this:

{{ site.url }}{{ site.baseurl }}/assets/img/{{ site.logo }}

My best guess is that site.url is supposed to be the domain name, and site.baseurl is supposed to be the root directory of the site (if any). So the example page should actually be:

url: 'https://phlow.github.io'
baseurl: '/feeling-responsive'

This way, an absolute link is {{ site.url }}{{ site.baseurl }}, and a relative link is just {{ site.baseurl }}.

After I set my config file like this, and then went through all the code I could find using these variables and adjusted them accordingly, I stopped getting broken links. I'm not too familiar with Jekyll, though, so I'm not sure if this structure is correct, or unusual, or breaks a standard convention.

Edit: That is to say, I made this change and then different stuff was broken :) But I was able to fix the new broken links, etc. and get my site working properly as far as I can tell.

Internet Explorer 11 - Word breaking

While viewing Feeeling Responsive with Internet Explorer 11, I noticed some issues with word-breaking.

Using the IE development tools, I changed the ms-word-break and word-break properties. Seemed to have corrected the issue. Is this worth pursuing as a fix ?

I meet a problem..

I use your theme feeling -responsive，but，when
i edit _config.yml -------

url: 'https://phlow.github.io/feeling-responsive'

to My ---------
url: 'https://elicec.github.io/feeling-responsive'

my site become that elicec.github.io

why??

html-proofer fails

Please try your impressive template with html-proofer. See the Jekyll docs.

A command :
$bundle exec htmlproof ./_site --only-4xx --check-html --disable-external --allow-hash-href
gives many failures :
htmlproof 2.6.1 | Error: HTML-Proofer found 603 failures!

What is the workflow behind assets/js/javascript.min.js?

How did you get from various JS library downloads to that minified file?

Links

The RSS, Contact etc links on the demo page are broken.

Switching language

Is the language system meant for the users so that they can switch language? Tried to look for the switch language link but couldn't find it on the demo site.
Cheers!

Single line blockquotes look strange

Take a glance at https://phlow.github.io/feeling-responsive/design/typography/#typographical-elements
The single-line quotation starts with a lower >> and ends with an upper <<.
The multi-line quotation starts with an upper >> and ends with a lower <<.
This feels inconsistent, is there a rule for such a thing?
If not, here's how I changed _06_typography it which looks good for both:

    &:before {
        //display: block; // blockquote is a block
        content: "\00BB";
        font-size: 80px;
        line-height: 0; // new
        position: absolute;
        left: -25px;
        top: auto; // was -40px
        color: $secondary-color;
    }
    &:after {
        //display: block; // blockquote is a block
        content: "\00AB";
        font-size: 80px;
        line-height: 0; // new
        position: absolute;
        right: -10px;
        bottom: 20px; // was -40px
        color: $secondary-color;
    }

Hardcoded path to /blog for blog entries

I would like to have the frontpage to actually show blog posts. While I can fix that easily with the metadata, some other links like the archive require the /blog directory to be present. Is this by purpose, or an oversight?

bare-bones-version not up-to-date?

Hi,
It seems that the bare-bones-version is not up-to-date. For example, in _frontpage-widget.html, the way images are searched is not the same (it doesn't use "urlimg").
Or did I miss something?
Thanks!

In index.md, the URLs don't have to be absolute, actually

This is more a "documentation" bug: in index.md (bare-bones version), it says that the URLs have to be absolute ("http://domain.de/must-be-absolut-url-like-this-one/"), but it's not true. And that's a very good thing! :)

Theme preview incompatible with HTTPS

Your theme preview page does not support HTTPS. This can be fixed by using protocol relative url or even better the HTTPS based url by default in _config.yml.

If users use "HTTPS everywhere" or similar plugins in their browser, this can lead to your demo not being displayed properly.

Blog page as homepage

It's possible to set the /blog/ page as homepage? I would like to hide /blog/ from url...

Thanks!

Jekyll error

When I run "jekyll serve", I get error:

Liquid Exception: Included file '_includes/list-posts.html' not found in feeling-responsive/_posts/design/2014-07-09-post-left-sidebar.md

Included file '_includes/list-posts.html' not found

(Not issue) Topbar menu items order

Can I change the order of the menu items in the top bar?
Browsing from mobile layout they are in alphabetical order.

Thank you!

Is there a "post" layout?

Hey,

Thanks for the excellent theme. I'm trying to get comfortable with it, and I note:

_config.yml seems to define pages vs posts. I imagine you might want to enable comments on posts but not pages:

defaults:
  -
    scope:
      path: ""              # an empty string here means all files in the project
      type: "pages"
    values:
      show_meta: true   # Show metadata beneath all pages
      # sidebar:            # Possible values › left, right › by default there will be no sidebar
      comments: false
      author: "your_author_name"
  -
    scope:
      path: ""
      type: "posts"
    values:
      show_meta: true   # Show metadata beneath all posts
      # sidebar:        # Possible values › left, right › by default there will be no sidebar
      comments: true
      author: "your_author_name"

However, I don't seem to be able to use "layout: post" (jekyll just complains that it's an invalid layout), so thus far I'm just using "page" for everything. Is this the intended behaviour?

Thanks :)
D

Blog page layout on iPhone

I get the problem while view blog page on my iPhone device (iPhone 5s, iOs 9.1) but it fine with iPhone 5, iOS 7.

Translation

Is there an example/template for multilingual websites? There is a German language .yml in _data, and in the configuration you say that you can change the language. But how?
Also: it says the file is used in _includes/header, but that's not the case...
If I understood correctly, this is language support but not really the basis for a multilingual website. Any help would be much appreciated :)

Social Media Buttons doesn't work

I noticed that the buttons social media doesn't work. Its don't appear eigther in fresh downloaded version. What could be the problem?

How to change the aspect-ratio of full-width headers?

Where can I change the aspect-ratio/dimensions of the full-width header?
It seems to be 1600×500, which is a ratio of 3.2:1.
I have a much taller image of 3:2 because I need to put more text on it.

I can't figure out which files I need to change.

Thanks for any hints.

Facebook Open Graph: url

Removed the slash since page.url provides a leading slash:

<meta property="og:url" content="{{ url }}/{{ page.url }}">
to
<meta property="og:url" content="{{ url }}{{ page.url }}">

Cheers,
Roger.

Is it possible to use syntax highlighting?

I was not able to find any customization that would enable syntax highlighting for the code block. Wondering if it's supported?

Navigation small bug

Hi!

I've discovered two small issues in navigation.

It is present in https://phlow.github.io/feeling-responsive/ and also in my own blog.

With "big" screens, standard browser, Blog menu consists of three elements:

• Blog (dropdown), with a link to /blog/
  • Blog entry (link to /blog/)
  • Blog archive entry (link to /blog/archive)

When you reduce size or ipad browser, you will see:

• Blog (dropdown), without link to /blog, when you click here you will see "back"
  • Blog link
  • Blog archive link

But in android, you will see:

• Blog (dropdown), without link to /blog, when you click here you will see "back"
  But then you will see three links:
  • Blog (I assume this is the link present in Blog dropdown)
  • Blog link
  • Blog archive link

I think this behaviour should be the same in all devices with small screens.

On the other hand, if I remove link to "/blog/" in the dropdown (_data/navigation.yml), a link
to first drop down element is created. It should not have any link, I guess.

I tried to fix it without success ... 😞

Feature : change form to Formspree

Hi,

The actuall form is nice, but is a bit slow. I think that http://formspree.io is a better choice, because it built-in in the page. I will look to what I can do for this.

Thanks for this awesome theme!

Question about changing the content width

Hi all! Quick question: how do I change the content width for all pages? Can't seem to find it in the documentation. Thanks for your help!

navbar link for blog does not display as active

When visiting another part of the site, the navbar displays the corresponding page's link as active, as in "documentation" here:

However, when on "blog" the navbar link does not display as active:

I think this likely has to do with the logic evaluating link.url and page.url in _navigation.html and the way the blog page is set up in other directory outside of pages/.

Duplicate link with different targets

Duplicate link with different targets at https://phlow.github.io/feeling-responsive/headers/
Notice how 2nd and 3rd options are both: "Headers With Style · No Header but Article Image"

Overriding colors

Just wondering if the place to overrides the colors is scss/01_settings_colors.scss?
I tried to change things in there but color seems to not change...
I deleted the _site directory and do a rebuild without any success.
I think I'm missing a switch somewhere maybe?

Thanks

Missing qualifier in css

You might want to add # for these footers to prevent styling section and article footers.
https://github.com/Phlow/feeling-responsive/blob/gh-pages/_sass/_07_layout.scss#L261

Recommended means to change colour scheme?

Hey, loving this theme!

I've been wondering how to change the colour theme on certain elements, for example the code highlights. I tried replacing _sass/_11_syntax-highlighting.scss with a solarized theme (https://gist.github.com/qguv/7936275), but it didn't seem to work as expected. The green background for the code highlights remains, at the least.

Thanks!
D

How to add my posts with other type?

Hi, Phlow:
thank you for your great effort on the theme, I have forked one of your verison on my site. but I have some questions to ask you.
I find the blog menu will direct page to _posts\design, If I want to divided the posts into two kinds:
one is design the other is php coding, how can it do? if this can not work how to make menu blog to show content bellow of _posts instead of _posts\design,

thank you.

Sorry, I'am question. about file Gemfile on repository feeling-responsive nothing, thank's...

Problems with jekyll-gist dependency

When I am trying to do 'jekyll serve', I have the error below:

/Library/Ruby/Gems/2.0.0/gems/jekyll-3.0.1/lib/jekyll/plugin_manager.rb:30:in `require': cannot load such file -- jekyll-gist (LoadError)

The dependency is installed:

$ gem list jekyll-gist

*** LOCAL GEMS ***

jekyll-gist (1.4.0)

Any suggestions why I have the problem?

Link color in Buttons is same as Button background color

Link text color in Buttons is same as Button background color resulting in unreadable buttons unless one hovers over it or has the link visited already. Here's the screenclip:

Following may go into _09_elements.scss
a.button {
color: #ffffff;
}

Apparent change of fonts when loading any page

When I load the pages in https://phlow.github.io/feeling-responsive/ or my blog on Mac, the fonts of all texts changes apparently in a second. It appears both in Chrome and Safari. This especially obvious when loading a page without cache.

I suspect it may due to some loading sequence of javascript or CSS. Or will it be related to the font-family in CSS?

I will also try to do experiments to diagnoses this problem.

Local - Liquid Exception: Failed to get header. in _posts/design/2014-09-15-gallery.md

Hi,

Here is my problem. When I run jekyll serve on my computer, I get an error;
Liquid Exception: Failed to get header. in _posts/design/2014-09-15-gallery.md.
This is weird, because there are no header on this post!

The file;

---
layout: page
subheadline:  "Templates"
title:  "A Beautiful Gallery"
teaser: "Wanna create a responsive gallery to showcase your portfolio, recent photos or images? It's quite easy thanks to Foundation and <a href='http://foundation.zurb.com/docs/components/clearing.html'>Clearing Lightbox</a>."
categories:
    - design
tags:
    - post format
image:
   thumb: "unsplash_7_thumb.jpg"

---
You just need to choose a template like the [`page`][3]- or [`page-fullwidth`][4]-template and than use some foundation magic.

<ul class="clearing-thumbs small-block-grid-3" data-clearing>
  <li><a href="{{ site.url }}/images/unsplash_1.jpg"><img  data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_1_thumb.jpg"></a></li>
  <li><a href="{{ site.url }}/images/unsplash_2.jpg"><img  data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_2_thumb.jpg"></a></li>
  <li><a href="{{ site.url }}/images/unsplash_3.jpg"><img  data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_3_thumb.jpg"></a></li>
  <li><a href="{{ site.url }}/images/unsplash_4.jpg"><img  data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_4_thumb.jpg"></a></li>
  <li><a href="{{ site.url }}/images/unsplash_5.jpg"><img  data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_5_thumb.jpg"></a></li>
  <li><a href="{{ site.url }}/images/unsplash_6.jpg"><img  data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_6_bus_thumb.jpg"></a></li>
</ul>

## Clearing Lightbox Code

[Clearing Lightbox][1] is so flexible especially when using the [block grid][2]. For extensive documentation visit the [foundation docs][1].

{% highlight html %}
<ul class="clearing-thumbs small-block-grid-3" data-clearing>
  <li><a href="path/to/your/img"><img data-caption="caption 1" src="path/to/your/thumbnail"></a></li>
  <li><a href="path/to/your/img"><img data-caption="caption 2" src="path/to/your/thumbnail"></a></li>
  <li><a href="path/to/your/img"><img data-caption="caption 3" src="path/to/your/thumbnail"></a></li>
</ul>
{% endhighlight %}



## Other Post Formats
{: .t60 }
{% include list-posts.html tag='post format' %}



 [1]: http://foundation.zurb.com/docs/components/clearing.html
 [2]: http://foundation.zurb.com/docs/components/block_grid.html
 [3]: {{ site.url }}/design/page/
 [4]: {{ site.url }}/design/page-fullwidth/

The repo of my file : https://github.com/felixinx/felixinx.github.io
Jekyll version 2.5.3.

Thanks 👍

New Pages result in 404

This is a great project, however I've tried creating additional pages, adding them to the pages folder, but when I navigate to them through the browser, they do not seem to exist and always result in 404.

I can add posts just fine.

Additionally, if I rename an existing page - again 404.

Any ideas?

Theme is not visible

Hi,

I forked your theme and changed the _config.yml to match my github page, but I get a error message:

404

File not found

The site configured at this address does not contain the requested file.

If this is your site, make sure that the filename case matches the URL.
For root URLs (like http://example.com/) you must provide an index.html file.

It looks as if the index.html file is missing in the root folder. https://molnfront.github.io/

Weird bug on photos

Hi,

I just discoverd out a new bug. Maybe is a bad configuration (:

On https://devinx.github.io/better-feeling-responsive/ , I can click on the front image, and It will go to http://devinx.github.io/better-feeling-responsive/. if I click again on this image, it will go to http://phlow.github.io/feeling-responsive/

So this is very weird...

Thanks

Fontawesome images not shown

Hi,

after playing around with your theme for several hours, I have to say it looks really great and seems to be exactly what I was searching for. But now I can't seem to be able to build the images (e.g. github-icon), that I guess are take from font-awesome. Please see attached screenshot. I can't build them within my own branch or when using a fresh clone of your repository.

Thanks for any help,
Sebastian

Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/styles_feeling_responsive.scss': Invalid US-ASCII character "\xE2" on line 1

This happened with ubuntu, with a fresh install of jekyll after running jekyll serve

Build error

I built/run on my Mac using: jekyll serve --config _config.yml,_config_dev.yml

And got a Error, then I removed the video and got this error:
Error reading file /Users/jekyll/Documents/JekyllMolnfront/pages/pages-root-folder/index.md: (): did not find expected key while parsing a block mapping at line 16 column 3

It doesn´t matter because I don't use that file.

I saw that the build script creates a directory under _site. But in your configuration it is never used. Is there a simple way to make it not creating that dir?

SCSS conversion error

While pushing to remote branch, without any SCSS customization:

remote: Generating...
remote: Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/styles_feeling_responsive.scss':
remote: Invalid CSS after "...ules: $modules ": expected "}", was "!global;" on line 13
remote: jekyll 2.5.3 | Error: Invalid CSS after "...ules: $modules ": expected "}", was "!global;" on line 13

Local instance of Jekyll just works though. Any hints much appreciated.

Frontmatter tag in top page

in some posts appear tag of frontmatter, is this normal? Es: https://phlow.github.io/feeling-responsive/design/typography/