Ghost Themes
SimpleChat.Support - Open Source Live Chat App
0%
Foundation 5 and Yeoman
words - read.

Foundation 5 and Yeoman

Intro to Yeoman workflow

Foundation 5 is a well known front-end framework based on Sass (or Scss) workflow. There are a couple of ways to work with it. One of them is the 'foundation' tool. If you are using Foundation in your day to day work then you probably know it well. If not, you can read about it here: Getting Started With Sass. I’d like to show you my own workflow with Yeoman toolset.

This article will only be an introduction. The topic is too broad for just one article and I plan to write more about the particular aspects of it later on.

What we need is one simple Foundation 5 generator which is built upon Yeoman tools. You can find it here: generator-zf5 (more about the installation later in the article).

This generator is my own tool, but if you want, you can modify it or find another one which suits your needs. The purpose of this article is to show you one of the possible ways to work with Foundation 5 framework. The way that is more flexible and powerful.

So what is Yeoman? Yeoman is a toolset of three well known tools which are:

  • Yo
  • Grunt
  • Bower

You can read more about it on the official Yeoman website here: Getting started with Yeoman In this article I will not explain how all of it works, but it is good to know on what basis the Foundation 5 generator was built on.

In short, what ’generator-zf5' does is:

  • a quick scaffold of your new app – so you will have folder structure, all Foundation 5 needed files, all dependencies (so it’s similar to 'foundation' tool but more advanced)
  • Scss compiling – it will compile your Foundation 5 Scss files and your custom ones too
  • LiveReload – it will wait for changes on your files and auto reload the page with new changes in your html, js or css files
  • a simple way to install new front-end dependencies like jQuery plugins – you can install them through the Bower tool and inject it into your html documents (we will cover this later)
  • minification and concatenation of your css and js files at the end it will land in ready to use 'dist' directory

How can I start to play with it?

All you need is 'nodejs' and 'npm' tools, which I suppose you have installed. If not, just go to the node.js website http://nodejs.org/ for all the tips. With generator-zf5 you can use Scss with Libsass or Ruby (like with the standard 'foundation' tool). If you want to use it with Ruby Scss, you should install it too. You will find how to do this over the Internet or on the official Foundation 5 website. We will not cover it here.

Now with all necessary tools you are ready to go. With the 'npm' tool we need to install 'yo' (it will also install the 'grunt' and 'bower' tools). You can do this by writing a simple command. (with 'sudo' if you are on Linux)

$ npm install -g yo

Another step will be the installation of generator-zf5 itself. The same way, now we also use 'npm'.

$ npm install -g generator-zf5

That’s it. We now can run our new Foundation 5 project in some new folder. So we can create one:

$ mkdir my_awesome_zf5_project ; cd $_

Then we will use 'yo' command with generator name so here it is ‘zf5' and we omit the 'generator-' prefix. This rule apply to all of the Yeoman generators. So we have:

$ yo zf5

Now there will be a couple of questions like which version of Scss we want to use (Ruby or Libsass - Libsass by default) and if we want use FontAwesome etc. We can choose by writing yes or no.

Then we can see that the 'npm' and 'bower' tools are doing their part of the work. After that we will have a ready to go project with all the Foundation dependencies and all necessary tools to work on it. Now you should have a couple of folders and files. All of them are important so do not delete anything. The most important folders will be 'app' (your workplace) and 'dist' (your clean and ready to use project). And the most important file here will be 'Gruntfile.js'.

Ok, I have all this stuff generated, what’s next?

First of all, you must remember that you can modify files only in the 'app' folder and also not the ones from 'app/bower_components' folder. In fact you can put html files directly into the app folder and all js and css/scss/images files in css/js/scss/images folders.

So what is the 'bower_components' folder for?

This folder is very important. There will be all 3rd party dependencies like jQuery and other libraries you may want here. You can find and download all the jQuery plugins you want, and it will be placed right there in 'bower_components' because you can do this through the 'bower' tool. In fact, generator-zf5 uses it on startup too. It is important not to modify anything there because you may want to update jQuery or whatever you have installed and it will be overwritten there.

So, suppose you have started your new project and you want some image popup system. You have heard from someone that Magnific Popup is great, but you have no idea how to find and install it. You can then use the bower tool and you can search for it (remember to run all commands in the main project folder because it is safer):

$ bower search magnific-popup

Once you find it, you can install it and save installation config

$ bower install magnific-popup --save

so then if you want to update it later you can just run

$ bower update

All Magnific Popup files will be downloaded into the 'bower_component' folder but you must include these files in your html files... This is a good time to look into our example 'index.html' file in 'app' folder. You will find many html comments there. Do not remove it and do not modify it unless you know what you are doing. And don't worry, they all will be removed after you publish (into 'dist' folder) your project. As stated before, all files in the app folder are work copies with all needed helpers in it. These comments are responsible for correct injections of new dependencies imports and for files renaming after project publication.

So what with our Magnific Popup system?
We can inject all of its files into html by simply running this command:

$ grunt bower-install

It will place the correct script and link stylesheet lines in .html files. It uses our bower config file 'bower.json' (that is why we use –-save command).

As you can see we use 'grunt' tool here and this grunt task is one of the generator-zf5 custom tasks. So the 'grunt' tool is all that we use after new project is ready. You should read more about Grunt and you can read our 'Gruntfile.js'. This is the file where all 'grunt' tasks for the generator-zf5 are configured. This is a topic for another larger article about Grunt tasks and Grunt configuration file.

After grunt bower-install you will have prepared Magnific Popup and you can now run your project in the browser. Just use:

$ grunt

This is the main grunt task and it includes many smaller tasks like Scss compile, and live reload. After this command your browser should display your project, and the server will wait for changes. Now try to add some scss styles in app/scss/_appstyles.scss file. The changes should appear in the browser without refreshing it. For example, try to change the '.panel' background color like:

.panel {
    background-color: #cdcdcd;
}

You can also change html and js files. All changes should appear in the browser without refreshing the page. If you want another 3rd party jQuery plugins you can repeat search with 'bower' tool. Remember to add '--save' flag when installing and then 'grunt bower-install' to inject it into .html.

Ok, I know how to work with it but I want a clean, ready to publish html project

All these comments in html files, and all those bower_components and 'scss' folders in 'app'. I don't need all those in my final application... Of course, we don't need them. And that’s why the publication task is here. After an etap of your work you can publish it. But what does that mean? It means that you will get clean html files, minified css and js files and even optimized image files. There will be no bower_components and no scss folders. Moreover, everything used in project files from these folders will be present and compiled. You can find all these files in the dist folder. This is the one place from where you should grab your ready to use files and its folder structure.
The publication task is one of the Grunt tasks, you can do this by running:

$ grunt publish

There will be a couple of operations and you will see this in the console. If you want, you can also run the preview server with dist directory as a root folder. Just run:

$ grunt server-dist

The 'grunt' command runs server on http://127.0.0.1:9000 and the 'grunt server-dist' runs server on http://127.0.0.1:9001 You can run both and compare the source code and then you will see what it's all about.

Ending

This is only an introduction and I encourage you to read more about Bower Grunt and Yeoman itself. These are the tools of the modern Front-End developer so it is worth knowing them.

I also plan to write more about Foundation 5 customization (with this workflow) and Grunt tasks. So stay up to date with the blog and check me out on the Twitter: @juliancwirko. You can also find me on the Foundation 5 forum and GitHub

You can also use the comments below and I encourage you to do this :)

Thanks.

Comments

comments powered by Disqus