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 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.