Use Foundation for sites 6 in your Angular 2 application 🗒️ web dev notes

Foundation for sites is a responsive framework developed by Zurb. It provides a full collection of styled components and responsive grid to build the complete layout of your site. Just follow these steps to add it to your Angular project.

I'm used to the Zurb's Foundation framework due its simplicity and I feel it less invasive than it could be other frameworks like Bootstrap. Also this week I started learning about Angular (>=2) and I found that I needed some "prebuilt" components to help me in the project I started with learning purposes. So I struggled a little bit to add Foundation for sites to it and these are the steps I followed ...

Creating an Angular project with the CLI

Angular provides a command line interface (CLI) to run the most common commands used during development. Previously to the following commands you should have installed Node.js and its package manager NPM.

You can update npm to the latest version with the following command:

sudo npm install -g npm@latest

And proceed installing the latest version of the Angular CLI

npm install -g @angular/cli

You can show all available commands with the ng help command.

Once it is installed we can create the application skeleton with the following command. You can also add support to Sass, using the style parameter with the scss or sass option, depending on your preferences.

ng new foundation-ng2-app --style=scss

This will create a Node.js package in the foundation-ng2-app recently created. You can check the project generated by checking the content of the *package.json* file inside that folder.

{
	"name": "foundation-ng2-app",
	"version": "0.0.0",
	"license": "MIT",
	"scripts": {
		"ng": "ng",
		"start": "ng serve",
		"build": "ng build",
		"test": "ng test",
		"lint": "ng lint",
		"e2e": "ng e2e"
	},
	"private": true,
	"dependencies": {
		"@angular/animations": "^5.0.0",
		"@angular/common": "^5.0.0",
		"@angular/compiler": "^5.0.0",
		"@angular/core": "^5.0.0",
		"@angular/forms": "^5.0.0",
		"@angular/http": "^5.0.0",
		"@angular/platform-browser": "^5.0.0",
		"@angular/platform-browser-dynamic": "^5.0.0",
		"@angular/router": "^5.0.0",
		"core-js": "^2.4.1",
		"rxjs": "^5.5.2",
		"zone.js": "^0.8.14"
	},
	"devDependencies": {
		"@angular/cli": "1.5.2",
		"@angular/compiler-cli": "^5.0.0",
		"@angular/language-service": "^5.0.0",
		"@types/jasmine": "~2.5.53",
		"@types/jasminewd2": "~2.0.2",
		"@types/node": "~6.0.60",
		"codelyzer": "~3.2.0",
		"jasmine-core": "~2.6.2",
		"jasmine-spec-reporter": "~4.1.0",
		"karma": "~1.7.0",
		"karma-chrome-launcher": "~2.1.1",
		"karma-cli": "~1.0.1",
		"karma-coverage-istanbul-reporter": "^1.2.1",
		"karma-jasmine": "~1.1.0",
		"karma-jasmine-html-reporter": "^0.2.2",
		"protractor": "~5.1.2",
		"ts-node": "~3.2.0",
		"tslint": "~5.7.0",
		"typescript": "~2.4.2"
	}
}

In the file content you can see the *npm* commands you can use with your project. Also you can look at the dependencies needed for an Angular project. Any other required dependency, like the Foundation for sites package, will be added here too. Let's see how.

Installing Foundation for sites package

Installing Foundation for sites package with the following command inside the * foundation-ng2-app* folder created.

npm install foundation-sites --save

If you want to add the Motion UI library to add animations to some Foundation components only with css classes you can also install it with npm

npm install motion-ui --save

Creating the main stylesheet

As we created the app with support for scss format it has created a styles.scss in the root of the source folder ./src/styles.scss.

In this file we should add all the scss we need. This include the Foundation base scss and the Motion UI scss files if you also need it. Generally you will add the scss and then you should include the defined mixin in order to use the styles.

//GENERAL IMPORTS AND INCLUDES
@import "~foundation-sites/scss/foundation";
@include foundation-everything(true);

// Motion-ui
@import "~motion-ui/motion-ui";
@include motion-ui-transitions;
@include motion-ui-animations;

If you want to customize your styles like colors or fonts you can copy the content of the settings file located in the scss/settings folder of the foundation-sites package in the project node_modules folder and modify any value you consider.

Customizing your application

That means, if you look in the foundation-site installed package there is a settings.scss file where there are some configurations and customizations for the Foundation framework.

You can find it on foundation-ng2-app/node_modules/foundation-sites/scss/settings/_settings.scss file. Ok, so then copy that file in your app source folder as _settings.scss. foundation-ng2-app/src/scss/_settings.scss would be a good place. Also modify the path to the Foundation utils scss file reference relative to the package path. That is replacing the line:

@import "util/util";

with

@import "~foundation-sites/scss/util/util";

In your application main component, for instance, app.component.ts there is a definition of where there are the styles of that component:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

In that definition there is where is located the scss file (styleUrls: ['./app.component.scss']) for that component, in that case, the main component as we want to configure it a global style for the whole angualr application.

So in that app.component.scss you should include the _settings.scss that we just copied on our assets folder.

@import "../scss/settings";

And now you can modify that settings file to manage all your customizations for that application. If you open that file in your editor you will see that there are a bunch of Sass variables ready to be changed, organized by components and sections.