Skip to end of metadata
Go to start of metadata

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.

Pivotal story

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).

Alternative methods of installing Foundation

Add the Foundation files to Lens

The 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:

  • Foundation-6.3.1
    • js
    • scss
    • _vendor

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: lens/foundation-6.3.1/scss/settings/_settings.scss

We renamed this default settings file to _universal-foundation-settings.scss and moved it into the universal directory: lens/universal/scss/_universal-foundation-settings.scss

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: lens/foundation-6.3.1/scss/foundation.scss

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:

  • lens/bath/site/site-manifest.scss
  • lens/bath/apps/apps-manifest.scss

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

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.


  • No labels