The package contains only a few files, while the Foundation package is not included. Foundation files including JavaScripts and Scss are located in the bower_components/ folder, you should be familiar with it if you are using Scss. However, we are not including this folder (which has 3.1 MB) in our child theme, and you will need to edit the path to direct Compass to the correct folder in Reverie parent theme. Follow a simple step below achieve the goal.

If you want to write vanilla CSS, you can get quick start right away. However, if you are going to use Sass/Scss, you will need to define the path to the Foundation folder (aka, the bower_components/ where all the Foundation goodies are stored) where all the Scss files locate. Normally, it will be either reverie-master/ or reverie/. If you haven’t changed the folder name, you don’t need to change anything. However if you have changed Reverie’s folder name, make sure to change it accordingly in the config.rb file in the child theme package.

Last but not least, download the latest version of Reverie from Github. Some slight changes were applied to make child theme work better. If you encounter any problems, feel free to post them on the repo.

January 30, 2014 In response to some requests, a new version of the child theme package was just released. Please also download the latest version of Reverie in order to use the child theme since some changes were made and allowed child theme to load its own Foundation stylesheets. With this new version, you will be able to edit _settings.scss in the child theme’s Scss/ folder and do more customizations.

This post Reverie Child Theme on Github Now was written originally at ThemeFortress.

Foundation 5 has a detailed documentation to explain how to use every feature. As usual, you can implement every feature of Foundation 5 in Reverie 5 and the method of implementation is the same and all you need to do is follow the official instructions.

In previous version, I haven’t touched the _settings.scss file since some of the users might not be Sass pioneers. It did help folks with limited knowledge in Sass but at the same time reduced the productivity. So in Reverie 5, I started to use Sass (Scss) from the beginning, which means I edited the _settings.scss to present all the changes instead of overwrite them in style.css as the old way.

If you are a Sass lover, then you can start right away and if you are not, no worry, you can still use CSS to overwrite the changes we made in _settings.scss, or simply download the vanilla CSS of Foundation 5.

Further in this version, we no longer offer choices of Sass and CSS enqueues to users. The Foundation stylesheet (app.css) is loaded by default, with changes applied through _settings.scss and Sass, you can start edit the stylesheet locates in css/style.css or go for the Sass version in scss/style.scss.

Upgrade from Reverie 4

There are no significant changes from Foundation 4 to 5 in terms of markups, thus it is possible to simply replace the CSS and JS files with the new one if all you need is a simple framework. However, if you wish to take advantage of Reverie 5’s new design, you might need to take a close look into changes in several files or check out the latest commit on Github (it can freeze your browser…). Will try to get a list of changed files this week.

Getting Started

There are few ways to obtain the latest version of Foundation 5 and to be most efficient, I choose to do it via bower, the recommended way by ZURB. To do it, you need to install several things first including Git, Ruby 1.9+ and Node.js. Node.js looks like a monster to me but the install process is fairly simple, just a few clicks away if you are on Mac.

Note if you are like me who are using Mac and just upgraded to Mavericks, you might need to reinstall Xcode Command Line (it will automatically popup when needed). The process should be simple and straightforward and just follow the instruction on Zurb.

Download Reverie 5 – View on Github

jQuery

Foundation 5 uses jQuery 2 while the latest version of WordPress is still on 1.10.2. During the test, the version comes with WordPress works pretty well with Foundation 5 and we are going to keep on using the default version instead of doing the dirty way again. However, if you happened to find some part of the Foundation JS not working, please report to us in the comment, forum or on Github.

Top Bar

Foundation’s top bar is getting more and more powerful, and it’s more and more challenging to create customized menu using just WordPress functions, that’s why Reverie has only one simple menu align to the left in all previous versions. Maybe we can do more. So in this version, in additional to the regular menu on the left, another menu was added to the top bar area, align to the right. This new menu (Additional Navigation) location was created but the menu is still not activated. You need to go down to header.php to uncommon line 68 to 82 to activate the right menu. See the demo if you are interested how it will look like. Search bar was removed from the top bar in this version, you can bring it back in the widget area.

No Interchange, Yet

Interchange is probably the most exciting feature Foundation 5 has brought us and of course, we are plan to integrate it into Reverie. Reverie 5 introduced a commonly used feature in modern themes which is featured thumbnail, and we are going to apply Interchange to those images in the following weeks.

Due to limitation, we still haven’t implemented Interchange to in-post images, and we probably need to use a Shortcode Plugin to achieve our objective which can be redundant especially if you have a large library. We will continue look into the issue and see if we can find a more elegant way to apply Interchange. If you have any suggestions, let us know.

