Transitioning to Foundation 6

My site is currenly based upon Zurb's Foundation 5 framework, albeit a rather modified version. Foundation 6 is now out, let's migrate.

Current Framework

My site is currenly based upon Zurb's Foundation 5 framework, albeit a rather modified version.

As everything on my site is finally under version control, and I've recently been fighting the CSS/SASS that comes with Foundation 5 to style the site how I want it to look for the Christmas period (reds, greens, and touches of gold) now is as good a time as any to try out Foundation 6.

One annoyance I currently have with Foundation 6: the documentation site has bad UX on iPad. As soon as you try to scroll down the page the keyboard pops up for no reason whatsoever. I'm used to my site being very usable on the iPad, so I hope it isn't a bug in the release itself.

My site is rather heavy in PHP, but it doesn't use a database or anything at all. In a sense everything is already contained within each .php file, it will just be a matter of modifying my class names (.lead is already one conflict I've seen) and then modifying every page on my site.

Modifying every page is a big chore, having done it recently to standardise the PHP code at the top and bottom of every Web page, although having standardised it it should be easier to use tools like sed to modify the PHP blocks on every page on the site.

With a git repository for the site now this will make things easier as I can use git to double-check the changes made by sed before committing them.

In fact I have used git diffs and patching to avoid merge conflicts as there are currently two commits ahead of what my develop, master, and release branches are at. The first is to for modifications to give the site a Christmas feel, and the one after it is to revert those modifications.

With that out of the way, time to install Zurb Foundation 6.

Requirements

Foundation 6 requires the following:

  1. NodeJS. Version 0.10, 0.12, or 4.1.
  2. GCC.

Let's see what I have.

node --version
bash: nodejs: command not found

That'd be because my site is modified on my home server, rather than my laptop.

curl -s https://deb.nodesource.com/gpgkey/nodesource.gpg.key | sudo apt-key add -
sudo nano /etc/apt/sources.list
# NodeJS
deb https://deb.nodesource.com/node_0.10 jessie main
deb-src https://deb.nodesource.com/node_0.10 jessie main
sudo apt-get update
sudo apt-get install apt-transport-https
sudo apt-get update
sudo apt-get install nodejs
nodejs --version
v0.10.40
sudo npm install -g foundation-cli bower

Foundation is now installed. Some other modules I use probably aren't, however.

Creating a New Site

I am going to be creating a new site. While I could try branching from my existing site and using foundation upgrade I expect I am going to have to substantially change my JavaScript, CSS, and PHP. Besides, I am going to just test things out.

cd ~/Documents/Computing/Web\ Sites/
mdkir foundation6
cd foundation6
foundation new --framework sites --template zurb

I'm going to call the project johncook.uk

…
rm: cannot remove ‘/media/veracrypt1/Documents/Computing/Web’: Is a directory
…

