https://github.com/nthompson777/ngx-foundation
The best way to quickly integrate Zurb Foundation for Sites 6 components with Angular 6 or 7.
https://github.com/nthompson777/ngx-foundation
angular bootstrap foundation-for-sites-spa foundation-sites ngx-bootstrap-alternative ngx-foundation
Last synced: 5 months ago
JSON representation
The best way to quickly integrate Zurb Foundation for Sites 6 components with Angular 6 or 7.
- Host: GitHub
- URL: https://github.com/nthompson777/ngx-foundation
- Owner: nthompson777
- License: mit
- Created: 2018-09-25T17:21:09.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2020-11-04T17:05:29.000Z (over 5 years ago)
- Last Synced: 2025-09-01T22:42:56.112Z (10 months ago)
- Topics: angular, bootstrap, foundation-for-sites-spa, foundation-sites, ngx-bootstrap-alternative, ngx-foundation
- Language: JavaScript
- Homepage: http://ngxfoundation.com
- Size: 1.79 MB
- Stars: 12
- Watchers: 2
- Forks: 3
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
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](http://ngxfoundation.com)
- [Changelog and Release Notes](https://github.com/nthompson777/ngx-foundation/blob/master/CHANGELOG.md)
## Table of contents
1. [Getting Started](#getting-started)
2. [Installation Instructions](#installation-instructions)
3. [API and Demo](#api-and-demo)
4. [Starter Kit](#starter-kit)
5. [Troubleshooting](#troubleshooting)
6. [License](#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](http://www.ngxfoundation.com/getting-started) 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:
```
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 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](https://github.com/nthompson777/ngx-foundation-starterkit) (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:
[http://ngxfoundation.com](http://ngxfoundation.com)
### Starter Kit
Want to get your ngx-foundation project up and running quickly? Use the [ngx-foundation Starter Kit](https://github.com/nthompson777/ngx-foundation-starterkit) (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)](https://stackoverflow.com/questions/tagged/ngx-foundation)
### License
MIT