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.
- Getting Started
- Install Angular CLI Globally and Packages
- Imported ngx-foundation Modules
- Development Server
- API and Examples
- Code Scaffolding
- Stylesheets and Assets
- SCSS Variables
- Optional What-input
- Build and Tests
- Help
- License
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.
Run yarn global add @angular/cli or npm i -g @angular/cli
Simply run yarn or npm install
If you do not already have Yarn installed, install it globally here.
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.
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.
Visit the ngx-foundation site to see examples with extensive code snippets.
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.
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.
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.
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"
]
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.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
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.
MIT