Zurb Foundation 4 Site Profile

[ryan]

ProcessWire Site Profile Using Zurb Foundation 4

• This is a drop-in replacement for the default ProcessWire site profile.


• See the live demo at: http://processwire.com/foundation/
  
• It is mobile-first and fully responsive, capturing all the benefits of Zurb Foundation 4.


• Ready to be expanded upon with built-in support for deeper levels of navigation nesting in the sidebar.


• Pagination ready with Foundation-specific pagination output, when/if you want it.


• Improved search engine, relative to the basic profile.


• Library of Foundation-specific markup generation functions included, primary for generation of navigation (in _nav.php).


• Uses ProcessWire 2.3+ prepend/append template file settings making it easy to work with.


• It is largely stock Foundation 4 in terms of look and feel, with a few tweaks. 

 

To Install

 

Download this profile from GitHub or mods.pw/4u. Start with a copy of ProcessWire 2.3 or newer, and its default site profile.

 

If starting with an uninstalled copy of ProcessWire

• Replace the /site-default/templates/ directory with the templates directory from this profile.


• Replace the /site-default/config.php file with the config.php file from this profile.


• Run the ProcessWire installer.

If starting with an already-installed copy of ProcessWire

• Replace the /site/templates/ directory with the templates directory from this profile.


• Add the following two lines to your /site/config.php file:

$config->prependTemplateFile = '_init.php';

$config->appendTemplateFile = '_main.php';

 

Desktop Screenshot

 

 

 

Mobile Screenshot

 

[MatthewSchenker]

Greetings,

Very interesting. I have been on the fence regarding CSS/JS frameworks for some time (experimenting but never full adopting them), but Foundation has been the one I like the best. I just have not felt sufficiently motivated to stop using my own code. And yet, I understand that it might be best to just start using a framework.

With your new profile, it might make the jump even easier!

I look forward to giving this a try, and I will report back on my experiences.

Ryan -- THANK YOU so much for all your tremendous work, creativity, and endless generosity.

Thanks,

Matthew

[cstevensjr]

Ryan, You constantly make working with PW too exciting.

[kongondo]

Wow! Very much appreciated, thanks Ryan! I've been stuck on Foundation 3 since I've never really grasped the "new" Foundation 4 syntax. I'll study this profile to see if I can get it

[MarcC]

Thanks Ryan! This is really great and a huge timesaver. Also learning new stuff about 2.3 this way is ideal.

[renobird]

Ryan,

Thank you for sharing this — I just spent an hour dissecting, and learned some new tricks.

Much appreciated.

[Hieu Do]

Thanks so much Ryan, I'm just getting started with PW and am totally new here. Being a Wordpress developer for at least 5 years, now I realize that I've been stucked too long in its fixed structure. PW opens my eyes and gives me more innovation. 

This new site profile is awesome and totally convince me to stay with PW.

Again, thanks so much Ryan. You're a super man.

[underk]

Superb work.

However I would like to let you know that foundation 4 is only supporting IE9+. It is sad because it seems more flexible than bootstrap(which is IE7+). If you can deal with this, then give it a try!

[videokid]

Indeed, nice work... 

Every time I think OK... now I have something solid, let's actually start building a website, I encounter something new here and I want to try it out... 

Anyway I can live with IE9+, less will get a warning

1 question, why the use of single and double quotations?

ex

<meta name='description' content='ProcessWire is an open source CMS and web application framework aimed at the needs of designers, developers and their clients. ' />
<link rel="stylesheet" href="/zurb4site/site/templates/foundation/css/foundation.css" />

	<div id='topnav'>
		<div class='contain-to-grid'>
			<nav class="top-bar">
				<ul class="title-area">

why not all " "

or am I just being difficult?

Regards!

[Pete]

Oh ryan, I need this today and here it is

Your timing is impeccable as ever! Excellent work once again.

[teppo]

@videokid, take a look at _main.php:

	<?php if($page->summary) echo "<meta name='description' content='$page->summary' />"; ?>

	<link rel="stylesheet" href="<?=$config->urls->templates?>foundation/css/foundation.css" />

String interpolation only works when variable is in double quotes and in those cases it's just easier (and source-wise more readable) when single quotes are used instead of escaped double quotes (\"). On the other hand, elsewhere it just makes sense to use double quotes

[ryan]

I just posted version 2 of this profile, which makes typographic tweaks to several styles. It also adds support for photo captions, seen on the typography tests page. Also, there is now a demo site of this profile. 

