Native Angular Foundation for Sites Components

Downloads in past


1281.0.85 years ago6 years agoMinified + gzip package size for ngx-foundation in KB


<h1 align="center">ngx-foundation</h1>

The best way to quickly integrate Zurb Foundation for Sites (6.4 or later) components with Angular 6 or 7. This is a fork of ngx-bootstrap by Valor Software. No jQuery is required to implement with your Angular project.


Table of contents

  1. Getting Started
  1. Installation Instructions
  1. API and Demo
  1. Starter Kit
  1. Troubleshooting
  1. License

Getting Started

ngx-foundation contains all core Foundation components powered by Angular. There is no need to include original JS components, but we are using markup and SCSS provided by Foundation for Sites. See the ngx-foundation website for detailed setup instructions, SCSS /style.scss setup file example and more....

Installation instructions

Install ngx-foundation from yarn or npm: ```bash yarn add ngx-foundation npm i ngx-foundation ``` Add needed package to NgModule imports: ``` import { TooltipModule } from 'ngx-foundation'; @NgModule({ ... imports: TooltipModule.forRoot(),... ... }) ``` Add component to your page: ``` tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Simple demo ``` List of available modules for import: ``` import { AccordionModule, AlertModule, // Foundation Callouts ButtonsModule, CarouselModule, // Foundation Orbit CollapseModule, BsDatepickerModule, BsDropdownModule, // Foundation Dropdown Menus and Dropdown Panes ModalModule, // Foundation Reveal OffcanvasModule, PaginationModule, ProgressbarModule, RatingModule, SortableModule, TabsModule, TimepickerModule, TooltipModule, TypeaheadModule, } from 'ngx-foundation'; ```

Add ngx-foundation and Foundation SCSS Base Styles

Import ngx-foundation base styles to your main src/styles.scss file: ``` // Import Foundation for Sites // See for detailed info. @import '~foundation-sites/scss/foundation'; @include foundation-everything; // Import Angular ngx-foundation Framework Added Styles @import "~ngx-foundation/assets/scss/main"; ``` Download the ngx-foundation Starter Kit (uses Angular 7, Foundation for Sites using SCSS, and ngx-foundation) to get up and running quickly.

CSS Only

If you're going the flat CSS only route you will need Foundation 6 and ngx-foundation base styles:
  • Foundation 6
``` ```
  • ngx-foundation
``` ```

API and Demo

API documentation and usage scenarios available here:

Starter Kit

Want to get your ngx-foundation project up and running quickly? Use the ngx-foundation Starter Kit (uses Angular 7, Foundation for Sites using SCSS, and ngx-foundation) with detailed instructions and includes all necessary base assets and components.


The best place to ask questions is on StackOverflow (under the ngx-foundation tag)