Zurb Foundation 4 Site Profile

[pwired]

Wished I had the time for learning foundation 4. You guys seem to have lots of time there.

[OrganizedFellow]

Wished I had the time for learning foundation 4. You guys seem to have lots of time there.

There's not much to learn. Well, for me, I have found it to be really quite easy to use and generate a quick layout.

[Beluga]

Wished I had the time for learning foundation 4. You guys seem to have lots of time there.

This might help: http://www.lynda.com/Foundation-tutorials/Up-Running-Foundation/122442-2.html

[pwired]

Thanks for that link beluga. I learned a lot from lynda courses in the past.

[cstevensjr]

This might help: http://www.lynda.com/Foundation-tutorials/Up-Running-Foundation/122442-2.html

Thanks for this great link.  I just took the course and it was very helpful. 

[asosking]

Another good tutorial:

http://webdesign.tutsplus.com/sessions/foundation-for-beginners/

[tony]

Hi Ryan,

can you please list briefly the steps to update  ZURB Foundation? For example what I have to do when I make some local changes and re-compile the scss file?

thanks,

Tony

[ryan]

can you please list briefly the steps to update  ZURB Foundation? For example what I have to do when I make some local changes and re-compile the scss file?

I've not attempted to modify the SCSS files or anything like that. The Foundation that comes with this profile is just a stock version of it, directly from their ZIP file. To update it, you simply replace the /site/templates/foundation/ directory with a newer one downloaded from their site. 

[Harmster]

Hey ryan,

I love this profile, great for just creating a tool real quick. However, when I started a new project for a coworker of mine and installed a fresh install of PW + this profile I encountered this error:

• Notice: Undefined variable: onlyViewable in /home/macleod/public_html/staging/wire/core/Page.php on line 807

And it looks like:

[adrian]

There is a bug in Page.php

Easy fix though:

http://processwire.com/talk/topic/4141-foundation-template-problem-in-top-nav-bar/

[Harmster]

Thanks fixed it for me

[Zahari M.]

A tip for updating Foundation.

Not sure if its relevant or not guys... but recently I tried to update the foundation directory to the latest version. For some reason, maybe due to me, maybe not, the site broke as it could not seem to load the style sheet / js. After much head scratching, turns out the foundation directory / files permissions and group / owner were all wrong.

After struggling with this for ages... I have now turned on the groups and permissions columns in my ftp client and now look at them very closely!

Also, whilst you can use terminal to do this, there is the dual pane Mac program - Path Finder, which amongst many other things enables you to easily see these same details beside your filenames, locally on your machine

[Zahari M.]

Another tip for anyone working with the PW Foundation theme....

You might want to consider editing the viewport to this, i.e. adding the initial scale bit.

<meta name="viewport" content="width=device-width initial-scale=1.0" />

I found that I was getting unwanted text resizing on the ipad when swapping between landscape and portrait.

In addition I was getting the "mobile version" of the top nav bar in landscape mode.

Editing the viewport values as above solved these issues for me.

[Manol]

Any plans of getting it on the admin area?

[Zahari M.]

Another tip for anyone working with the PW Foundation theme....

You might want to add this into your stylesheet:

body{-webkit-text-size-adjust:100%}

On my iPhone 4S I needed to add this to stop the text enlarging when going from potrait to landscape.

[Manol]

Is it possible to output my own markup in one single page, without changing the config.php file, in some cases I wish not to output the header, sidebar, etc.

[adrian]

Manol,

You can definitely use one file for the structure. Ryan has a pretty good explanation of the approach here:

http://processwire.com/talk/topic/740-a-different-way-of-using-templates-delegate-approach/?p=6174

[ryan]

Not sure if its relevant or not guys... but recently I tried to update the foundation directory to the latest version. For some reason, maybe due to me, maybe not, the site broke as it could not seem to load the style sheet / js. After much head scratching, turns out the foundation directory / files permissions and group / owner were all wrong.

I've had this same issue when updating Foundation. For some reason they've got odd file permissions in their download and they need to be adjusted when moving to a web server. 

Another tip for anyone working with the PW Foundation theme....

Thanks for the tips. I have added these to my version of the profile and will test and commit them.

Any plans of getting it on the admin area? 

