Co-Installing Zurb Foundation 5 and 6 on the Same Machine

May 1, 2017, 9 p.m.

The Zurb Foundation web front end framework is excellent, with advanced workflow automation tools and features. Unfortunately, development on new versions is quick and sometimes content management system plugins based on this framework -- like the Drupal theme modules -- sometimes don't move at the same pace. Or maintenance stops on a widely adopted version in favor of a new version, while the previous version is still essential to web developers and site operators. This might require using Foundation 5 for some projects and Foundation 6 for others.

Introduction

In my case I use the ZURB Foundation 5 theme with Drupal 7 for some projects and Foundation 6 with for other projects that don't require Drupal, with sass and the Foundation provided Gruntfile.js and gulpfile.babel.js for Foundation 5 and 6 respectively. Because of this requirement, I need both versions installed.

It should be noted that while I was able to get both versions working on both Manjaro and openSUSE (and on an overwritten installation of Ubuntu 17.04) -- I don't have any experience with Ruby or gems, or (even Node.js) which required two installations of the Foundation 5 gem, globally and in my user directory. Nevertheless, the installations work after some trial and error, and I wrote this article simply to provide a reference starting point for getting both versions co-installed, which is to make sure version 5 and version 6 executables are installed in different locations and create symlinks to these with different names for the same foundation command that is used by both versions.

The Zurb site indicates that this is not possible out-of-the-box. But with some modification of the default installations and symlinking, it is possible to install and use both versions on the same Linux installation.

The Zurb Pages for Versions 5 and 6 of Foundation
Clearly Foundation 6 is more streamlined only using npm to install the Foundation command line client which is more capable. Besides creating a projectby syncing with the Foundation github repositories it can install the Zurb 'Building Blocks' and handle watching for changes. Foundation 5 on the other hand relies more on grunt.

Before installing either version of Zurb Foundation, install the dependencies. For Foundation 5, these are Git, NodeJS, and Ruby 1.9+. For Foundation 6, there don't seem to be any requirements besides NodeJS. NPM is also required to install development dependencies within the projects and to install Foundation 6.

In the Arch based Manjaro or openSUSE Tumbleweed git seems to be already installed by default -- unless it was installed as a dependency of something else I installed, as is an appropriate version of Ruby. But Node.js and NPM will need to be installed before installing either version of Foundation.

  • install node.js
    • on Manjaro
    • sudo pacman -S nodejs
    • on openSUSE Tumbleweed
    • as root: zypper in nodejs8
  • install npm
    • on Manjaro
    • sudo pacman -S npm
    • on openSUSE Tumbleweed, npm8 is automatically selected for installation when nodejs8 is installed
Installing Node.js on openSUSE Tumbleweed

Install Foundation 5

Install grunt-cli and bower[1]

  • on Manjaro
  • sudo npm install -g bower grunt-cli sudo gem install foundation -V --no-user-install --install-dir /opt/gem gem install foundation -V --user-install
  • on openSUSE
  • as root: npm install -g bower grunt-cli as root: gem install foundation -V --no-user-install --install-dir /opt/gem gem install foundation -V --user-install
The first installation of Foundation 5, above, using the --no-user-install will install everyting in the /opt/gem directory, creating a subdirectory called /opt/gem/gems. The foundation executable and the executable of a dependency will be created at /opt/gem/bin/foundation. I wanted to install in /opt, trying to follow UNIX traditions and standards so I had to use sudo. You may want to experiment and think about how you want to install using administrator privleges or not or using default settings, or the options I used. The decision may be different based on the distribution you use. The second installation of Foundation 5, above, using the --user-install installs in the user's home directory at ~/.gem following the heirarchy of /opt/gems. The user's PATH environment variable should be modified to include the local installation.

