Just a friendly reminder that Foundation 6 launches today

brajt · November 19, 2015, 5:42pm

Just a friendly reminder that Foundation 6 is out and ready to use!

Did anybody play it already? What are your first thoughts?

juliancwirko · November 19, 2015, 6:06pm

Yeah! There is an official package: https://atmospherejs.com/zurb/foundation-sites but I think it needs some separated docs and some package.js changes (duplicated code in bundle)

I played with the private repo and it is really awesome. New semantic grid approach is great (Scss mixins). You can just do something like:

.container {
  @include grid-row(16) {
    .main-content {
      // 5/16 = 31.25%
      @include grid-column(5);
    }

    .sidebar {
      // 11/16 = 68.75%
      @include grid-column(11);
    }
  }
}

Also there is better js plugins API and Flexbox grid. Standalone starter kits (simple, and advanced) are also great with handlebars support and many Gulp tasks. There are many improvements, accessibility and performance is better too. Motion UI and many other cool stuff.

juliancwirko · November 19, 2015, 9:39pm

Good overview: The Yeti’s Back! Foundation for Sites 6 is Leaner, Faster, and Better

Also I have created a PR for Meteor package. I hope it will be accepted because now the package on atmosphere duplicates code and isn’t well prepared

brajt · November 20, 2015, 3:48am

Sadly the “isn’t well prepared” describes the whole project in my opinion. Seems like they were in a lot of rush. I hope they won’t stop maintaining it right after 6.1.0 like they did with Foundation for Apps.

Especially the documentation, it’s so user unfriendly. Almost to the point of Meteor docs.

But I love the “mixins for everything” approach in 6, it’s way better than before.

I miss few things from Foundation for Apps here, so I’ll still have to hack it into my projects, by it’s a step in good direction.

juliancwirko · November 20, 2015, 10:04am

Yes they have some bugs but they are fixing it very fast Overal I think it is much better than F5 and I don’t know if we should compare it to foundation for apps

ps. PR was accepted, now Meteor package works much better, and it has its own docs

sorenmadsen · November 21, 2015, 8:20am

I added the package with meteor add zurb:foundation-sites and I have the styling parts working – but what do you need to do to get the JS parts up and running? I can’t get tabs, simple close buttons or anything to work.

With ewall:foundation you needed something like

Template.serie.rendered = function() {
 $(document).foundation();
}

for the Foundation stuff to initialize – but this doesn’t seem to work with zurb:foundation-sites

Thanks in advance!

juliancwirko · November 21, 2015, 10:17am

Hmm, this is weird. I have tabs template and it works for me:

(...)
{{> tabs}}
(...)

<template name="tabs">
  <div class="row collapse">
    <div class="medium-3 columns">
      <ul class="tabs vertical" id="example-vert-tabs" data-tabs>
        <li class="tabs-title is-active"><a href="#panel1v" aria-selected="true">Tab 1</a></li>
        <li class="tabs-title"><a href="#panel2v">Tab 2</a></li>
        <li class="tabs-title"><a href="#panel3v">Tab 3</a></li>
        <li class="tabs-title"><a href="#panel4v">Tab 4</a></li>
        <li class="tabs-title"><a href="#panel3v">Tab 5</a></li>
        <li class="tabs-title"><a href="#panel4v">Tab 6</a></li>
      </ul>
      </div>
      <div class="medium-9 columns">
      <div class="tabs-content vertical" data-tabs-content="example-vert-tabs">
        <div class="tabs-panel is-active" id="panel1v">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="tabs-panel" id="panel2v">
          <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
        </div>
        <div class="tabs-panel" id="panel3v">
          <img class="thumbnail" src="assets/img/rectangle-3.jpg">
        </div>
        <div class="tabs-panel" id="panel4v">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="tabs-panel" id="panel5v">
          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="tabs-panel" id="panel6v">
          <img class="thumbnail" src="assets/img/rectangle-5.jpg">
        </div>
      </div>
    </div>
  </div>
</template>

Template.tabs.onRendered(function () {
  $(document).foundation();
});