Other JS features

Well, even though I use Foundation for most web design, I am not using features like Orbit and Clearing on any of them, and I doubt people will use those features. Orbit is not the most powerful slider and Clearing is never the most beautiful lightbox (if you may call it a lightbox). Even though these features are not integrated with Reverie 5, you can still use any one of them by applying the Foundation 5 markups in the docs. Reverie 5 has everything Foundation 5 offers.

On ThemeFortress, I use Magnific Popup, an elegant and fast lightbox script developed by Dmitry Semenov. There is no WordPress plugin for this script yet but if you are interested in the implementation (which is easy), we can talk about it some other day.

Missing Reverie 4?

You can still download Reverie 4 on Github or view the code on the repo.

This post Reverie 5 is here was written originally at ThemeFortress.

Setting up the Environment

First you need to have Compass installed. There are already good tutorials on the web, check them below for detailed instructions whether you are on Windows, Linux or Mac.

• Install Compass
• Getting started with Sass and Compass

And also instead, you can install softwares like LiveReload which has a nice UI to help you get started (though sadly the Foundation updates within the bundle are not so frequent).

Install Foundation Gem

The official documentation of Foundation has a detailed guide on how to obtain the latest Foundation via Ruby Gem.

Creating Your First Project of Foundation

Now you have both Compass and Foundation gem installed, it’s time to create your first project using Foundation. First in terminal (Windows users may use alternative applications) on Mac, use cd to navigate to your project folder and enter the following.

Then you should have a folder with all the necessary foundation files in place. However, this is not a necessary step for using Sass with Reverie but a general one if you want to create a Foundation project.

Using Sass with Reverie

Now you’ve downloaded the latest version of Reverie, unarchive it and move to your desired location, probably the local development theme directory of WordPress. Reverie contains the config.rb file which calls Foundation and sets proper directories of output of CSS files. To start using Sass with Reverie, what you need to do is simply enter the following command in terminal.

I personally use MAMP on my Mac to run the localhost for all the development and the directory you see above is within the application. Of course, you need to change the folder and directory into yours. Since all the setting files are already in place, the above command should give you a clear go sign and you can get started right away.

Using Sass with Reverie Child Theme

Some folks asked questions about how to use Sass with the child theme of Reverie. It is quite similar to the process above but there is few things to note.

First, Reverie comes with a complete CSS file of all the Foundation styles, so in the child theme, you don’t need to compile those CSS files again and instead, just use the Foundation mixins and Sass to quickly create your child theme.

Follow our previous instruction to create the child theme. Then copy the config.rb to your child theme’s directory. Depending on your preference, you can change the css_dir and sass_dir, for example, to the root directory for a simpler structure. Now you just need to run the terminal command as the previous step (of course, with the folder name you created for your child theme) to start Compass.

Also in order to use Mixins of Foundation, you will also need to import foundation gem to your new Sass file in your child theme. Simply add @import "foundation"; to the head of the Sass file will do the job.

Other Troubles?

Still having problems running Compass and Sass with Reverie? Let me know in the comment below or open a new thread in the forum.

This post Set Up Compass and Sass for Reverie was written originally at ThemeFortress.

There are also other icon fonts on the web if you don’t like Foundation’s. Foundation Icon Fonts version 3 provides a better integration with Foundation framework (and of course Reverie) so you don’t need to worry about the size or padding problems when you use services like Fontello or IcoMoon. But apparently, you are limited to 283 fonts in the set, which is a lot more than you can ever use.

The implementation is simply, and the documentation is already provided on ZURB’s playground. Download the file and place them in your CSS folder, link to the CSS in your HTML and you are all set. If you are using Reverie, the process is similar but to keep the file organized, you may want to apply the follow procedures.

After download the package, all font and CSS files are in the single folder, and we could do better than that. Open foundation-icons.css and change the first 16 lines to below. This helps to relocate the font files.

• Move the foundation-icons.css to css folder under Reverie.
• Create a folder named font and move the font files foundation-icons.[eot/ttf/svg/woff] to the folder.
• Enqueue the CSS using the below code. Place the code in lib/enqueue-css.php if you use CSS or lib/enqueue-sass.php if you use Sass.

Then use the following code in the template to call the icon fonts.

This post Use Foundation Icon Fonts in Reverie was written originally at ThemeFortress.

Why not bbPress?

