Reverie Framework 4 Now Available

Foundation 4 was released back on Thursday and guess you may all have something to say about this latest release. Foundation 4 goes mobile first, which means we need to reverse the way and process we construct a design, by starting from a small screen and then adding parts for the large screen. Foundation 4 has only one breakpoint (768), luckily, and with grid already built, we don’t actually need to take much time to get familiar with it. Work for two days and now I would like to announce the release of the new version of Reverie Framework, which also has the same version number 4. Before jump right to the download section or the Github page, you will, or most likely, are required take a look at the below changes otherwise you may end up a terrible weekend. So, let do it now, backup your theme.

Reverie Framework 4

What’s Changed in Reverie?

The new mobile first way has changed the way we think entirely, so as Reverie. Before you heading towards the download, I have to say that Reverie 4 changed so much that I nearly forget what it looks like before. To simply put it, there is no easy way to upgrade to Reverie 4 from prior version. However, for users who are using Reverie 3, you can still follow the official Foundation migration guide by change several markups but do not download Reverie 4 since it no longer compatible with previous versions.

Reverie Goes Mobile First

I’ve written the structure from ground up to better support the mobile first approach and simplify the process. Instead of wrapping each boxes inside like a Russian Matryoshka doll, Reverie now has all the boxes stack into a long list.

Reverie Also Goes Sass

Guess this is unavoidable path. Just picked up Sass/Scss recently and already fell in love with it. It is better that you start using Sass when customizing Reverie, and if you haven’t learnt about the CSS preprocessor, it is time. ZURB has a detailed documentation to set up Foundation Sass environment. Compass is required.

To non Sass lovers, Reverie also offers default styling that directly downloaded from the official website of Foundation, untouched. You can simply replace them with the latest Foundation. Of course, you will never want to download Foundation 4 and place in prior version of Reverie, they are not going to work since ZURB has written the new Foundation from group up. Take a look at the new file structure section below to learn how to implement.

File Structure Changes

By default, Reverie is in favor of Sass. The style.css in the root directory of the theme will not be loaded in the front end, it only uses as an identifier for theme selection at the back end (it will be loaded if you choose to use vanilla CSS, see instruction below). The only main CSS the front end loads is located under css/style.css, and the respective Sass under scss/style.scss. All the necessary Foundation Sass are loaded in style.scss, including Normalize. If you are using Sass to customize Reverie, all you need to get started is the style.scss and the rest will be taken care of. Don’t forget to keep Foundation up to date using Compass when new version releases.

For folks who haven’t started using Sass, you can still use the vanilla CSS to customize Reverie. However, you need to do one more thing to get started. Go to the functions.php and find the following section:

Change it into

Once done, Reverie will properly enqueue the default Foundation CSS from ZURB for you. The includes the following files in a standard Foundation package.

Of course, this is a bit dirty and if you want to have only style.css loaded, you can copy and paste all the Foundation codes into the file.

What’s New in Reverie?

Now let’s look at what’s new in the latest release of Reverie. With the latest version of Foundation, we are able to incorporate elements like Orbit slideshow quite easily. By default, Reverie loads all the Foundation script and initiate them before the end of body tag. Just follow the Foundation docs and implement the markup to construct your elements in your design.

Top Navigation

Reverie no longer has off-canvas loaded, instead, it now uses top-bar, a one-stop way to be compatible for both small and large screen. Off-canvas is fancy but quite lagging on my iPhone 4, and probably other devices. The new top bar supports unlimited levels so you can create lots of drop downs as you like. The top bar can have fixed position and other options, check out the docs on ZURB. For the old dropdown menu, it appears to be nowhere in the latest Foundation.

Post Formats Support

In this version, support for post formats was added. In this case, several templates as well as filenames were changed. The changes somehow make the whole structure more clear, at least to me. WordPress 3.6 also plans to add the UI for post formats, guess it is time. But still don’t know how the UI will be, may add more tweaks in the future. And at this point, to create a post format, for instance, image, just duplicate content.php and change the filename to content-image.php and start editing the template. Note you may end up seeing an error when using a certain post format if the related template not exists.

Pagination

WordPress doesn’t have a helpful filter (or I am not aware of) to tweak the output of the paginate_links to work with Foundation. Thus I ended up writing some duplicated Sass for the respective classes. Point me out if I got wrong or if you can help with the pagination, let me know.

JQuery

WordPress’s built in JQuery is too old for Foundation 4 and when you find something is not working, it might be this issue. Thus I deregistered and registered with 1.9.1 from Google. Currently the library loads in the header required by WordPress. You may install plugins to place the library in the footer or cache it however you like. Please note that you make sure place the library before Foundation’s script when using plugins.

Comment Section Revamp

Consider the fact that many people are using Reverie as a finished theme, so I also add some basic styling to the comment section. Nowadays everybody starts to use round avatar, why not Reverie? Have taken into consideration of the comment presentation in Smashing Magazine which turns out to be simple and elegant.

Some Other New Features

I’ve also added the default Custom Background Image and Color support for Reverie and tweaked the style a bit to make it looks better. Check out the demo for what I mean.

Other Minor Changes and Fixes

Better way to enqueue comment-reply.js.
Better support for child theme.

Special Thanks and Credits

Bones: This is an awesome framework (though the author prefers another name) for WordPress. Bones was used as the major source for restructuring the functions.php, which is now much tidy.

Twenty-Twelve: I use the default WordPress theme as a standard to develop the new Reverie, and stole some really nice codes.

Folks on Github: Thanks to those who helped me out on Github with the project, Reverie won’t be this awesome without you. Cheers! What? Not awesome yet?

One more Thing

Last but not least, if you like Reverie, help me spread the love by using the sharing buttons below. Also I am working on a new theme, not a framework this time, and it will (may) be based on the new Reverie and of course, with a completely new name.

DownloadGithubDemo