Ghost Themes
SimpleChat.Support - Open Source Live Chat App
What I like the most about the new Foundation 6
words - read.

What I like the most about the new Foundation 6

Here it is! The new Yeti from Zurb. Foundation for Sites in version 6 was released some time ago. I am very exited because they have incorporated many tools and solutions which are very similar to what I was building in projects like generator-zf5 or sGrid. We’ll cover that later.

After the release there were many fixes added so the team is working very fast. What’s new in Foundation 6 and what’s most important? There are many articles about it on the Internet so I won’t repeat them, but I'll try to link them at the end of this article. I just want to tell you what I personally like best about the new Foundation 6 framework.

Ok so what's so great about it?

Scaffold starter kits

Some time ago (actually about 2 years ago) I created the generator-zf5 tool which was my response to the not very well-organized starter kits from Foundation 5 and it’s always worked great. It does what it's supposed to do. You can read about it in a separate blog post here: Foundation 5 and Yeoman

In Foundation 6 there is a very well-prepared starter kit which does exactly what I always needed.

Let's take a closer look at it. What you get is a basic starter kit and an advanced starter kit. You can use a special command line tool from Foundation called foundation-cli but you can also just download starters and run npm and bower installations in it.

I am not interested in the basic starter kit so I won’t describe it here. It’s just a simple project scaffold which you can run. Let's take a look at an advanced starter kit which I think is called 'Zurb template'. What we can find here is:

  • Asset Copying
  • Page Compilation
  • Sass Compilation
  • JavaScript Compilation
  • Image Compression
  • BrowserSync (live reload etc.)

As you can see, there is something new. I always wanted to have it but never found time to create it, specifically ’page compilation' and Handlebars support. With this you can prepare your layouts and use reusable partials which will then be compiled to standard and static html files. This is a really awesome feature. Actually lately I have managed it to work in my Grunt sGrid scaffold using Assemble, but we won’t talk about that here.

Ok so how can you use it? First of all, you should install the tool or just download the package. I prefer downloading it and using just npm and bower tools. We can download it from here After that you should go to the folder and run

$ npm install
$ bower install

From now on, you can use your fully fledged project scaffold. When you open it in the editor of your choice, you’ll see that there are some specific and similar files for those from generator-zf5. You get bower.json, package.json and also you get gulpfile.js. This is the heart of our operation here. If you want, you can open it and go through its config. It is a standard Gulp config so it shouldn't be hard.

All you need to do next is run your project by:

$ npm start

It will just run the 'gulp' command to watch for your changes. It will also build your project and run BrowserSync (live reload).

Take a look at your file structure right now. It has changed. As you can see, there is another folder called 'dist'. If you have used generator-zf5 it should be very similar for you. One very important difference is that you work in the 'src' folder with layouts and partials. They are still .html files that work like .hbs (Handlebars) files and they are compiled to normal .html files in 'dist' folder by the Panini tool. You can play with it and read more about it in the Foundation 6 documentation pages. I'll try to write some more about the tool in some other articles.

If you need to build your project for production, you can just run:

$ npm run build

It will run the 'gulp build' command with '–production' flag which will provide minification of the assets.

To sum up this part – this is a really well done scaffold project. I encourage you to read more about Panini because it’s a great tool which provides many Handlebars helpers, like 'repeat', 'markdown' compilation. Great work done here with this part of the new workflow. I'll try to play with it more later.

Adjusting CSS Output

There are many parts in the framework. We always needed a simple way to use only what we really need and not all at once. In Foundation 5 we can import only some components. Here in Foundation 6, it’s even simpler. All part of the framework is separated into Scss mixins which generates the code. So you could do something like import everything but include only the parts you want, like:

@import 'foundation';
@include foundation-global-styles;
@include foundation-grid;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
// And so on...

You can also include everything, like:

@import 'foundation';
@inlude foundation-everything;

This is really cool stuff. I like this approach because it helps me get well-composed parts of the framework.

Better semantic grid mixins

This is what I wanted in Foundation 5 and I built it in the sGrid system. I needed to simply build any possible grid in any place of the project. And now, with Foundation 6, we have very cool mixins to do that. For example, if you want to build a grid which has 22 columns and elements inside (7 and 15 columns width), you could do something like:

.container {
  @include grid-row(22) {
    .main-content {
      // 7/22 ~ 31.81%
      @include grid-column(7);
    .sidebar {
      // 15/22 ~ 68,18%
      @include grid-column(15);

In the other container you can define different grids with different amounts of columns.

There are some other cool features related to this so go and read the docs about it. Awesome stuff.

Flexbox Grid

You can also now use the Flexbox grid with Foundation for Sites and not only with Foundation for Apps. This is really cool because Flexbox is very good and popular. The browser support is also quite good nowadays. You can read more about the Flexbox grid in Foundation 6 in the docs here

Official package for Meteor platform

This is awesome news. The Foundation team decided to release an official Meteor package, which is a very good move because many Meteor developers need it. I maintain the package for Foundation 5 and now it’s even better that there is an official one. I hope it will be well-maintained. I'll try to help with this more than I have already. You can find the package on Atmosphere: zurb:foundation-sites. It has its own documentation so it’s a really cool package and the usage is very simple with the new Meteor way to import Scss files from packages and a great community Scss package called fourseven:scss.

More cool stuff

There are many more features and improvements. The most notable are:

  • better accessibility options,
  • there is less css code,
  • JavaScript API is cleaner and better,
  • there are many new JavaScript helpers,
  • there is a brand new animation library called Motion UI,
  • you can also use a special desktop app called Yeti Launch, which is available now for Mac users and will be available soon for Windows users.

As you can see, there were many changes. For now there are some bugs to fix but the Foundation team is doing it very well and very quickly.

Where to read more about particular changes?

There are some great articles on the Internet. You will find some good information on theses sites:

Some closing words

Here you have a brand new front-end framework from Zurb. It is much better, in my opinion, than Bootstrap. Much more flexible and robust. It is also much better than Foundation 5.

Let me know about which topics and maybe which tools you would like to read here. I really like Foundation 6 so I’ll probably take a longer trip through all of its features. It would be cool if I could write about something more specific. Let me know what you think.


comments powered by Disqus