<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Vanilla setup

Installing SWAN

If you are generating HTML pages using some template engines, installing SWAN will help with injecting styles and scripts.

Additionally, you may just want to re-use the design tokens that are exported within the SWAN package.

Configuring the .npmrc file for your project

SWAN is hosted in a private npm repository, so to install the package, you need to ensure that your .npmrc file is configured.

Add an .npmrc file to the root of our project with the following content.

Share
Share

You need to configure the VP_ARTIFACTORY_TOKEN environment variable in your system. To retrieve the value, please log in to jfrog and configure your npm client by login into it.

Read more in detail at "Install NPM Packages from Vistaprint Artifactory"

Install the latest version of SWAN

Share

Configuring Page

Specifying the Locale (HTML Tag)

The html tag must have a lang attribute whose value is the language tag for that locale's language and region, using the language and region subtags. For instance, the language tag for Irish English would be en-IE, while the language tag for United States Spanish would be es-US.

Share

Configuring Head

Add favicons
Share
Share
Add fonts and font faces

Most pages will need only the the Graphik webfont. (If a page design specifies MarkWeb, consult your designer first before you add it. That font was used on the monolith for older VistaPrint site designs, and isn't part of our current branding.)

Share
Share
Adding stylesheets

All the stylesheets are hosted on our CDN.

SWAN exports utility methods to retrieve the URLs for our hosted stylesheets, as shown below. Using these, you can add either hashed and versioned files.

If you are manually typing the URLs its advisable to use the versioned one.

Share
Share
Adding Scripts

Most of our components are CSS and HTML only, and don't need any additional JavaScript. The components below require JavaScript, and we provide a vanilla JS implementation:

  • Accordion
  • Alert Box
  • core
  • Modal Dialog
  • Popover
  • Progress
  • Progressive Image
  • Tabs
  • Toggle Switch
Share
Share

SASS:

There are separate instructions on how to use SWAN design tokens in your project's stylesheets.

If you’re using node-sass in your project, we recommend that you use sass instead of node-sass with SWAN. The sass project works with all the major bundlers and frameworks (eg. gatsby, webpack, snowpack, parcel, etc) without you needing to change anything in the configuration.

npm uninstall node-sass # if already installed
npm i sass -D


Configuring the Body

SWAN is built to be interoperable with other design systems to allow incremental adoption. In order to achieve this, everything related to swan must be within the swan class.

Page Structure

Pages need a single, consistent set of HTML tags and CSS classes for wrapping major elements of the page, to provide a standard layout, and to support any behaviors we want to be consistent across the site. Your individual environment may already be providing some of these tags, e.g. through SwanProvider when using the visage library. If so, do not duplicate them.

Share
Was this page useful?

Thanks for your feedback!

Feel free to include your name if you wish to have a follow up conversation.


VanillaJS Implementation
Published: Jan 31, 2022Last updated: Dec 2, 2024