Zurb Foundation 5 Profiles

[Joss]

ah good - was hoping someone would actually play with it!

[Damienov]

Added options if you do not want a dropdown on a specific parent on the navigation

function renderChildrenOf($pa, $root = null, $output = '', $level = 0) {
    if(!$root) $root = wire("pages")->get(1);
    $output = '';
    $level++;
    $nodrop = 'product'; //set no dropdown page
    foreach($pa as $child) {

        $class = '';
        $has_children = count($child->children) ? true : false;

        if($has_children && $child !== $root) {
            // if have child with specified no dropdown page
            if ($child->template == $nodrop) {
                $class .= '';
                $childUrl = $child->url; // add link back again
            } else {
                $class .= 'has-dropdown'; // sub level Foundation dropdown li class
                $childUrl = "#"; // stop parents being clickable
            }

        } else {
            $childUrl = $child->url; // if does not have children, then get the page url
        }

        // make the current page and only its first level parent have an active class
        if($child === wire("page")){
            $class .= ' active';
        } else if($level == 1 && $child !== $root){
            if($child === wire("page")->rootParent || wire("page")->parents->has($child)){
                $class .= ' active';
            }
        }

        $class = strlen($class) ? " class='".trim($class)."'" : '';

        $output .= "<li$class><a href='$childUrl'>$child->title</a>";

        // If this child is itself a parent and not the root page, then render its children in their own menu too...
        if($has_children && $child !== $root) {
            $output .= renderChildrenOf($child->children, $root, $output, $level);
        }
        $output .= '</li>';
    }

    $outerclass = ($level == 1) ? "left" : 'dropdown';
    return "<ul class='$outerclass'>$output</ul>";
}

[OrganizedFellow]

@gerhard

I have the latest versions of Ruby and Compass.

I followed all the instructions in your readme.md file.

After I've finished everything, the finished template looks identical to Ryans Foundation 4 version.

Is it supposed to be identical? or should it look different?

I looked at the Demo that Joss set up and version 5 looks remarkably different than 4.

I should note that I've barely been playing with scss/sass/ruby/gems for a few days. Mostly following tutorials. I have used Foundation since its very early version 2 But only ventured to play with its scss version when I came upon this thread.

[Damienov]

@gerhard

I have the latest versions of Ruby and Compass.

I followed all the instructions in your readme.md file.

After I've finished everything, the finished template looks identical to Ryans Foundation 4 version.

Is it supposed to be identical? or should it look different?

I looked at the Demo that Joss set up and version 5 looks remarkably different than 4.

I should note that I've barely been playing with scss/sass/ruby/gems for a few days. Mostly following tutorials. I have used Foundation since its very early version 2 But only ventured to play with its scss version when I came upon this thread.

just curious though, have you run

foundation update

on the project folder?

[gebeer]

@gerhard

I have the latest versions of Ruby and Compass.

I followed all the instructions in your readme.md file.

After I've finished everything, the finished template looks identical to Ryans Foundation 4 version.

Is it supposed to be identical? or should it look different?

I looked at the Demo that Joss set up and version 5 looks remarkably different than 4.

My template is supposed to look identical with Ryan's. I took a copy of his template and amended some code to make it work with Foundation 5.

The main difference to Ryan's Foundation 4 template is that mine uses compass/scss while Ryan's template uses the default Foundation 4 style.css. Compass/scss makes styles easier to adapt. And all the styles are being compiled into one css file.

I put this together mainly to learn more about Foundation and compass/scss myself

