All styling code lives in the
Below is a list of files of where you would find the matching html:
- Coding Style and Standards
- CSS Compilation
- Styling Updates
Coding Style and Standards
From your generated project folder, follow the steps below to compile the Sass files (found in /src folder) into CSS:
gruntfrom root folder. Grunt will now watch any sass file changes, and automatically re-compile
There are mobify device class that will be append on Mobify hosted asset's
html tag. The behaviours of these class are defined in
Start by setting default client styles for the following list of self-explanatory variables. The variables partial can be found at:
- $font-family (asked during grunt-init prompts)
- $container-width (asked during grunt-init prompts)
- $brand-color (asked during grunt-init prompts)
Generic bell and check icons are included with this project in the
custom/production/images folder; the bell icon is commonly used for the opt-in, and the check icon is used for the confirmation. Both these icons are SVG files.
Note: the default color of these icons is set to the brand-color entered during the grunt-init prompts.
To update the icon colors to match the client's brand, open each file and change the
fill attribute with client-specific colors.
Note: a logo is only added if there is a subscription page. (i.e. the solution is Mobify-hosted). The icons must always be added.
2 versions of the client's logo:
- images/logo.png: normal DPI logo
- firstname.lastname@example.org: high DPI logo
width/height dimensions for the logo can be found in
Push Notification Icon
A 192x192 pixels icon is required to display for each push notification. See Default Icon URL.
A 256px by 256px icon is required for Safari push notifications. The name of this icon is fixed and cannot be changed.
Update default generated button styles and hover states to match client's website styling.
Button Sass code to update can be found here: