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.

Links

• Documentation and Code Examples
• Changelog and Release Notes

Table of contents

1. Getting Started
2. Installation Instructions
3. API and Demo
4. Starter Kit
5. Troubleshooting
6. 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:

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:

<button type="button" class="button primary"
        tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Simple demo
</button>

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 https://foundation.zurb.com/sites/docs/sass.html 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

  <!-- index.html -->
  <link href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.0/dist/css/foundation.min.css" rel="stylesheet">

• ngx-foundation

  <!-- index.html -->
  <link href="https://cdn.jsdelivr.net/npm/ngx-foundation@1.0.6/dist/css/ngx-foundation.min.css" rel="stylesheet">

API and Demo

API documentation and usage scenarios available here: https://ngxfoundation.com

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.

Troubleshooting

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

License

MIT

Changelog

All notable changes and release notes to ngx-foundation will be documented in this file. This project adheres to Semantic Versioning.

[1.0.6] - 2018-11-01

Bugfixes

• Accordion: fix accordion group structure so last-child accordion-item has a bottom border and fix the classes applied

[1.0.5] - 2018-10-31

Added

• Minified and unminified CSS versions available at CDN JSDELIVR which contains all ngx-foundation compiled styles. CDN URLs available in the Getting Started section.
• New minified CSS version (without source maps) of all ngx-foundation compiled styles /dist/css/ngx-foundation.min.css
• New unminified CSS version (with source maps) of all ngx-foundation compiled styles /dist/css/ngx-foundation.css
• _foundationSettings.scss file used for compiling ngx-foundation styles to external CSS files
• Updated README.md file for Foundation for Sites and ngx-foundation CDN to JSDELIVR

Changed

• Location of bs-datepicker.css and bs-datepicker.css.map moved to /datepicker/dist/ due to conflicts when compiling SCSS to CSS
• bs-datepicker.scss file: added file extensions to imports of @import './utils/scss/variables.scss'; and @import './utils/scss/mixins.scss'; to correct errors when compiling to CSS

[1.0.4] - 2018-10-29

Added

• ModalModule (Foundation Reveal): SCSS modal animations now by default
• /modal/_modal.scss file which implements the newly added modal animations
• New import of _modal.scss file to /assets/scss/main.scss
• Updated the README.md file
• Newly created ngx-foundation Starter Kit (uses Angular 7 and SCSS) with detailed instructions and includes all necessary base assets and components

[1.0.3] - 2018-09-27

Changed

• DatepickerModule: Fixed variables for primary and secondary themes to datepicker variables file which corresponds with Foundation for Sites default variable names
• DatepickerModule: removed left and right position alignment from API until viewport detection is implemented
• DatepickerModule: changed showWeekNumbers to false (hide) by default
• DatepickerModule: bs-datepicker.scss file - removed left positioning, lessened min-width, font-size, padding and bs-datepicker-head height to accomodate mobile devices more effectively

[1.0.2] - 2018-09-25

Changed

• DatepickerModule: Added 2 color themes mapped to Foundation for Sites default color palette scheme
• DatepickerModule: increased padding to fix gaps in range background block between a span of dates

[1.0.1] - 2018-09-25

Added

• Added missing module files on initial commit

Changed

• Minor fix to package.json file

[1.0.0] - 2018-09-25

Added

• Initial commit of all files and npm package name change from the deprecated ngx-zf-foundation to the current ngx-foundation