{

Angular 13 How to integrate zurb foundation CSS with example?


In this tutorial, How to integrate zurb foundation in Angular framework. It also includes how to add tailwind styles and Apply button components for example.

Angular is a front-end open-source framework written by Google company. It is based on writing components in the Typescript language.

Angular 13 is the recent and latest version of Google.

Zurb Foundation is a Responsive mobile First CSS framework like Bootstrap, Bulma, Angular material, and Tailwind CSS.

The first type below command to check whether angular cli is installed or not

ng --version

if it gives an ‘ng command not found` error, You need to install ng command is an angular CLI to create an angular application with a prototype folder structure

First, Install Angular CLI using the below command.

npm install -g @angular/cli

It installs angular cli globally and the ng command works now.

To check whether angular cli is installed correctly or not use the below command.

B:\blog\nodejsless>ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 13.0.3
Node: 14.17.0
Package Manager: npm 7.11.1
OS: win32 x64

Angular: undefined
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1300.3
@angular-devkit/core         13.0.3
@angular-devkit/schematics   13.0.3
@angular/cli                 13.0.3
@schematics/angular          13.0.3

The next step is to create an angular application

ng new angular-zurb-app

Create an application with default settings and create an application blueprint with required dependencies.

Once the application is created, Please run the application

npm run start 
(or)
ng serve

How to integrate zurb foundation into the angular application?

ngx-foundation is an npm library wrapper for foundation CSS.

First, Install ngx-foundation into the angular app

npm i ngx-foundation

The next step is to integrate styles.

If your application is using CSS, You have to include the below CSS in index.html.

Include foundation.min.js and ngx-foundation.min.css URLs from CDN URLs.

index.html

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.4/js/foundation.min.js" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/ngx-foundation@1.0.8/dist/css/ngx-foundation.min.css" rel="stylesheet">

If your application is using scss, Following are the steps Please import ngx-foundation scss files into src/styles.scss

@import "~ngx-foundation/assets/scss/main";

It concludes the configuration of styles into the angular application.

Zurb foundation provides each UI component in angular modules.

Let’s discuss how to add a foundation button to the application.

Button styles are wrapped in ButtonModule. Let’s import ButtonModule in Angular application app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ButtonsModule } from 'ngx-foundation';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ButtonsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Next add button code to app.component.html

<button type="button" class="button primary" >
  button
</button>

It shows the foundation button on the page.

Conclusion

Step by step tutorial explained about

  • install Angular 13 cli
  • Create a new angular application
  • Integrate ngx-foundation into the angular app
  • Configure foundation CSS/scss styles
  • Import foundation modules
  • Foundation Button example
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.