Tech Notes on foundation.css and Reverie

spinning wheel

Spinning wheel in use at Cold Spring Village in Cape May, New Jersey. Photo by Leora Wenger. Using a framework like foundation.css is a way of not reinventing the wheel.


As most of you will probably not be interesting in the technical details of getting a responsive framework to work, I will start off this post with a non-technical request. What was one of your favorite posts of 2012? Even better, what was a favorite 2012 post of someone else’s blog? If you have a favorite post to share, please tweet it with hashtag #favPost2012 – thank you!

• • •

When I start a new WordPress website, I greatly prefer the base to be responsive.
What is responsive web design? I want the site to show up on mobile platforms, tablets and desktops.

One does not want to reinvent the wheel. There are a good number of nice responsive frameworks available; in the past, I’ve used one called lessframework.css. I decided I wanted to try one that got good recommendations called foundation.css. There is a theme/framework that one can use to go with foundation.css called the Reverie. One of the issues as I started to use foundation.css and Reverie is there is little documentation for Reverie or the documentation could use improving. I noticed on one forum someone gave up quickly on Reverie because she could not get the them to pay attention to the style changes she made in the child theme’s style.css. It seems by default one is encouraged to make changes directly to Reverie, but then one can never be sure what is the original and what is changed. Too easy to make a mess with that method. I prefer creating a child theme.

Here’s the fix if you want to create a child theme to use with Reverie:

    <?php if (is_child_theme()) { ?>
    <!-- Include Child theme CSS file -->
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
    <?php } ?>

Be sure to put this code in header.php of your child theme directory after wp_head(); and before closing the tag. Normally, when one creates a child theme, creating a style.css with the proper heading is enough, but for some reason one needs this extra code to get Reverie to accept the child theme.

Another complaint about Reverie is that it adds funky styling to an image. I do not want funky styling in a framework! Fortunately this is easy to fix:

/* Get rid of - Add HTML5 Class for Images */
    figure img {
      border: none;
      box-shadow: none;
      margin: 0;
    }

What I really like about foundation.css is how the columns work. I decided the sidebar was too wide – in the theme code, I was able to make the sidebar three columns instead of the original four columns:

<aside id="sidebar" class="three columns" role="complementary">
    <div class="sidebar-box">
        <?php dynamic_sidebar("Sidebar"); ?>
    </div>
</aside><!-- /#sidebar -->

Then I made the matching content in a page template nine columns (originally it was eight; the columns are supposed to add up to twelve):

<!-- Row for main content area -->
        <div id="content" class="nine columns" role="main">
   
            <div class="post-box">
                <?php get_template_part('loop', 'page'); ?>
            </div>

        </div><!-- End Content row -->
       
        <?php get_sidebar(); ?>

Learn more on the Foundation Documentation site.

12 Responses to “Tech Notes on foundation.css and Reverie”

  1. Susan Cooper says:

    This is interesting stuff. I will confess I know little about this kind of thing. The way you explain it makes it feel much more approachable to me. I had no idea what responsive frame work was until you defined it. That was very cool. :)
    Susan Cooper´s last blog post ..9th Day From My Kitchen – Make Ahead Freezer Biscuits

  2. Jeri says:

    Code really is a kind of poetry… maybe one I will someday better understand. I will tweet a couple of my favorite posts to you.
    Jeri´s last blog post ..Author Interview: Sean McDevitt

  3. Great info as always Leora. This isn’t something that I want to tackle in the new future but this is the type of resource that you don’t know you need it until you need it. :) Thanks. I’m bookmarking it now.
    Sherryl Perry´s last blog post ..How To Set up Google Authorship &#038; the Rel=Author Tag

    • Leora Wenger says:

      Glad you might find it useful in the future, Sherryl. Just today I noticed one more thing – if you change the color in the menus, be careful not to copy the height of the nav-bar to your child theme. I was wondering why the menu broke in mobile (not an easy thing to do, get a menu to work both on desktop and mobile). I deleted any mention of the height for nav-bar, and my menu once again displayed beautifully at a small browser size.

  4. Catarina says:

    Leora this is the kind of intersting information that I’m not able to do anything with, at least not for the time being. Am not technical but anything’s possible. So let’s see if I ever get to that stage:-)
    Catarina´s last blog post ..Did you know Mitt Romney is bouncing back?

    • Leora Wenger says:

      Catarina, I don’t really expect most people to learn this in such detail, just as I’m never going to learn how to install a toilet. I hire someone to do that. But I love learning code (and then sometimes reporting what I learned), so it’s good I’m doing what I do instead of installing toilets. Hope the toilet guy finds gratification in his line of work.

  5. great shot. Do you have a photo blog or something? I never know where to make comments. This is so much a business blog.

  6. Kurt says:

    Interesting that your putting classes for the number of columns on the divs. Great that your delving into the PHP too.

    I’ve worked out a responsive theme for my site at, http//www.wanderlusting.info The site is a bit more complex than others so it still needs a bit of work in some areas like the sidebar.

    A better implementation is at, http://www.travelwithdrupal.info These are of course Drupal, not WordPress. Have you managed to load your images depending on the media queries. I get around this using some .htaccess rules that serve up pre-cached images at 4 break points.

    • Leora Wenger says:

      I liked your Travel with Drupal example – I made into a small browser size, and it did indeed look nice. I have a lot more opportunity to build responsive WordPress sites than Drupal sites, but I will experiment with your theme if I ever need to get a responsive Drupal site going.

      Putting the number of columns in a class is not my idea but that of foundation.css – you could certainly use is as a building blog for a Drupal site as well. The Reverie theme/framework is the part that is unique to WordPress.

Leave a Reply

CommentLuv badge