WTF? Why is it trying to delete something (that luckily doesn't exist)? Did some sloppy programmer think paths never include spaces?

ln -s ~/Documents/Computing/Web\ Sites/ ~/Documents/Computing/WebSitesSymLink
cd ../../WebSitesSymLink/foundation6
sudo rm -r johncook.uk
foundation new --framework sites --template zurb

OK, that time it installed. Odd.

First Page on New Site

My first page is going to be… this one.

I have copied the following from johncook.uk/dist/index.html to the top of this page, which is saved as johncook.uk/src/pages/test.html:

<!doctype html>
<html>

<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"  href="assets/css/app.css">
</head>

It is time to initialise a git repository.

cd johncook.uk
git init
git config --list
git add .gitignore bower.json gulpfile.js package.json
git commit -m "First commit"
git add src/
git reset HEAD src/pages/test.html
git commit -m "Add default source files"
git add CHANGELOG.md readme.me
git commit -m "Add foundation changelog and readme"
cd src/pages
mkdir -p blogs/website/
mv test.html blogs/website/foundation-6-transition.html
git add blogs/website/foundation-6-transition.html
git commit -m "Add first HTML file"

Now, if I look at the source code of a page on my site (at the 3rd level down from the home page), the body starts like the following:

<body itemscope itemtype="http://schema.org/WebPage">

<main>

<article itemscope itemtype="https://schema.org/BlogPosting">
<div class="row">
<div class="small-12 columns lead">
<div class="panel">
<div id="alerts"></div>
<header>
<h1 itemprop="name headline">New Domain Names - Part 5:<br /><span class='subheader'><small>Site Move</small></span></h1>
<div itemprop="description">
<p>In part 5 of this series of articles I look at the final site moves using Google Webmaster Tools' Change of Address Tool. I also disable CloudFlare.</p>
</div>
</header>
<nav role="navigation">
<ul class="breadcrumbs" aria-label="breadcrumbs">
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/" class="fi-home" itemprop="url"><span itemprop="title">Home</span></a></li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/blogs" class="fi-pencil" itemprop="url"><span itemprop="title">Blogs</span></a></li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/blogs/website" class="fi-bookmark" itemprop="url"><span itemprop="title">Website</span></a></li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/blogs/website/" class="fi-link"><span itemprop="title">New Domain Names (Part 5)</span></a></li>
</ul>
</nav>
<aside id="social-links"></aside>
</div>
<div itemprop="articleBody">

From the above code, I need to rename my class .lead (to .first-row), foundation's .panel has been renamed, and I need to look at breadcrumbs.

The breadcrumbs are styled, although not the way I'm used to. In theory I can just replace .panel with .callout.

The First Style

The first style change I'm going to make is to the first h1 on a page that is inside a .callout. On my Foundation 5 site I have a custom font, background colour, and border.

For now I'm just going to add the Google font to the head tag, and I'm going to edit src/assets/scss/_settings.scss:

$header-font-family: "Swanky and moo moo", Cursive, sans-serif;

With a modification of src/assets/scss/app.scss, I can make my heading look like it does on my site:

.first-row .callout h1 {
	background-color: #e2c1ea;
	text-align: center;
	border: 1px solid #000;
	border-radius: 0 0 15% 15%;
}

I'm going to make a commit now, because with the heading styled how I want it to be it is the first thing in Foundation 6 that looks complete.

git commit -am "Add styling to .callout h1"

Breadcrumbs

The breadcrumb links use the primary foundation colour. Unfortunately, Zurb use the same link colour whether the link is unvisited, visited, or active. I decided a while ago that on my site I'm going to keep to the standard HTML colours for links (blue, purple, and red) because it can help having that differentiation.

Recently I opened my HTML sitemap in incognito/privacy mode and used the link colours to determine whether I had already updated the page to a new standardised PHP file header/footer or not.

Unfortunately, I cannot add all three colours, but I can make 3 changes: primary colour, link colour, and background colour.

OK, $breadcrumbs-item-color is completely ignored. It looks like my new CSS file is likely going to be big because overriding the defaults doesn't always work.

My breadcrumbs use Foundation 3 Icons, so I need to install them.

cd ../../johncook.uk/
bower install foundation-icon-fonts
bower install --save-dev

While I could copy and paste, what is the right way to do things using gulp?

The things I need to copy are:

  • bower_components/foundation-icon-fonts/svgs/ to dist/assets/css/svgs/
  • bower_components/foundation-icon-fonts/foundation-icons.svg to dist/assets/css/
  • bower_components/foundation-icon-fonts/foundation-icons.eot to dist/assets/css/
  • bower_components/foundation-icon-fonts/foundation-icons.woff to dist/assets/css/

This git diff of gulpfile.js shows the changes I made:

diff --git a/gulpfile.js b/gulpfile.js
index 25aba41..6f3d79a 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -34,6 +34,15 @@ var PATHS = {
     'bower_components/foundation-sites/js/foundation.*.js',
     'src/assets/js/**/*.js',
     'src/assets/js/app.js'
+  ],
+  icon_fonts_svg: [
+       'bower_components/foundation-icon-fonts/svgs/*'
+  ],
+  icon_fonts_combined: [
+    'bower_components/foundation-icon-fonts/*.eot',
+    'bower_components/foundation-icon-fonts/*.svg',
+    'bower_components/foundation-icon-fonts/*.ttf',
+    'bower_components/foundation-icon-fonts/*.woff'
   ]
 };
 
@@ -132,9 +141,21 @@ gulp.task('images', function() {
     .pipe(gulp.dest('dist/assets/img'));
 });
 
