nthompson777 / ngx-foundation-starterkit

A 'style-agnostic' Starter Kit for ngx-foundation that contains all of the basic assets to get your SPA up and running quickly.

ngx-foundation Starter Kit (Angular 7)

A Starter Kit for ngx-foundation that uses Angular 7, the latest stable version of Foundation for Sites using the XY Grid and SCSS by default and ngx-foundation. The starter kit contains all of the basic assets to get your SPA up and running quickly.

The Starter Kit/Project is 99.9% style-agnostic and contains the flat/default Foundation for Sites styles, so you will have to add your own styles and change the variables in the /src/assets/scss/_settings.scss file yourself to give the project your own unique look. See the SCSS Variables section below for more detailed information.

This project was generated with Angular CLI version 7.

Table of contents

1. Getting Started
2. Install Angular CLI Globally and Packages
3. Imported ngx-foundation Modules
4. Development Server
5. API and Examples
6. Code Scaffolding
7. Stylesheets and Assets
8. SCSS Variables
9. Optional What-input
10. Build and Tests
11. Help
12. License

Getting Started

cd to the directory that you want to install this starter kit to, then do a git clone:

git clone https://github.com/nthompson777/ngx-foundation-starterkit

Then rename your project folder.

Install Angular CLI Globally and Packages

Run yarn global add @angular/cli or npm i -g @angular/cli

Install Packages

Simply run yarn or npm install

If you do not already have Yarn installed, install it globally here.

Imported ngx-foundation Modules

All ngx-foundation modules are imported by default and are globally available in your project: /src/app/shared/ngx-foundation.module.ts. Remove or comment out the modules that you do not need.

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';

If you are implementing Lazy Loading or don't want to have all modules globally available in your project you will need to remove import { NgxFoundationModule } from './shared/ngx-foundation.module'; located in /src/app/app.module.ts and then import whatever modules you need for each component in your route.

Development Server

Run yarn start or ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

API and Examples

Visit the ngx-foundation site to see examples with extensive code snippets.

Code Scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Stylesheets and Assets

The main stylesheet /src/styles.scss contains all of the needed base imports. All other stylesheets are located in the assets directory: /src/assets/scss. All Foundation components and the Motion UI Sass Library are imported by default, so be sure to comment out any unneeded Foundation components that you're not using in your project to keep your stylesheet file size smaller.

SCSS Variables

Add your own unique styling by changing the variables in /src/assets/scss/_settings.scss. This overrides the Foundation variables without having to edit the Foundation for Sites settings source file which allows for a near seemless upgrade when updating Foundation.

Optional What-input

what-input.js is imported as a dependency and can be implemented by adding it to the scripts array located in the /angular.json file. Be sure to add to both "build" and "test".

"scripts": [
  "./node_modules/what-input/dist/what-input.min.js"
]

Build and Tests

Run yarn build or ng build to build your project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running Unit Tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Help

Visit the ngx-foundation site to see examples with extensive code snippets.

Reach out to me via Twitter: @nthompson777

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

License

MIT