All cookies accepted? Start exploring!
We use cookies to give you the best experience and to analyse how you use our website, these cookies are necessary for our website to function and cannot be switched off in our systems. We call these essential cookies as they are used to ensure site security and to provide core functionality. Without this type of technology, our website won't work properly. We also allow third parties to use tracking technologies for similar purposes. These cookies are used by social media services to enable you to share our content with your friends and networks.

Share Since Mercury is built upon the Zurb Foundation framework, it is very easy to get your project up & running. You can use all the techniques described in the Foundation Docs.

Getting started

To run the project locally on your development environment, make sure you have at least the following tools installed: 

Start by going into your /src/Projectname.HTML/ folder, and run the following commands: 

$ gulp

$ gulp frontend-serve

A new browser window will open with links to all the predefined pages, after which you’re ready to start your frontend development. As soon as you apply some changes to the SCSS files, Browsersync will automatically refresh the page and use your new styling. 

Note: If you want to see changes you’ve made to the HTML template, run the command:

$ gulp generate-html

Your corporate identity

One of the most important files in your project is the _variables.scss file, which is located directly in the /assets/scss/ folder. By changing some variables you’re already a step closer to applying your corporate identity! 

Some notable variables you definitely need to use: 


This is the base of your color-scheme. All your base corporate identity colors should be in this variable. If you want to use them, just apply the variables $primary-color, $secondary-color etcetera. 


As the name implies: this variable is to specify the base font-family for your project. If you use either a local font, or a font from an online provider such as Typekit or Google Fonts, this is the place to implement it in your variables. 


Another part of the base typography are the header styles. In the variables file you’re able to specify the font sizes for small screens and medium (and up) screen sizes separately. The default values are already balanced, but you’re able to alter them to your needs. 


The breakpoint widths can be changed in the variables file as well. Although the default values are pretty common, it’s possible to change them to your own needs. 

The variable $breakpoint-classes makes it possible to add or remove values. E.g., if you also want to use xlarge, change the variable like this: 

$breakpoint-classes: (small medium large xlarge);


Mercury builds on the Zurb Foundation to provide an easy starting point for frontend development that includes an extensive toolset that’s semantic, readable, flexible and completely customizable. 

Related articles

Articles related to this topic

Share a Tweet
Nice article on implementing your corporate identity in Mercury E-commerce. #FRONT-END # SITECORE # IDENTITY  Share
Mercury builds on the Zurb Foundation to provide an easy starting point for frontend development that includes an extensive toolset. #FRONT-END # SITECORE # IDENTITY  Share