It works for me that way. I think you can also use ‘reflow’. This is very similar to Foundation 5. You can find more info on the Foundation 5 readme and there is a demo repo with all Foundation 5 components. It could help also in the case with Foundation 6. Links:

http://zf5.meteor.com/

…although with some js plugins new Foundation and Meteor is quite buggy

sorenmadsen · November 21, 2015, 2:25pm

Ahhh! They changed the class name from tab-title to tabs-title – easy miss!

Thanks for your help!

juliancwirko · November 21, 2015, 2:48pm

With Meteor there will be always a little difficulty with Foundation js plugins, but this is not they fault. This is just a different way of doing this kind of stuff in Meteor. I think that it is even better to use something like:

Template.tabs.onRendered(function () {
    this.tabs = new Foundation.Tabs(this.$('#example-vert-tabs'));
});

Template.tabs.onDestroyed(function () {
    if (this.tabs) {
      this.tabs.destroy();
    }
});

and not using $(document).foundation() at all. They have provided realy clean aPI for the js plugins. There are also .destroy() methods for all js plugins.

With this you have a better control over it and in Meteor it ise really important. When you use $(document).foundation() in couple templates there could be some bugs related to some of the plugins.

I’ll prepare the PR for Meteor package fixes in version 6.0.3 and I’ll update the readme with this info.

juliancwirko · November 22, 2015, 12:13pm

I have published a short blog post titled: “What I like the most about the new Foundation 6” maybe for someone it will be useful.

brajt · November 22, 2015, 2:50pm

Very nice article.

Overal I think it is much better than F5 and I don’t know if we should compare it to foundation for apps

I agree, it’s way better. It’s not like I compare it to Apps. I just miss few features that would greately improve my Sites satisfaction. The most important are Appframe and Frame. Both small and not requiring JS to work. These features I’m always hacking into my projects, (together with Flexbox grid which I won’t have to do now thanks to Sites). Luckily it’s just a couple of SASS lines.

Another one are Notifications. This time it’s JS based and I really hoped Sites would include it, rewritten to JQuery. Unfortunately adding Angular to my Blaze projects simply to use Notifications would be going overboard. Well, there are other similar libraries. One of them, Pnotify, even has Yeti theme that plays very well with default Foundation style.

juliancwirko · November 22, 2015, 3:14pm

for Blaze (little autopromo ;)) http://s-alert.meteor.com Independed and simple to style, with many options.

brajt · November 22, 2015, 3:17pm

It’s very nice, thanks! I will definitely use it.

maxencecornet · November 25, 2015, 1:44am

I just started a little project with Foundation 6 ! And made a boilerplate for it inspired by Differential/meteor-boilerplate , might as well interest someone else : https://github.com/maxenceC/meteor-foundation-boilerplate

juliancwirko · November 25, 2015, 9:55am

Hi, I think this is not the best way to initialize foundation’s javascript plugins in Meteor project: https://github.com/maxenceC/meteor-foundation-boilerplate/blob/master/client/templates/index.html#L24

You can take a look at the updated docs here: https://github.com/zurb/foundation-sites/blob/develop/meteor-README.md#usage-in-meteor there is a section devoted to js plugins initializations.

maxencecornet · November 25, 2015, 10:17am

I just read the docs, and you are totally right, I’ll fix that today ! Thanks

nathanhornby · November 25, 2015, 11:22am

The lack of official Stylus support in both Bootstrap and Foundation puts me off using either personally - I still haven’t worked out why anyone would use less/sass over Stylus

juliancwirko · November 25, 2015, 11:43am

Yeah, I share your opinion For small projects I have my own Stylus based flexbox grid and that is all. But for bigger projects somethimes you want to use Bootstrap or Foundation (for many different reasons - marketing too ). And I prefer Foundation

nathanhornby · November 25, 2015, 3:01pm

Yea I use jeet.gs for the grid - but agree sometimes a framework is extremely useful! I’ll keep hoping that one day Foundation/Bootstrap wake up and smell the roses

adamginsburg · January 12, 2016, 3:24am

HI, thanks for the info.
Re: quote above… so is Foundation fro Apps dead? Or do You just use Foundation Sites for a mobile app/Cordova?