However I would like to let you know that foundation 4 is only supporting IE9+.

I'm okay with only supporting IE9 and newer for the desktop view. IE8 and lower can have the compatibility mobile view. It's not like IE8 and older are blocked. They just simply get a view that works consistently in older browsers (which is basically the mobile view). I think this is smart, and better than trying to make old browsers display like new browsers. Supporting old versions of IE always means extra bulk and shenanigans in the code. The less legacy-IE monkey business, the better, IMO. But if you are building a complex desktop grid for an audience using old IE versions (like inside a government office that has standardized on IE7 or something) then Foundation is probably not the right framework for that. Here's what this profile looks like in IE8 if you are interested. 

why not all " "

or am I just being difficult?

The rule is that you have to start and end an attribute with the same style quote. Otherwise, they are interchangeable. I prefer to use single quotes myself. But if I'm copying/pasting something, I'm not going to bother going and changing double quotes to single quotes either. But ultimately the biggest reason is what Teppo highlighted: what makes the most sense in the context where they are used. 

[ryan]

I've been stuck on Foundation 3 since I've never really grasped the "new" Foundation 4 syntax.

I always liked Foundation 3, but it just seemed slower (on my computer) than other frameworks. Foundation 4 doesn't seem slow at all anymore.

I was initially confused by the syntax with class names like "small-4 columns" and "large-8 columns", etc. But it's actually very simple: if you want a div to have 4 columns at small (mobile) and at large (desktop) then use "small-4 columns" ...Foundation is literally mobile-first, so the "small" settings inherit through to the large settings, unless you override them. But if you want it to only have those 4 columns on at large (desktop), and 1-column stacked on mobile, then use "large-4 columns" ... which would be like the behavior of Foundation 3. If you want to define different column amounts for small and large, like say 2 columns at small (mobile) and 4 columns at large (desktop) then specify both in the class, like "small-2 large-4 columns". I never got far enough in Foundation 3 to say for sure, but I don't think it had that distinction...I think it just stacked everything at small. 

[kongondo]

Thanks for the explanations Ryan. The "small-x-columns" and the like are what stumped me and I didn't have the energy to dig around the code to find out what was happening. The documentation on their site was really sparse about this issue. 

[ryan]

I actually thought this Foundation 3 to 4 Migration Guide was really helpful in that regard. Even though I never technically knew Foundation 3 very well, it served as a good starting point for Foundation 4 in general. 

[kongondo]

Yeah, I'd seen that, thanks. I'll have to revisit it...

[apeisa]

This is great. One confusion though: I tested demo site on my mobile (android) and navigation didn't allow going any page that has children. It always opened the menu, no matter where I tapped (arrow or page title).

[OrganizedFellow]

Foundation4 by far been my favorite framework of choice.

Sublime2 + Emmet plugin & Foundation4 = some pretty quick layouts.

[arjen]

OrganizedFellow, holy *** that Emmet stuff is pretty awesome! Thanks for sharing!

[videokid]

@teppo,

@Ryan

Just Saw Ryan's post also...

well, that covers it all

Edited July 10, 2013 by videokid

[arjen]

Offcourse thanks to ryan too! Great work as usual! Your programming is really great to follow and great to learn by!

[raydale]

I've just seen this. Great work and thanks Ryan!

[SteveB]

Improved search engine, relative to the basic profile.

Care to elaborate on that?

[teppo]

Care to elaborate on that?

Short excerpt from search.php of Foundation site profile:

	// if the above doesn't find anything (perhaps due to MySQL minimum word 
	// length or stopwords), switch to non-indexed phrase match
	if(!count($matches)) $matches = $pages->find("title|body%=$q, limit=$limit"); 

This is actually pretty nice idea -- use faster method first and only if it seems to fail switch to slower one. Don't know how much difference that really makes, but still.

Also: there's a pager now, which is pretty obvious improvement already

[ryan]

This is great. One confusion though: I tested demo site on my mobile (android) and navigation didn't allow going any page that has children. It always opened the menu, no matter where I tapped (arrow or page title).

This always seems to be an issue when translating multi-level drop down navigation to mobile. The other issue with dropdown navigation is that even on the desktop, people may miss the index pages, which might be important. The renderTopNav() function in /site/templates/_nav.php has a "repeat" option, that makes it repeat an index page as it's own first child. This solves both issues. Before I had it default to true, but set it to false later on for some unknown reason. I've switched it to be the default again.