Just a friendly reminder that Foundation 6 is out and ready to use!
Did anybody play it already? What are your first thoughts?
Just a friendly reminder that Foundation 6 is out and ready to use!
Did anybody play it already? What are your first thoughts?
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.
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
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.
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
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!
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:
âŚalthough with some js plugins new Foundation and Meteor is quite buggy
Ahhh! They changed the class name from tab-title
to tabs-title
â easy miss!
Thanks for your help!
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.
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.
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.
for Blaze (little autopromo ;)) http://s-alert.meteor.com Independed and simple to style, with many options.
Itâs very nice, thanks! I will definitely use it.
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
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.
I just read the docs, and you are totally right, Iâll fix that today ! Thanks
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
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
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
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?