I like Foundation and briefly considered using it behind an admin theme, but found there's just not much benefit in doing so. Most of the stuff that Foundation provides seems to be more worthwhile for front-facing stuff. I went through each of Foundation's features and found none of them would get used on the admin side, so it didn't seem to be a worthwhile effort. 

Is it possible to output my own markup in one single page, without changing the config.php file, in some cases I wish not to output the header, sidebar, etc. 

See the note here about the $useMain option. 

[Russell]

I'd like to start a new PW site using Zurb 4. I'm just looking at the PW Zurb profile and wondering how much integration into PW is done, vs just starting with a basic PW profile and adding Zurb 4 myself?

I want a completely different layout & setup to the profile, so which is easier to do, strip the current profile or start from scratch? I might be biting off a bit much here, as I'm trying to learn Sublime Text, HTML5, CSS3, SASS, Compass, Zurb and Processwire all at the same time

Thanks.

Russell.

[apeisa]

I suggest trying from foundation profile. it is very quick to change layout. Also it teaches you some more advanced usage of pw site building. Default is the most simple starting point though, so if you are new in web development in general, then it is best way to go.

[Russell]

Thanks for the suggestion.

I had a browse through the theme/ files and yeah, reusing whats there does seem like it'll save some work. I guess the biggest issue afterwards is just tidying up by removing all of the unnecessary parts for your final site, to have it nice & clean. Hopefully by the time I get that far, I'll understand enough to know what I need to know.

[ljones]

I understand how the various templates add to the _main.php file, but is there a way to still use the _main.php file and easily subtract the sidebar? For example, I want a portfolio page that spans the 12 columns, with no sidebar.

This was my solution:

• copied the _main.php file
• renamed it to portfolio.php
• added $useMain = false in the template header
• deleted the sidebar column and changed the body copy div to "large-12 columns"
• created a portfolio template without the sidebar in the admin section

It works, but I am guessing there is a better, more elegant approach.

[ryan]

If it's just one page that you have that situation on, then you can check for the page in the _main.php file and bypass the usual output, i.e. 

_main.php

<div id='content' class='row'>

<? if($page->id == 1): // homepage ?>

  <div class='large-12 columns'>
    <?=$body?>
  </div>

<? else: // regular 2-column output ?>

  <div class='large-8 columns'>
    <?=$body?>
  </div>
  <div class='large-4 columns'>
    <?=$side?>
  </div>

<? endif; ?>

</div><!--/#content-->

For cases where I want the option of specifying something entirely different for <div id='content'> from any template, I'll setup the option to specify a $content variable. From the _init.php you set it to be blank (the default value):

_init.php

$body = $page->body;
$side = '';
$content = ''; // add this

Then in your _main.php, you check for the presence of it. When present, the usual body/sidebar layout is bypassed and you get to specify something entirely different, simply by populating the $content variable, rather than $body or $side. 

_main.php

<? if($content): // custom $content ?>

  <?=$content?>
  
<? else: // regular 2-column output ?>

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

<? endif; ?>

From that point forward, your templates can choose to populate $body and $side, or if the layout needs are different, then populate $content instead. Here's an example of what a hero + 3 boxes below homepage template might look like:

 

home.php

$content = "

  <div id='content' class='row'>
    <div class='large-12 columns'>
      <img src='...' /><!-- giant hero image -->
    </div>
  </div><!--/#content-->

  <div id='features' class='row'>
    <div class='large-3 columns'>
       <p>Feature box 1</p>
    </div>
    <div class='large-3 columns'>
       <p>Feature box 2</p>
    </div>
    <div class='large-3 columns'>
       <p>Feature box 3</p>
    </div>
  </div><!--/#features-->

  ";

[WinnieB]

OK, I'm getting serious about using ProcessWire for my personal website…better late than never!

One little thing that's confusing about the Foundation profile:

When freshly installed, there is a page called "Templates" that refers to "head.inc" and "foot.inc" which don't seem to be present in this profile.

I believe it's a leftover page from the default profile, but it caused a couple hours of cognitive dissonance…"What the…where the…huh…Oh, I see!" 

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

Surely not an issue for the more experienced, but could save newcomers a bit of head-scratching.

Thanks!

[Beluga]

Foundation 5 will be released in a week's time (info from their Twitter account): http://zurb.com/article/1274/we-feel-the-need-the-need-for-speed-what-