+// Copy icon_fonts_svg to the "dist" folder
+gulp.task('icon_fonts_svg', function() {
+  return gulp.src(PATHS.icon_fonts_svg)
+    .pipe(gulp.dest('dist/assets/css/svgs'));
+});
+
+// Copy icon_fonts_combined to the "dist" folder
+gulp.task('icon_fonts_combined', function() {
+  return gulp.src(PATHS.icon_fonts_combined)
+    .pipe(gulp.dest('dist/assets/css'));
+});
+
 // Build the "dist" folder by running all of the above tasks
 gulp.task('build', function(done) {
-  sequence('clean', ['pages', 'sass', 'javascript', 'images', 'copy'], 'styleguide', done);
+  sequence('clean', ['pages', 'sass', 'javascript', 'images', 'icon_fonts_svg', 'icon_fonts_combined', 'copy'], 'styleguide', done);
 });
 
 // Start a server with LiveReload to preview the site in

As for the foundation-icon-fonts css, I have modified mine to have small spaces before and after the icons.

cp bower_components/foundation-icon-fonts/_foundation-icons.scss src/assets/scss/
sed -i 's,\"\\,\"\\2009\\,;s,\"; },\\2009\"; },' src/assets/scss/_foundation-icons.scss

And finally, the addition of a line to the top of src/assets/scss/app.scss to include the foundation-icons css:

@charset 'utf-8';

@import 'settings';
@import 'foundation';
@import 'motion-ui';
@import 'foundation-icons';

With everything looking how I want it, time to commit and move on to styling my code blocks.

Rainbow JS

RainbowJS is something I made zero changes to (apart from adding a few shell commands to its built-in list), so it should just be a matter of copying it.

