Menu
Menu Sheet Overlay
Search
Search Sheet

Styling

    The AMP specification enforces a CSS size limit, and does not support external stylesheets. Mobify AMP generates the relevant CSS to the current template, and renders it in the <head> of the document. More details about AMP stylesheet limitations can be found here.

    Styles and components #

    In an effort to only include CSS required by the components used in a particular template, a mapping between components and their styles is maintained. When adding a new component, make sure to add the appropriate entry in amp/app/styles.js to associate the component with its Base and Theme styles. In the future, this step will be automated.

    Sharing with the PWA #

    Base, animations, lib and utility styles are linked directly to those styles in the web/ folder.

    The Webpack configuration for Mobify AMP includes an alias for the web directory. This allows styles to be imported from the web/ folder using the path @import '~web/path/to/file'. The ~ is used to indicate to sass-loader that this path is not relative, and should be handled by Webpack. For more information, see the sass-loader documentation.

    Linting #

    In order to stay aligned with the AMP styling specifications and help build valid AMP markup, sass-lint and stylelint have been set up to keep AMP styles valid, as well as PWA styles shared by AMP valid.