We had a forum running on bbPress. It integrates well with WordPress but that’s the end of the story. It certainly won’t compete with other commercial packages out there due to the limit time and resources the developers can put in the project. bbPress is a simple forum which needs a lot of plugins to get started and managing the forum from WordPress backend feels like writing another post.

So we are running on Vanilla

So we are running on Vanilla forum, a lightweight yet powerful package. Instead of using the stable version which has been around for a year, we are actually running on the latest beta 2.1b. It’s a production-ready version despite the beta sign and was dramatically improved over the stable version.

Vanilla also has a WordPress plugin for integration of comments and profiles, which we are not going to use at this point. For friends who posted on Google Group, will see if I can move those threads to the new forum for archive purpose.

Go to Forum

This post Introducing New Forum was written originally at ThemeFortress.

Once you create an account, you can start off to add your feeds, or even the Feedburner migration. It provides some basic features including a counter, as well as daily Email newsletter. URI.LV even has a WordPress plugin and once installed, you will be able to access to the stats right in the dashboard. Well, that’s the theory. At the time of testing, I found myself ending up at the create feed screen which never proceed. It may be just the error on my side and will check back later to see if it work.

This post FeedPress Feed for Your Blog was written originally at ThemeFortress.

Alternatives are plenty, but as not being an average user, I have few hundred of feeds including all my daily readings like news, WordPress related, design stuffs and hundreds of others, I simply cannot move to Feedly, which simply display a few items in some fancy ways, together with a lagging interface slowing down everything on my old MBP.

What are the Options?

The Old Reader

The Old Reader is, probably the best alternative out there. It has a vintage design, like its name, and somehow (will) remind you of what Google Reader used to be like in the future. The migration is simple, login using your Google account, import your subscriptions by entering your password, or simply use Takeout to download your feeds and upload. It takes a while to import everything in the background, so be patient. However, the service is still under beta and is a bit unstable, and slow from time to time during the test.

Feedly

I don’t personally use Feedly, but have to mention, at least at the point that the company is smart enough to  encourage users to make the move from Google Reader right after Google’s announce. At the time of visiting, the speed is slow, and guess it may be the reason that everybody else is looking for alternative and busy moving their feeds before the sky falls on them. Feedly, how smart.

Still Looking

There are lots of websites recommending a similar list so I will just stop here now, but will keep on searching, and will update when I find a good one that I can actually use. Luckily, I am on Mac and use Reeder in additional to Google Reader, and the developer seems to have a new plan in mind and let Reeder run without Google, similar to Feedly.

It is a nightmare to some users but at the same time, a great opportunities to developers who already establish a reputation, to reinforce what has been diminished which might somehow lead to price reduce or whatsoever. Now it’s the time. Last but not lesast, Reader will gone, and what’s next? It occurs to me that I cannot trust Google anymore to put everything on their platform, and probably the most obvious one, Feedburner, it’s time to change before it’s too late. And what if the next is Gmail, Chrome? Well, guess it’s time to change your Email address now.

This post Looking for the Next Google Reader was written originally at ThemeFortress.

First, make sure you are using the latest version of Reverie, I’ve just made some tweaks today to better support child theme and you are better off download again if you are not sure. By default, Reverie 4 is in favor of Compass and Sass, whose CSS output locates under css/ directory and will be loaded directly by Reverie for main stylesheet. If you start to create a child theme right away, you will encounter problems that your child theme’s CSS is not working. That is because Reverie loads Sass’s output CSS using template directory instead of stylesheet directory. Thus in this case, your child theme’s CSS will not be loaded. However, there is a quick way to fix it, by switching to the vanilla CSS mode. I wrote the instruction in yesterday’s post so just copy and paste below.

September 9, 2013 For folks who want to use Sass for child theme, check out the latest tutorial.

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.

Once this is done, Reverie will automatically load the vanilla style.css under the root directory (the best practice of stylesheet directory instead of template directory), and when you create a child theme, it will properly load your child theme’s CSS instead of Reverie’s.

To create a child theme, you can follow instructions on WordPress Codex. I’ve made the template below, copy and paste into your child theme’s style.css.

If you still have problems, let me know in the comment below.

This post Create a Child Theme of Reverie 4 was written originally at ThemeFortress.

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.

Download – Github – Demo

This post Reverie Framework 4 Now Available was written originally at ThemeFortress.

To replace the icons, navigate to the below address and drop the icons.

/Library/PreferencePanes/Box Sync.prefPane/Contents/MacOS/BoxSyncHelper.app/Contents/Resources/

Original black icon credit to medamayaki.

Download the icon set here.

This post Box.com Menu Bar Icon for Your Mac was written originally at ThemeFortress.