Zurb Foundation 4 Site Profile

[ryan]

Good to hear about the new version of Foundation! I will plan to update this profile for Foundation 5 (and add any other necessary description files) as soon as there's time to do it. 

[jacmaes]

Foundation 5 has been released. One of the key new feature is that the Interchange plugin now enables the dynamic loading of HTML fragments depending on viewport width. Ryan, it would great if you could include an example of a PW integration of that feature.

[dragan]

Is it possible to include a page with the Foundation profile that describes its template structure?

I'm sure that would be easy to do, e.g. in a "readme" file. But generally speaking, just have a look at the template file(s), and all the include / require files, and that should give you a good overview of "what happens where".

[ryan]

Glad to see Foundation5 out. I've spent some time there and like what I see. Though I tried to install the SCSS version and can't seem to get my computer to meet all the dependencies (I'm running an old OS X), so looks like I'll have to use the regular non-sass version. But other than that Foundation5 really looks great. I'll plan to upgrade the Foundation profile in January when my schedule starts to clear up a bit here. I want to get PW 2.4 released stable before that. As for how to use the interchange plugin (whether in or out of PW), I think that Foundation's docs will probably be the better place for that. But if I see any good opportunities to use it in the profile update I will.

[Beluga]

Maybe the migration documentation will be better by Jan 2014, but I thought I'd share this little rant:

this comes out with tonnes of breakage that isn't mentioned in the migration guide. The inclusion of FastClick breaks loading in the head, section has been rebroken down into separate plugins, and now requires element ids. Buttons now require an explicit class for correct size (but not colour). I'm sure there are others.

[Pete]

I've just been playing with upgrading the Foundation 4 profile to version 5. Here are my extensive steps for anyone that wants to attempt them:

1. Overwrite all the .js and .css files
2. Change <nav class="top-bar"> to <nav class="top-bar" data-topbar> in _main.php
3. Fin!

The Orbit slider works fine, and I wholly approve of the updated styles as they seem more refined in v5.

I think it helps that the ProcessWire Foundation profile doesn't use much more than the grid, Top Bar and Orbit so upgrading wasn't too tricky.

[Pete]

There are maybe a few slight margin/padding tweaks that might need making to main header in PW's main.css, but that's all I've found today and I've been working with it all day long.

[houseofdeadleg]

I've just been playing with upgrading the Foundation 4 profile to version 5. Here are my extensive steps for anyone that wants to attempt them:

1. Overwrite all the .js and .css files
2. Change <nav class="top-bar"> to <nav class="top-bar" data-topbar> in _main.php
3. Fin!

The Orbit slider works fine, and I wholly approve of the updated styles as they seem more refined in v5.

I think it helps that the ProcessWire Foundation profile doesn't use much more than the grid, Top Bar and Orbit so upgrading wasn't too tricky.

I had to add a few classes to the masthead section to make it resize correctly at smaller sizes as well, but otherwise its looking pretty good so far.

[ljones]

Ryan,

That explanation was awesome! I could not get the if/else code to work, but it really does not matter because I just put the specific code I needed in the home template like this:

<?php $content = "

<div id='content' class='row'>
   <div id='bodycopy' class='large-8 columns' role='content'>
     $body
   </div>
     <aside id='sidebar' class='large-4 columns'>
     $side
   </div>
</div><!--/#content-->

";

 And in the portfolio template I did this: (I am pulling fields from the child pages.)

<?php
       foreach($page->children as $child) {
       $img = $child->port_thumbnail->first();
       
       $portfolioGrid .= "
        <div class='large-3 small-6 columns'>
           <a href='$child->url'><img src='$img->url'></a>
             <div class='panel'>
              <p>$child->title</p>
             </div>
        </div>                        
       ";
         }  
    
$content = "

<div id='content' class='row'>
 <div class='large-12 columns'>
   <div class='row'>
   
   $portfolioGrid
   
   </div><!--row-->
  </div> <!--large 12-column-->
</div>	<!--large 12-column-->

";

I am not sure if that is the best practice for getting the portfolioGrid varible into the content section, but it works. If something is wierd, let me know. I tried to do it as a function in the _nav.php file, but that proved to be a little too difficult for me at my coding level.

I LOVE not having to include the foot.inc and header.inc in all of these templates. Thanks again!

[ryan]

It looks fine to me. I would just add a check that the $img exists, before outputting it in your $portfolioGrid variable, i.e. 

if(!$img) continue; 

[daerias]

it would be great if you could create a ZurbFoundation5-SiteProfile soon   Thank you very much!

[Joss]

Oh, I got one of those.

This is not for general release.

It was built against the current dev of PW, has my own variation of the new admin.

It has most of the fields and templates stripped away and is a bit of a work in progress.

It has the latest jquery 1x loaded, font-awesome loaded.

It has two three footers - one for any footer markup, one with just script references and the third to wrap up the page (very obvious stuff and clearly marked)

It uses foundation.js, rather than the min version, so that you can add plugins to pages that need them rather than have them global. But you can change this if you wish.

It has a couple of other bits, but go and explore!

EDIT:

Just uploaded one with a basic Readme and without my template-admin in it.

Treat is as a starting point for playing around!

http://meinthemiddle.co.uk/found5-profilev2.zip

Edited January 4, 2014 by Joss

[gebeer]

Hi all,

great to see that so many of you are interested in an update to Foundation 5. So am I.

I'm currently working on a Foundation 5 profile based on Ryans great work.

I use the scss version of foundation as to have more control over the compiled css (compiling with compass).

Also I'm including scss replacements for the main.css that get compiled together with the foundation stuff. So at the end I will have only one css file, minified.

Not sure yet how to handle the foundation JS. At the moment I'm using the minified version with all modules included. But it would be nicer to generate my own js file that includes only the project-relevant modules. As there is no JS minifier included in Foundation framework, I'm looking for other ways to achieve this. If anybody has got an idea, please post here.

Will take me a few more days until I release my work because tomorrow I'm off to the beach for a couple of days with no www access. But plenty of sun and Sangsom

[Craig]

The All-in-One Minify module is great for combining and minifying both CSS and JS

[gebeer]

@Craig

thank you, I will take a look and see how I can utilize this for my project.

Cheers

gerhard

[Joss]

Oops!

I am also doing a fuller Foundation 5 demo profile.

I am using the SCSS files for minimal modifications - it is more or less the standard Foundation css with just some colour and font changes to make it more PW.

It demos just a couple of bits of Foundation functionality such as dropdown, the top bar menu, orbit and tabs.

Nearly finished....

[gebeer]

just a little followup:

I'm still working on my template. Having trouble with correct configuration of compass / foundation scss to output the desired file in the desired location. Should be straight forward, I thought. But foundation documentation is a bit scarce on that topic. So I'm going through lots of trial and error with no satisfactory result so far.

So it will take me take some more time until I can release something.

Also hanging in for Joss's template, sounds great

[adrian]

Joss' Foundation 5 template:

http://processwire.com/talk/topic/5293-zurb-foundation-5-profiles/

[gebeer]

I also released my Foundation 5 SCSS template today. You can check it out at Joss's Foundation 5 template thread.

Have a great day!

[cork]

Apologies in advance for the n00b question.

I am trying to add a Comments field to a site using the Foundation 4 site profile. I followed the instructions for the Comments Module, created & configured the comments field, and created a new template (comments-page.php).

However, those instructions were written for the default PW site profile, and the template structure in the Foundation 4 profile is quite a bit different. How would I go about adding my comments field below the main bodycopy of my comments-page template? Simply adding

•  <?php echo $page->comments->renderForm(); 

 

to the comments-page.php template results in the comments entry form appearing at the top of the page.

[adrian]

Hi cork and welcome to PW.

I believe all you need to do is this:

$body .= $page->comments->renderForm(); 

The $body variable is built with the various pieces of content that you want to show in the template and is echo'd here in the _main.php file:

https://github.com/ryancramerdesign/FoundationSiteProfile/blob/master/templates/_main.php#L113

Or if you want to keep things clearer you could do:

$comments = $page->comments->renderForm(); 

and then echo $comments somewhere else in the _main.php file. 

So much flexibility in PW which can be daunting initially, but you'll come to love it very quickly

Let us know how that goes for you.

[cork]

adrian - thank you! That worked perfectly.