Recently, ZURB released a new iteration of their wonderful responsive framework, Foundation. In order to get Foundation to play nicely with concrete5, you need to do a little tweaking to the files Compass generates for you. Follow the steps below to get a basic Foundation-based theme running on your concrete5 server as painlessly as possible. Note: This might not be the cleanest way to accomplish this task, but it certainly worked for me. ;)

This tutorial assumes you already have a working install of concrete5 set up on your server, and that you have already installed Ruby, Compass, and the Foundation gem. If you're missing any of these components, now would be a good time to go get them.

Steps to Create Your Fresh Foundation 4 Theme

1. Create a clean Foundation installation inside your root themes folder (/themes, NOT /concrete/themes) by running the following commands in Terminal (or Command Line on Windows): a. cd path/to/your-new-theme-folder b. compass create project-name -r zurb-foundation --using foundation Don't forget to create your new theme's description.txt and thumbnail.png image also.

2. Duplicate the file index.html created by the Foundation install. Rename it default.php.

3. Add the following code to default.php directly after the opening head tag: <?php Loader::element('header_required'); ?>. This line includes some necessary concrete5 system code.

4. Remove the title tag from the head. It will be provided by the call to the system code that you inserted in the previous step.

5. Add the following code to the beginning of the href attribute of your external stylesheet links and to the src attribute in your script link in the : <?php=$this->getThemePath();?>/. For an example of how your new links should look, check out the image below.

6. After the final closing div tag and before Foundation's scripts at the end of the body, insert the following line of code: <?php Loader::element('footer_required'); ?>. This loads some scripts needed by concrete5.

7. Remove the following code from the file: <script> document.write('<script src=' + ('__proto__' in {} ? 'javascripts/vendor/zepto' : 'javascripts/vendor/jquery') + '.js><\/script>') </script>. Since concrete5 already loads jQuery, we don't need to load it again.

8. Add <?=$this->getThemePath();?>/ to the src element of all of the script tags at the bottom of the body. Note: If you'd like to minimize the number of HTTP requests, you can download the CSS-only version of Foundation, nab the minified foundation.min.js from the js folder, and include only it instead of all of the scripts at the end of the file.

9. Either in the head, in one of the included stylesheets, or in a new stylesheet, add the following code: #ccm-highlighter { margin-top:-49px; } Thanks to the author of the Foundation 3 How-To for that CSS code.

At this point, your theme is ready to be installed. Head on over to the Themes section of the Dashboard and install/activate your new theme. You should see a fully-functioning responsive layout at this point...woohoo!

There is one problem, though; there are currently no editable regions in the page. If you need a little help getting your new Foundation-based theme ready to edit, check out the basic theme development tutorials. Once your default.php file is editable, you might want to separate your header and footer content into the elements directory of your theme, create some more page types, and create your view.php file...or not. It's totally up to you.