Blog

Web technology tidbits

Zurb Foundation with Angular CLI

Set-up

Create a new Angular CLI project with the SASS style option:
ng new my-foundation-app --style=sass
cd my-foundation-app

Installation

Install the SASS version of the Foundation for Sites project with:
npm install foundation-sites --save

Configuration

In the src/assets/ directory, create a directory named foundation-sites with empty files named: _settings.scss and _global.scss.

In the _global.scss file, paste the content from: node_modules/foundation-sites/scss/_global.scss.

In the _settings.scss file, paste the content from: node_modules/foundation-sites/scss/settings/_settings.scss.

In the _settings.scss file, find the line with @import 'util/util'; and change it to point to the proper directory:
@import '../node_modules/foundation-sites/scss/util/util';

In src/styles.sass, add the import statements from node_modules/foundation-sites/scss/foundation.scss, adjusting the directory path as in the example below. Note that we are using our custom settings and global files that we placed in the src/assets/foundation-sites directory.

/**
 * Foundation for Sites by ZURB
 * Version 6.3.0
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */

// Dependencies
@import "../node_modules/foundation-sites/_vendor/normalize-scss/sass/normalize";
@import '../node_modules/foundation-sites/_vendor/sassy-lists/stylesheets/helpers/missing-dependencies';
@import '../node_modules/foundation-sites/_vendor/sassy-lists/stylesheets/helpers/true';
@import '../node_modules/foundation-sites/_vendor/sassy-lists/stylesheets/functions/purge';
@import '../node_modules/foundation-sites/_vendor/sassy-lists/stylesheets/functions/remove';
@import '../node_modules/foundation-sites/_vendor/sassy-lists/stylesheets/functions/replace';
@import '../node_modules/foundation-sites/_vendor/sassy-lists/stylesheets/functions/to-list';

// Sass utilities
@import '../node_modules/foundation-sites/scss/util/util';

// Settings (Custom)
@import "assets/foundation-sites/settings";

// Global variables and styles (Custom)
@import 'assets/foundation-sites/global';

// Components
@import '../node_modules/foundation-sites/scss/grid/grid';
@import '../node_modules/foundation-sites/scss/typography/typography';
@import '../node_modules/foundation-sites/scss/forms/forms';
@import '../node_modules/foundation-sites/scss/components/visibility';
@import '../node_modules/foundation-sites/scss/components/float';
@import '../node_modules/foundation-sites/scss/components/button';
@import '../node_modules/foundation-sites/scss/components/button-group';
@import '../node_modules/foundation-sites/scss/components/accordion-menu';
@import '../node_modules/foundation-sites/scss/components/accordion';
@import '../node_modules/foundation-sites/scss/components/badge';
@import '../node_modules/foundation-sites/scss/components/breadcrumbs';
@import '../node_modules/foundation-sites/scss/components/callout';
@import '../node_modules/foundation-sites/scss/components/card';
@import '../node_modules/foundation-sites/scss/components/close-button';
@import '../node_modules/foundation-sites/scss/components/drilldown';
@import '../node_modules/foundation-sites/scss/components/dropdown-menu';
@import '../node_modules/foundation-sites/scss/components/dropdown';
@import '../node_modules/foundation-sites/scss/components/flex';
@import '../node_modules/foundation-sites/scss/components/responsive-embed';
@import '../node_modules/foundation-sites/scss/components/label';
@import '../node_modules/foundation-sites/scss/components/media-object';
@import '../node_modules/foundation-sites/scss/components/menu';
@import '../node_modules/foundation-sites/scss/components/menu-icon';
@import '../node_modules/foundation-sites/scss/components/off-canvas';
@import '../node_modules/foundation-sites/scss/components/orbit';
@import '../node_modules/foundation-sites/scss/components/pagination';
@import '../node_modules/foundation-sites/scss/components/progress-bar';
@import '../node_modules/foundation-sites/scss/components/reveal';
@import '../node_modules/foundation-sites/scss/components/slider';
@import '../node_modules/foundation-sites/scss/components/sticky';
@import '../node_modules/foundation-sites/scss/components/switch';
@import '../node_modules/foundation-sites/scss/components/table';
@import '../node_modules/foundation-sites/scss/components/tabs';
@import '../node_modules/foundation-sites/scss/components/title-bar';
@import '../node_modules/foundation-sites/scss/components/top-bar';
@import '../node_modules/foundation-sites/scss/components/thumbnail';
@import '../node_modules/foundation-sites/scss/components/tooltip';

@mixin foundation-everything($flex: false) {
  @if $flex {
    $global-flexbox: true !global;
  }

  @include foundation-global-styles;
  @if not $flex {
    @include foundation-grid;
  }
  @else {
    @include foundation-flex-grid;
  }
  @include foundation-typography;
  @include foundation-forms;
  @include foundation-button;
  @include foundation-accordion;
  @include foundation-accordion-menu;
  @include foundation-badge;
  @include foundation-breadcrumbs;
  @include foundation-button-group;
  @include foundation-callout;
  @include foundation-card;
  @include foundation-close-button;
  @include foundation-menu;
  @include foundation-menu-icon;
  @include foundation-drilldown-menu;
  @include foundation-dropdown;
  @include foundation-dropdown-menu;
  @include foundation-responsive-embed;
  @include foundation-label;
  @include foundation-media-object;
  @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 foundation-visibility-classes;
  @include foundation-float-classes;

  @if $flex {
    @include foundation-flex-classes;
  }
}

@include foundation-everything(true);

Rename the /src/styles.sass file to have the SCSS file extension: /src/styles.scss.

Open angular-cli.json in the root directory of the app and, under apps.styles, change "styles.sass" to "styles.scss".

In angular-cli.json, change defaults.styleExt from "sass" to "scss".

Development

Run the project with the ng serve command. The Foundation for Sites styles should be applied to your HTML, which you can view by directing your browser to http://localhost:4200.