This is a run-down of the steps taken to add version 6 of the Foundation front end framework into our new design system, Lens.
It's not intended to be used as a guide to installing, configuring or updating Foundation 6.
Adding Foundation 6 to Lens
Download/install Foundation 6
We decided to source the Foundation 6 files directly from the latest tagged release on Github (6.3.1 at time of writing).
Add the Foundation files to Lens
foundation-6.3.1 directory was added to the root of the Lens repository on Github.
Optimise our version of Foundation
By default, Foundation 6 comes with a large number of extraneous files (package manager configs, contributor readmes etc.) that we don't use.
These redundant files were pruned out leaving only the following directories and their contents:
Configuring Foundation 6
Once we'd added the F6 files to Lens there was some basic configuration required to get the framework working.
1) Create a universal settings file
On installation, a default Foundation settings file can be found in:
We renamed this default settings file to
_universal-foundation-settings.scss and moved it into the universal directory:
Configure the universal settings file
We then made a few adjustments to our new universal settings file to get it working as we want it to.
Update the path to the Foundation utilities
Change the global font size from 100% to 18px
Change the number of default grid columns from 12 to 24
Update the gutter sizing map to use 18px and 27px dependent on breakpoint
2) Update foundation.scss
The main Foundation sass file can be found at:
This file needed a single path change to ensure it can find the relocated universal settings file.
3) Create site and apps manifest files
The manifest files provide the flexibility to include Foundation components as and when they are needed. We maintain a separate manifest file for applications (such as the course and content publishers) and for the site.
Manifest files are not part of the Foundation framework but are required for our Grunt build process.
We added two new manifest files:
Example manifest file
Foundation does not include a version of jQuery in any of its installation methods. The assumption is that it will be loaded via CDN or from a local source.
We've opted to add both the full and minimised jQuery to:
foundation-6.3.1/js/vendor as we have done in our implementation of Foundation 5.
Sassy lists is a set of helper functions that make working with Sass lists easier. Although on initial review it appeared to be a dependency we could easily remove it turns out that one Foundation component -
_menu.scss - uses Sassy Lists heavily.
Activating this component in a manifest file after Sassy Lists had been removed results in a Sass compilation error.
Variables changed between F5 and F6
Two core variables we relied on heavily in Foundation 5 have been deprecated in F6.
$rem-base- Sets the base value used in translating px values to rems
$base-font-size- Sets the base font size to be used globally throughout Foundation
In Foundation 6 the
$global-font-size replaces the two variables above.