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:




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:


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):


Learn more on the Foundation Documentation site.

Please share:Pin on PinterestTweet about this on TwitterShare on FacebookShare on Google+Share on LinkedIn

12 thoughts on “Tech Notes on foundation.css and Reverie

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

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

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

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

Please leave a comment.

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge