The wiki is now available again. However, some recent changes may not have been restored.
Please see Computing Services' blog post for more details

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Update the path to the Foundation utilities

Code Block
themeRDark
languagesass
@import '../../foundation-6.3.1/scss/util/util

Change the global font size from 100% to 18px

Code Block
themeRDark
languagesass
$global-font-size: 18px;

Change the number of default grid columns from 12 to 24

Code Block
themeRDark
languagesass
$grid-column-count: 24;

Update the gutter sizing map to use 18px and 27px dependent on breakpoint

Code Block
themeRDark
languagesass
$grid-column-gutter: (
  small: rem-calc($global-font-size),
  medium: rem-calc($global-font-size * 1.5)
);

...

This file needed a single path change to ensure it can find the relocated universal settings file.

Code Block
themeRDark
languagesass
@import '../../universal/scss/universal-foundation-settings';

...

Example manifest file

Code Block
themeRDark
languagesass
// ******************************************************************
// SITE/APPS
// ******************************************************************

// CHARSET
@charset 'UTF-8';

// ==================================================================
// STRUCTURE
// ==================================================================

// There are two parts to the setup:
// - The Foundation frontend framework
// - The Lens design system

// ==================================================================
// FOUNDATION 6.3.1
// ==================================================================

// FOUNDATION SETUP
// A) Import Foundation settings and config
// B) Import Foundation components

// A) Foundation settings and config
@import '../../foundation-6.3.1/scss/foundation';

// B) Foundation components
// Foundation global styles are *always* included
@include foundation-global-styles;

// Uncomment to include components as required
// @include foundation-grid;
// @include foundation-typography;
// @include foundation-button;
// @include foundation-forms;
// @include foundation-visibility-classes;
// @include foundation-float-classes;
// @include foundation-accordion;
// @include foundation-accordion-menu;
// @include foundation-badge;
// @include foundation-breadcrumbs;
// @include foundation-button-group;
// @include foundation-callout;
// @include foundation-close-button;
// @include foundation-drilldown-menu;
// @include foundation-dropdown;
// @include foundation-dropdown-menu;
// @include foundation-flex-video;
// @include foundation-label;
// @include foundation-media-object;
// @include foundation-menu;
// @include foundation-off-canvas;
// @include foundation-orbit;
// @include foundation-pagination;
// @include foundation-progress-bar;
// @include foundation-slider;
// @include foundation-sticky;
// @include foundation-reveal;
// @include foundation-switch;
// @include foundation-table;
// @include foundation-tabs;
// @include foundation-thumbnail;
// @include foundation-title-bar;
// @include foundation-tooltip;
// @include foundation-top-bar;

// @include motion-ui-transitions;
// @include motion-ui-animations;

// ==================================================================
// LENS DESIGN SYSTEM
// ==================================================================

// Components
// @import 'components/my-component';

// Content types
// @import 'types/content-type';

...