The visual design (styling) and the interaction design (behavior) of the Intershop Progressive Web App is derived from the Responsive Starter Store with some changes (e.g., the header) to improve and modernize the customer experience and to provide an easy optical distinction between the two Intershop storefronts.
While the Responsive Starter Store is based on a customized/themed Bootstrap 3, the Intershop Progressive Web App styling was migrated to build upon the current version of Bootstrap 4.
This also means that the Intershop Progressive Web App styling is now based on Sass.
Bootstrap Integration
The styling integration is configured in the /src/themes/main.scss of the project where Bootstrap together with the customizations is configured.
Instead of the Bootstrap 3 Glyphicons, the current styling uses free solid icons of Font Awesome.
The styling itself is integrated into the project as global style via a style.scss that is referenced in the angular.json and is compiled automatically (see also Guide - Themes).
Throughout the whole Intershop Progressive Web App, there are almost no component-specific styleUrls or styles properties.
The Javascript part of Bootstrap for the behavior is not directly used from the Bootstrap dependency since this implementation is jQuery based and not really suited to work in an Angular environment.
For Bootstrap 4, ng-bootstrap provides Bootstrap widgets the angular way.
Using these components works best with the styling taken from the Responsive Starter Store.
However, the generation and structure of the HTML for the Angular Bootstrap differs from the HTML working with the original jQuery based bootstrap.js.
Adaptions and changes in this area are inevitable.
Assets
The assets folder is the place for any static resources like images, colors, etc., that are used by the storefront styling.
Fonts
Currently the default font families for the Intershop Progressive Web App Roboto and Roboto Condensed are defined as npm dependency.
Icons
As described above, solid Font Awesome icons are used.
To integrate an icon:
- Open the appropriate page icon details, e.g. https://fontawesome.com/icons/print?s=solid&f=classic
- Copy only the name of the icon without the "fa-" prefix, in this case
print
<i class="fa-solid fa-print"></i>- Use the icon name with following syntax
<fa-icon [icon]="['fas', 'print']"></fa-icon>If an icon is not available yet, you need to add it to src\app\core\icon.module.ts in the import {} and the constructor(){}.
Optimization
The PWA uses PurgeCSS for bundled styles optimization.
Please read the additional documentation for information on the usage and configuration of PurgeCSS in the Intershop PWA.