Jump to content

Zurb Foundation 4 Site Profile


ryan

Recommended Posts

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

 

screenshot-desktop.jpg

 

 

Mobile Screenshot

 

screenshot-mobile.jpg

  • Like 33
Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

@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 :)

  • Like 1
Link to comment
Share on other sites

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. 

post-2-0-35292600-1373387241_thumb.png


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. 

  • Like 3
Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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).

  • Like 1
Link to comment
Share on other sites

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 :)

  • Like 2
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...