bower install --save rainbow
diff --git a/gulpfile.js b/gulpfile.js
index 6f3d79a..02ab982 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -33,7 +33,9 @@ var PATHS = {
     'bower_components/foundation-sites/js/foundation.util.*.js',
     'bower_components/foundation-sites/js/foundation.*.js',
     'src/assets/js/**/*.js',
-    'src/assets/js/app.js'
+    'src/assets/js/app.js',
+       'bower_components/rainbow/js/rainbow.js',
+       'bower_components/rainbow/js/language/*.js'
   ],
   icon_fonts_svg: [
        'bower_components/foundation-icon-fonts/svgs/*'
cp bower_components/rainbow/themes/github.css src/assets/scss/github.scss

Something really annoying with the things used by Zurb Foundation in this workflow is something (browser-sync? panini) is manging the HTML pages.

Whitespace should be kept as it is, you shouldn't go around thinking you know best and prefixing every line with spaces, especially inside <pre> tags.

To fix that, remove the spaces inside src/layouts/default.html in front of the lines with braces.

I also need to modify the JavaScript for shell commands, by changing bower_components/rainbow/js/language/shell.js:

    /**
     * Environment variables
     */
    {
        'name': 'support.command',
        'pattern': /\b(echo|rm|ls|(mk|rm)dir|cd|find|cp|exit|pwd|exec|trap|source|shift|unset|apt-get|nano|add(group|user)|(tinydns|axfrdns)-conf|make|ln|svc|initctl|ch(own|mod|grp)|su|rsync|ip|npm|gem|foundation|git|dpkg(-reconfigure)?|ssh-keygen|mv|cat|get_iplayer)\b/g
    },
    {
        'matches': {
            1: 'keyword'
        },
        'pattern': /\b(break|case|continue|do|done|elif|else|esac|eval|export|fi|for|function|if|in|local|return|set|then|unset|until|while)(?=\(|\b)/g
    }

This page is starting to look like it is actually on my site.

Footers

At the bottom of every page on my site is a footer with a copyright notice and a license notice.

On pages like this one, there is also a footer saying when this page was posted and (if aplicable) last modified.

While every page also has a menu bar, the menu is actually (as far as the HTML goes) contained within the site footer.

When it comes to the posted, copyright, and license footers, no code change is needed at all. The CSS just copies straight over.

Top Menu Bar

As expected, this is going to be a pain. Things have completely changed from Foundation 5, which means this is going to be really difficult to get right.

The biggest issue: not putting it where it will appear. What I mean by that is that I want it to be at the bottom of the page (in terms of HTML) but to put it at the top of the page visually.

The following is what I ended up with:

<nav role="navigation" class="top-bar">
<div class="top-bar-left">
	<ul class="horizontal dropdown menu">
		<li class="hide-for-small-only"><a class="fi-home" href="/">John Cook UK</a></li>
	</ul>
</div>
<div class="top-bar-left" data-responsive-toggle="site-links" data-toggle>
	<ul class="horizontal dropdown menu" data-dropdown-menu>
		<li><a class="fi-home" href="/">John Cook UK</a></li>
		<li class="show-for-small-only" data-toggle><a href="#" class="fi-list">Menu</a></li>
	</ul>
</div>
<div class="top-bar-right" id="site-links">
	<ul class="vertical medium-horizontal menu">
		<li title="Articles"><a href="/articles" class="fi-book"><span class="hide-for-medium-only">Articles</span></a></li>
		<li title="Blog Posts"><a href="/blogs" class="fi-pencil"><span class="text hide-for-medium-only">Blogs</span></a></li>
		<li title="Image Gallery"><a href="/gallery" class="fi-photo"><span class="text hide-for-medium-only">Gallery</span></a></li>
		<li title="Music"><a href="/music" class="fi-music"><span class="text hide-for-medium-only">Music</span></a></li>
		<li title="Downloads"><a href="/downloads" class="fi-download"><span class="text hide-for-medium-only">Downloads</span></a></li>
		<li title="Site Links"><a href="/links" class="fi-link"><span class="text hide-for-medium-only">Links</span></a></li>
		<li title="About"><a href="/about" class="fi-info"><span class="text hide-for-medium-only">About</span></a></li>
		<li title="Network Status"><a href="/status" class="fi-graph-bar"><span class="text hide-for-medium-only">Status</span></a></li>
		<li title="Secure Site">
<a href="#" class="fi-lock HTTPSisUsed" rel="nofollow" aria-label="This page is secure."><span class="text hide-for-medium-only">Secure Site</span></a></li>
	</ul>
</div>
</nav>

I am going to have to make further modifications, which means that unlike the h1 and footers this is not yet complete.

The reason is the current code uses Foundation's built-in sizes and break points.

Not only are the break points different from what I use on my site, but I have recently changed my site so that the text spans are hidden at multiple points, in effect collapsing the text in each button (starting from the right) as the window width gets smaller.

The following code does that:

@media screen and (max-width: 1080px) and (min-width: 600px) {
	ul.right li a.fi-lock.HTTPSisUsed span.text, 
	ul.right li a.fi-lock.HTTPSisNotUsed span.text {
		display: none;
	}
}
@media screen and (max-width: 1020px) and (min-width: 600px) {
	ul.right li a.fi-graph-bar span.text {
		display: none;
	}
}
@media screen and (max-width: 910px) and (min-width: 600px) {
	ul.right li a.fi-info span.text {
		display: none;
	}
}
@media screen and (max-width: 860px) and (min-width: 600px) {
	ul.right li a.fi-link span.text {
		display: none;
	}
}
@media screen and (max-width: 820px) and (min-width: 600px) {
	ul.right li a.fi-download span.text {
		display: none;
	}
}
@media screen and (max-width: 750px) and (min-width: 600px) {
	ul.right li a.fi-music span.text {
		display: none;
	}
}
@media screen and (max-width: 710px) and (min-width: 600px) {
	ul.right li a.fi-photo span.text {
		display: none;
	}
}
@media screen and (max-width: 660px) and (min-width: 600px) {
	ul.right li a.fi-pencil span.text {
		display: none;
	}
}
@media screen and (max-width: 630px) and (min-width: 600px) {
	ul.right li a.fi-book span.text {
		display: none;
	}
}

This is the new code:

<nav role="navigation" class="top-bar">
<div class="top-bar-left">
	<ul class="horizontal dropdown menu">
		<li class="hide-for-small-only"><a class="fi-home" href="/"><span class="text">John Cook UK</span></a></li>
	</ul>
</div>
<div class="top-bar-left show-for-small-only" data-responsive-toggle="site-links" data-toggle>
	<ul class="horizontal dropdown menu" data-dropdown-menu>
		<li><a class="fi-home" href="/"><span class="text">John Cook UK</span></a></li>
		<li data-toggle><a href="#" class="fi-list">Menu</a></li>
	</ul>
</div>
<div class="top-bar-right" id="site-links">
	<ul class="vertical medium-horizontal menu">
		<li title="Articles"><a href="/articles" class="fi-book"><span class="text">Articles</span></a></li>
		<li title="Blog Posts"><a href="/blogs" class="fi-pencil"><span class="text">Blogs</span></a></li>
		<li title="Image Gallery"><a href="/gallery" class="fi-photo"><span class="text">Gallery</span></a></li>
		<li title="Music"><a href="/music" class="fi-music"><span class="text">Music</span></a></li>
		<li title="Downloads"><a href="/downloads" class="fi-download"><span class="text">Downloads</span></a></li>
		<li title="Site Links"><a href="/links" class="fi-link"><span class="text">Links</span></a></li>
		<li title="About"><a href="/about" class="fi-info"><span class="text">About</span></a></li>
		<li title="Network Status"><a href="/status" class="fi-graph-bar"><span class="text">Status</span></a></li>
		<li title="Secure Site">
<a href="#" class="fi-lock HTTPSisUsed" rel="nofollow" aria-label="This page is secure."><span class="text">Secure Site</span></a></li>
	</ul>
</div>
</nav>

With the modifications I have made, the top menu bar now looks how I want it to.

Other Foundation 5 Stuff

Although not used on this page, there are other things I utilise from Foundation 5 throughout the site.

The two that come to mind are flex-video and thumbnails.

Flex Video

In Foundation 5 I would wrap a video iFrame with a div that has a flex-video class.

Although no change is needed in terms of code, flex-video now has other additional classes.

  • class="flex-video"—a 4:3 ratio.
  • class="flex-video widescreen"—a 16:9 ratio.
  • class="flex-video vimeo"—a 4:3 ratio for Vimeo embeds.
  • class="flex-video vimeo widescreen"—a 16:9 ratio for Vimeo embeds.

The only changes needed to my existing code is adding the additional classes where applicable.

Thumbnails

I use thumbnails throughout the site on certain pages (such as in the gallery) and the class has changed from .th in Foundation 5 to .thumbnail in Foundation 6.

That change will probably be easiest to make using sed.

I didn't use any other Foundation 5 stuff for images because none of them really had the effect I wanted, resulting in me creating my own wrapper class for groups of images (.gallery).

So, with that I think I have everything I need.

The Upgrade to Foundation 6

To be honest I'm not entirely sure how I'm going to do this.

Everything I have tried has failed. There does not appear to be any way to upgrade a site from Foundation 5 to Foundation 6 without starting from scratch. What a waste of 48+ hours of my time.

And to top it off Zurb's "forum" is no such thing. It is the most useless "forum" I have ever seen and I can't believe anyone thinks it is even remotely useful to people. Ubuntu know how to make a forum, Zurb do not.

cd ../
git clone thejc@home.thejc.me.uk:/home/www/var/www/dev_johncook_co_uk
cd dev_johncook_co_uk
git remote -v
git remote remove origin

I have removed the origin server deliberately. There is no way I want anything being pushed to my dev server.

cp ../johncook.uk/bower.json .
cp ../johncook.uk/gulpfile.js .
cp ../johncook.uk/package.json .
sudo npm install -g npm
npm install
bower install
bower prune
sudo npm install -g gulp
npm install gulp --save-dev
cp -avr ../johncook.uk/src/assets/scss scss/
nano gulpfile.js

I think I want to a few lines in that file:

diff --git a/../johncook.uk/gulpfile.js b/gulpfile.js
index 02ab982..b821d3b 100755
--- a/../johncook.uk/gulpfile.js
+++ b/gulpfile.js
@@ -32,10 +32,10 @@ var PATHS = {
     'bower_components/foundation-sites/js/foundation.core.js',
     'bower_components/foundation-sites/js/foundation.util.*.js',
     'bower_components/foundation-sites/js/foundation.*.js',
-    'src/assets/js/**/*.js',
-    'src/assets/js/app.js',
+    'js/johncook.uk.js',
        'bower_components/rainbow/js/rainbow.js',
-       'bower_components/rainbow/js/language/*.js'
+       'bower_components/rainbow/js/language/*.js',
+       'bower_components/jquery.cookie/jquery.cookie.js'
   ],
   icon_fonts_svg: [
        'bower_components/foundation-icon-fonts/svgs/*'
@@ -100,7 +100,7 @@ gulp.task('sass', function() {
 
   var minifycss = $.if(isProduction, $.minifyCss());
 
-  return gulp.src('src/assets/scss/app.scss')
+  return gulp.src('scss/app.scss')
     .pipe($.sourcemaps.init())
     .pipe($.sass({
       includePaths: PATHS.sass
@@ -109,10 +109,10 @@ gulp.task('sass', function() {
     .pipe($.autoprefixer({
       browsers: COMPATIBILITY
     }))
-    .pipe(uncss)
+//    .pipe(uncss)
     .pipe(minifycss)
     .pipe($.if(!isProduction, $.sourcemaps.write()))
-    .pipe(gulp.dest('dist/assets/css'));
+    .pipe(gulp.dest('css'));
 });
 
 // Combine JavaScript into one file
@@ -128,7 +128,7 @@ gulp.task('javascript', function() {
     .pipe($.concat('app.js'))
     .pipe(uglify)
     .pipe($.if(!isProduction, $.sourcemaps.write()))
-    .pipe(gulp.dest('dist/assets/js'));
+    .pipe(gulp.dest('js'));
 });
 
 // Copy images to the "dist" folder
gulp sass

A quick look at css/app.css and it looks like it worked. Next, JavaScript.

gulp javascript

A quick look in js/app.js and it also looks like it worked. Perhaps a migration won't be that difficult.

gulp sass --production
gulp javascript --production
scp js/app.js thejc@home.thejc.me.uk:/home/www/var/www/dev_johncook_co_uk/js/
scp css/app.css thejc@home.thejc.me.uk:/home/www/var/www/dev_johncook_co_uk/css/

With some further JavaScript and CSS modifications, and some changes to my PHP files, I think I am getting close to having a functioning Foundation 6 site.

It is probably time to attempt an upgrade.

Git Merging

The first thing to do is to checkout a new branch and commit all files (including untracked).

git checkout -b migrate-foundation-6
git add -A
git commit -m "Add files for Foundation 6"

Now I want to add back an upstream.

git remote add dev thejc@home.thejc.me.uk:/home/www/var/www/dev_johncook_co_uk/
git push --set-upstream dev migrate-foundation-6

Over on the develop repository…

git checkout migrate-foundation-6
git commit -am "Modify files for Foundation 6 changes"
sudo npm install -g npm
npm install
bower install
bower prune
bower install --save jquery.cookie
sudo npm install -g gulp
npm install gulp --save-dev
gulp sass
gulp javascript

Double-check the files contain what they should, and then it is time to modify gulpfile.js and switch css/app.css to css/combined.min.css and js/app.js to js/combined.min.js

npm install gulp-rename --save-dev
nano gulpfile.js
diff --git a/gulpfile.js b/gulpfile.js
index b821d3b..295c00e 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -112,6 +112,7 @@ gulp.task('sass', function() {
 //    .pipe(uncss)
     .pipe(minifycss)
     .pipe($.if(!isProduction, $.sourcemaps.write()))
+    .pipe($.if(isProduction, $.rename('combined.min.css')))
     .pipe(gulp.dest('css'));
 });
 
@@ -128,6 +129,7 @@ gulp.task('javascript', function() {
     .pipe($.concat('app.js'))
     .pipe(uglify)
     .pipe($.if(!isProduction, $.sourcemaps.write()))
+    .pipe($.if(isProduction, $.rename('combined.min.js')))
     .pipe(gulp.dest('js'));
 });

And finally gulp sass --production does the same thing as grunt sass && grunt cssmin did, and gulp javascript --production does the same thing as grunt uglify did.

With my development site looking like it is functioning fine, I can probably go ahead and merge into my develop branch.

With it still looking OK and everything seeming to work, I have gone ahead and merged develop into master and release—my site is now using Foundation 6.

With all that process over with, it is now time to convert this .html file to a .php file and stick it on the site.