Install Foundation 6

  • on Manjaro
  • sudo npm install --global foundation-cli This will create a symlink /usr/bin/foundation to the actual Foundation 6 executable /usr/lib/node_modules/foundation-cli/bin/foundation.js The symlink should be renamed to reflect the version.
  • on openSUSE
  • as root: npm install --global foundation-cli This will create a symlink /usr/local/bin/foundation to the actual Foundation 6 executable /usr/local/lib/node_modules/foundation-cli/bin/foundation.js The symlink should be renamed to reflect the version.

Create Symlinks and Rename

  • on Manjaro
  • sudo ln -s /opt/gem/bin/foundation /usr/bin/foundation5 sudo mv /usr/bin/foundation /usr/bin/foundation6
  • on openSUSE
  • as root: ln -s /opt/gem/bin/foundation.ruby2.4 /usr/bin/foundation5 as root: mv /usr/local/bin/foundation /usr/local/bin/foundation6 The original link to the executable is preserved when renaming the Foundation 6 symlink created during installation. So now if we want to use Foundation 5's foundation command we use foundation5 and if we want to use Foundation 6's foundation foundation command we use foundation6.

    
    [brook@VN7-592G-70EN-MANJARO:~] $ ls -l /usr/bin | grep foundation
    lrwxrwxrwx 1 root root       23 Jul 28 17:59 foundation5 -> /opt/gem/bin/foundation
    lrwxrwxrwx 1 root root       52 Jul 28 17:51 foundation6 -> ../lib/node_modules/foundation-cli/bin/foundation.js
    
    
    N7-592G-70EN-openSUSE:~ # ls -l /usr/local/bin | grep foundation
    lrwxrwxrwx 1 root root 52 Nov  6 16:52 foundation6 -> ../lib/node_modules/foundation-cli/bin/foundation.js
    VN7-592G-70EN-openSUSE:~ # ls -l /usr/bin | grep foundation
    lrwxrwxrwx 1 root root          31 Nov  6 17:07 foundation5 -> /opt/gem/bin/foundation.ruby2.4
    VN7-592G-70EN-openSUSE:~ # 
    
    • Foundation 5 Installed in /opt and in ~/.gem
    • Foundation 5 and Foundation 6 Running on Manjaro
      The terminal on the left shows the output of foundation6 watch running on a previously created Foundation 6 project. The upper right terminal shows the output of grunt watch running on a previously created Fundation 5 project. The lower right terminal -- split to show the beggining and the end of the output -- shows the creation of a new Foundation 5 project using libsass instead of compass foundation5 new ftest --libsass, where "ftest" is the name of the project.
    • Foundation 5 and Foundation 6 Running on openSUSE Tumbleweed
    • The package.json File in Foundation 5
      It was necessary to tweak some of the metadata files included with Foundation 5 including the package.json file since Foundation 5 does not seem to be maintained at this time.
    • The Foundation 5 Installation in openSUSE Tumbleweed.
    Some screenshots of the Foundation Installations and Operation.

    Conclusion

    The key to making both the Foundation 5 and Foundation 6 commands work is to make sure the executables for both of these versions are in different locations and, in the case of Foundation 5, symlink to the actual executable from /usr/bin using a name other than 'foundation' -- I chose 'foundation5'. In the case of Foudation 6, the command for which is itself a symlink to the actual executable created during installation, the link should be renamed to something other than 'foundation' -- I chose 'foundation6'.

    Foundation 5 and Foundation 6 Running on Manjaro
    The terminal on the left shows the output of foundation6 watch running on a previously created Foundation 6 project. The upper right terminal shows the output of grunt watch running on a previously created Fundation 5 project. The lower right terminal, split to show the beggining and the end of the output, shows the creation of a new Foundation 5 project using foundation5 new ftest --libsass.
    The terminal on the left shows the output of foundation6 watch running on a previously created Foundation 6 project. The upper right terminal shows the output of grunt watch running on a previously created Fundation 5 project. The lower right terminal, split to show the beginning and the end of the output, shows the creation of a new Foundation 5 project using foundation5 new ftest --libsass.

    Notes:

    1. [1]

      npm suggests using Yarn instead of Bower as Bower is depricated.

      Bower Depricated