/angular-bootstrap-material-starter

Starter Angular project using Material + Bootstrap, can be used to quickly scaffold an Angular application following best practices and a consistent style sytem

Primary LanguageTypeScriptMIT LicenseMIT

Angular Bootstrap Material Starter

Starter Angular Project with Bootstrap 4 and Angular Material components.

This project aims to utilize the beautiful and high quality components from the Angular Material repository and combine them with the flexibility and ease of use provided by Bootstrap 4.

Multiple themes can be easily created and lazy loaded into the app at runtime.

Theming is supported combining the Material color palettes with bootstrap utilities.

bg-${color} classes are generated by bootstrap and contrasting text color assigned based on Material palette.

Custom text-default and bg-default classes are generated to allow for easily switching between dark and light themes.

Prettier

Prettier is used to automatically style code, files can be pretified automatically on save by using the included .vscode/settings.json file in this repo.

Additionally, the prettier npm module is included as a dependency to prettify staged files with a pre-commit hook.

Prettier is used on this project to ensure consistent coding style.

TSLint

Similarly to Prettier, TSLint will try to auto-fix linting issues automatically on save using the included .vscode/settings.json file.

Running npm run lint:fix will also try to auto-fix any linting issues in the project.

There's a pre-push hook that will lint the project and prevent pushing if errors are present.

Hooks

Hooks are ran using Husky to ensure code quality through the scaffolding of this project.

pre-commit

Prettier will run as a pre-commit hook using pretty-quick on staged files.

pre-push

Linting (no auto-fix) and tests will be run as a pre-push hook, if either of them fail pushing won't go through.

VSCode

VSCode is recommended as the IDE for this project, included in this repo is .vscode/settings.json file with some basic settings to prettify and attempt to auto-fix lint issues with ease.

Development server

Run npm start for a dev server and navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.