Document Properties
Kbid2F9437
Last Modified22-Apr-2020
Added to KB18-Jun-2020
Public AccessEveryone
StatusOnline
Doc TypeGuidelines, Concepts & Cookbooks
ProductIntershop Progressive Web App

Concept - Intershop Progressive Web App - Styling & Behavior

Styling & Behavior

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 Chapter Multitheming).
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.

References

Guide - Multiple Themes

Disclaimer

The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.

Customer Support
Knowledge Base
Product Resources
Support Tickets