Skip to content
This repository has been archived by the owner on Dec 8, 2023. It is now read-only.

printdeal/styleguide

Repository files navigation

Readme Build Status

Installation

  1. Make sure you have the correct version of node installed as defined in the package.json (7.10.1 for example). Do node -v to check your version and upgrade/downgrade accordingly. You can use https://github.com/tj/n or NVM to easily switch node versions.
  2. Place the fonts into src/fonts manually. The fonts are not included in this source because they are licensed. See your local documentation and or repositories on where to get them. Failing to do this step will result in compilation errors when running installer.sh.
  3. Run cp tasks/config.json.template tasks/config.json and add the AWS credentials to the new config, by replacing the **** placeholders with the credentials found in the password manager. Failing to do this step will result into broken icons.
  4. Run ./installer.sh.
  5. If you run into permission errors please refer to this document: https://docs.npmjs.com/getting-started/fixing-npm-permissions.

Generating webfonts

  1. (Optional for adding new fonts.) Designer hands off original files (TTF, WOFF, or something else, but hopefully one of these).
  2. (Optional for adding new fonts.) Use https://www.fontsquirrel.com/tools/webfont-generator to generate the correct versions of the webfonts, follow these steps:
    • Upload the fonts.
    • Pick expert mode 😄.
    • Check TTF, WOFF and WOFF2.
    • Choose Arial to match x-height, as Arial is our first fallback font.
  3. Add the fonts to the this repo, in the src/fonts folder.
  4. Make sure the paths to the fonts are generated, by publishing the fonts (gulp fonts:clean && gulp fonts:rev && gulp fonts:release).
  5. Adjust the font-settings in the theme specific _settings.scss file.
  6. Make sure the @font-face rule is generated: check if the @webfont mixin is used for this font.
  7. Now you're ready for testing the new font.