Theming
Learn how to style the template to match the design of your app
The template includes lots of pages, features and components but you are free to use just what you need and delete the code you don't. The code structure is super modularized so you will find it easy to modify the code to fit your needs.
For this project, we relied on SASS (which basically is CSS with superpowers) to enhance the code structure, maintainability and extensibility.
We used a combination of Sass mixins and partial classes to provide extra modularity to the styles.
Each component has its dedicated set of sass files, well structured with independent variables so you can have maximum modularity, flexibility and customizability.
A Mixin is a block of code that lets us group CSS declarations we may reuse throughout our site. You can learn more in SASS documentation.
For this Angular app we created a few custom global mixins to ease the styling of some components.
You can find them under
src/theme/mixins/.We also split some large component styles in different partials to better organize the code. The
top-navbar and the main-menu components are clear examples of this techniqueCSS Variables provide easy customization of an application and allow a value to be stored in one place, then referenced in multiple other places.
We used extensively CSS 4 variables across the project as they provide great flexibility compared to previous alternatives like Sass variables.
The key difference between the two is that Sass variables are compiled and executed at build time whereas CSS 4 variables are executed at run time in the user's browser. This enables changing the values of these CSS 4 variables dynamically at run time using minor bits of javascript.
CSS variables make it easier than ever to override components to match a brand or theme.
We included Font Awesome library to make use of some of its handy icons.
We believe Bootstrap grid system is one of the best options out there. We mainly use Bootstrap to handle the styling of grids, it's reset rules and some of the mixins it provides (responsive media breakpoints utilities).
On top of bootstrap sass utilities, we also use ng-bootstrap which has a complete list of handy components written in pure Angular ready to use.
There are some highly used components and utilities that are not available in ng-bootstrap. That's why for specific components we included some modules from Angular Material.
To ease the implementation of responsive styles, we used the responsive mixins provided by Bootstrap.
We also tried to group all responsive styles in specific files (
*component*.responsive.scss) to make it clear which set of styles change between different screen sizes.In the
src/theme/main.scss you will find global configurations and styles.Easily change the font family of the entire app.
body {
margin: 0;
font-family: 'Nunito', sans-serif;
}
This template comes with the ability to dynamically change the color palette used across the project. By using CSS 4 variables, the palette can be dynamically changed at runtime, no need to re-compile the project to switch colors like you would typically do if using Sass variables to store colors.
Under
/src/theme/palettes/ you will find two folders containing the definitions of two different color palette options. You would also find a interface.scss file which includes a list of all the colors that the palette should define in order to work properly across the template.To make these color palettes available in the project, you need to follow two steps:
- Go to
src/theme/main.scssand import the palettes you would like to use. - Go to
src/app/app-color-palettes.tsand set the default color palette for your project.
This template uses Bootstrap and Angular Material so you should also override their default primary colors to meet the chosen palette colors.
This is the recommended approach, however, you could switch to using just Sass variables to store colors instead of multiple palettes using CSS 4 variables.
To do so go to
src/theme/third-party/override-material-variables.scss and to src/theme/third-party/override-bootstrap-variables.scss and follow the comments to set the variables.
Last modified 3yr ago