<aside> 📢 There is a new version available!
The GS1 web guidelines CSS download has been updated with a new version of the Gotham font and may need an update on your website. The new font is now available directly from GS1 Global CDN, ensuring more control and performance.
We were using the previous version, how can we change to this version?
The change is simple and will require only a small update in the font link. Change the link to the font in the head section of your page HTML.
Where you had:
<link rel="stylesheet" type="text/css" href="//cloud.typography.com/6247692/752844/css/fonts.css" />
you need to change to:
<link rel="stylesheet" type="text/css" href="https://fontscdn.gs1.org/fonts/03A90DC068E9B790E.css" />
What is a CDN and why should we use the GS1 Global CDN?
A Content Delivery Network (CDN) is a solution to distribute files around the world to make the files accessible closer to the users using a highly scalable and distributed network. GS1 uses the Microsoft Azure distribution network, ensuring great performance, stability and reach.
</aside>
The package supplied contains CSS which is meant to serve as a foundation for a GS1 brand standards-compliant website. It contains type, spacing and colour styles.
Be sure to check out the "Responsive font sizing" section below for an explanation of how and why we are using expressions to tie font sizes to viewport width and root font size.
Take the ready-to-use css file /css/style.css **for use as the basis of your site's theme.
Want deeper integration into your workflow? All the Node.js and Gulp task runner support files are included which will let you compile the SCSS code yourself.
This is a Node.js project using the Gulp task runner to compile the SCSS down to CSS using Dart Sass and AutoPrefixer.
Note: the SCSS was written using Sass' relatively new module system. According to Sass, the legacy @import feature will be deprecated by 2021 and fully removed in 2022.
The "watch" task outputs expanded CSS with sourcemaps and start a Browsersync instance that will auto-inject style changes.
The "prod" task outputs production-ready compressed CSS without sourcemaps.
Example usage run from the project root:
npm install -g gulp-cli # Assuming that the gulp-cli package isn't already installed
npm install
# ...
gulp watch # Start the task watcher for development
gulp prod # Build for production