Joss's demo looks different because he changed the styling in the css file along with some other stuff. His template doesn't use scss and compass (as far as I'm aware).

[Joss]

My template includes all the original scss foundation files installed and ready to go and the styling has been created using compass. 

The current version of it has less styling than the demo so this it is more or less the default Foundation 5 installation as you would download from Zurb. I have kept all the original Foundation 5 file names.

Additional site layout classes and a couple of ProcessWire specific classes are kept in a separate css file to save confusion for anyone who has used Foundation previously.

I used Prepros to compile foundation.css

[gebeer]

@Joss,

sorry for having remembered this wrong. It's been a while since I was looking at your template in detail.

[Joss]

Me too - just realised that Foundation is on version 5.2, so I will update later

[Joss]

I have updated the templates folder to include Foundation 5.2

[bwakad]

would anyone be so nice to give me the proper latest link to the site profile from this topic? I see so many links from different users, it's hard to see a difference.

By the way: I like the 'mobile' menu from processwire/modules/foundation4 (but I like to use the latest foundation)...

[adrian]

There are two profiles linked to and they are both in the first post of this thread.

gebeer's is the one most similar to the Foundation 4 profile created by Ryan (basically exactly the same except that it is running on v5).

[Joss]

Mine is on github and I update it from time to time. As Adrian said, all the info is in the original post.

[gebeer]

@bwakad

my template is also on github: https://github.com/gebeer/pwfoundation5

You find instructions for installing and also for update of Foundation on github in the Readme.md.

[Russell]

Just wanted to say thanks guys, on getting these templates up. I started my new sites about 4 months ago in pw2.3, but didn't get far. How I'm trying to get back into it, and need to upgrade to 2.4 & want to use foundation as the base. Not sure which of these two templates to start with, so it'll probably be random choice, or maybe I'll end up trying both

*edit*

I see foundation is currently 5.2.2, so I should just be able to replace with the new foundation files in Joss's version, right? I'm still a newbie with all things web design. Too much hand holding with things like Wordpress,time to get down & dirty...

[Joss]

Yeah, sorry, not had time to update it, but it should just copy over since it is only a minor upgrade.

[Russell]

Cool, thanks. Here goes nothing!

[Russell]

A couple questions if I may Joss. I'm just trying to compare Foundation 5.2.2 files with your template files, and am wondering about a couple of things

1. Did you change the "vendor" directory files? Yours has a custom.modernizr.js that isn't in foundation 5.2.2. The modernizr.js in 5.2.2 is a 0.0.1 revision on your modernizr.js. Also, it seems the ustom one has been copied up one directory level to right below js/ and renamed to modernizr.js

2. There is a jquery.autocomplete.js in yours, not in 5.2.2. Is that needed?

3. Also at the .js level is jquery-1.10.12.min.js and site.js. I'm guessing they are use by Processwire, and have nothing to do with foundation?

If you are able to confirm what ones should be replaced and/or removed, I'd appreciate it.

Thanks.

****EDIT****

So I made the changes I thought appropriate as above, and the site has all loaded up fine so far. Just looking at head.inc and I see it includes the modernizr.js from the /js root level, so those in /js/vendor are not used?

[Joss]

Okay, I have updated the profile to 5.2.2 and got rid of a lot of the legacy bits, like that old JQuery.

It is now a bit easier to understand.

One oddity is that it has affected the top bar menu - the font looks a bit small and out of place, but I cannot work out why for the life of me.

[Russell]

Cool, thanks If I come across anything about the menu, I'll let you know.

[Joss]

It looks like there is something in the foundation css which is removing the padding from menu items - bear in mind that I have compiled the foundation.css file from the scss files, so it may be in there. I don't want to correct it if that is the case, however, as I am trying to use those files unchanged

EDIT: Okay, it is missing a line-height value. Not sure why yet.

EDIT 2: Okay, in _top-bar.scss there is this line missing from line 492 and probably a couple of other places:

line-height: $topbar-height; 

That seems to be the problem

[Russell]

I've put it in two spots, and it seems to correct it.

&:not(.has-form) {

a:not(.button) {

line-height: $topbar-height;

padding: 0 $topbar-link-padding;

background: $topbar-link-bg;

&:hover { background: $topbar-link-bg-hover; }

}

}

&.active:not(.has-form) {

a:not(.button) {

line-height: $topbar-height;

padding: 0 $topbar-link-padding;

color: $topbar-link-color-active;

background: $topbar-link-bg-active;

&:hover { background: $topbar-link-bg-active-hover; }

}

[Joss]

I have opened it as an issue on github for Foundation - there may be an intentional reason why it is not there which I haven't grasped!

[Russell]

Joss,

I just noticed you don't have all /js/vendor files in? jquery.js and fastclick.js are missing, and placeholder.js has been updated. I noticed because I want to use equalizer, and it needs jquery.js. I'm going to replace my with the ones from the foundation download.

*EDIT*

Oh, I found you have jquery and fastclick coming from remote sites in the footscripts.inc. Is that better than using the foundation supplied ones?

[Joss]

Yes, they are being used from CDN, which is often a useful idea - why eat up your own bandwidth? One from google and the other from CloudFlare

[daerias]

could you make a step by step tutorial how could I make my own ZurbFoundation v. 5.3.3 + PW ? it would be great THANKS!