Project setup workflow

[maciek]

We just purchased your template Avalon. The documentation is pretty miserable, and we were wondering which files are crucial for the theme to work. We've managed to get it working by changing the imports from the node_modules folder, and finding the right theme and also importing one of the colored theme versions like cyan. But we don't particularly like copying over whole assets folder with demo files, some html and other scss and css files that we feel are not required to make this theme working. We would be glad if you could give as a list of must-have files and folders.

And in addition, we would like to utilise some pages like login, but there are multiple css files for different colours themes styling this one view. Can you maybe simplify it how we can make it more generic? Or we have to include one specific file for this to work? We are quite lost on that one.

Thank you,
Maciek

[cetincakiroglu]

Hi,

In Avalon, you don't need the components inside app/demo/view and app/utilities, they are demo components to show a reference to how our components will look or behave in Avalon. Therefore you can remove all of them from the template to start customizing your template without causing any errors. Don't forget to remove them also from app.module and app-routing.module to prevent crashes.

Pages are combinations of example pages that you may need in your application such as;

- login
- landing
- invoice
- 404
- help etc.
You can customize and use them as you wish.

Crucial components are directly related to layout and impact the behavior of the template. Such as;
- app.component.ts
- app.footer.ts
- app.main.component.ts
- app.menu.component.ts
- app.menuitem.component.ts
- app.profile.component.ts
- app.menu.service.ts
You can customize as you wish but avoid deleting or removing them.

With respect to styling, there are some native template-specific styling documents. They are carefully designed for Avalon to style application layout. You can find them inside assets/sass/layout folder. Avoid removing or modifying them.

To customize your template styling, you can use empty SCSS documents inside the assets/sass/overrides:

- _layout_styles.scss
- _layout_variables.scss
- _theme_styles.scss
- _theme_variables.scss

They are empty and ready to override Avalon's default styles. Everything you put in here will override defaults. Plus, there are some theme-specific SCSS in the theme folder inside the assets/sass. They consist of theme-specific style sheets such as custom color variables (_variables_light.scss & _variables_dark.scss) and shades for dark & light theme.

You can remove all styling related to demo pages in assets/demo. Don't forget to remove imports of that files to avoid crashes.