From a designer or front-end developer’s perspective, there's no need to run Sitecore and / or Visual Studio to view and customize Mercury. Our goal is that every designer and front-end developer can adjust the interaction and styling of your project solely using Mercury.Demo static HTML. This makes presenting or co-operation with other agencies easier to accomplish.
Mercury.Demo uses the Zurb Foundation
Working with Mercury.Demo
It’s easy to apply adjustments to the front-end code in Mercury.Demo. Take a look at the ‘assets’ folder structure of this project:
- - css
- - - style.css (generated by Gulp)
- - fonts/*
- - icons/*
- - js
- - - components/*
- - - app.js (generated by Gulp)
- - scss/
- - - components/*
- - - _variables.scss
- - - style.scss
- - vendor/*
Mercury.Demo uses the Zurb Foundation framework for styling which means that we’ve extended the default Zurb Foundation styling with Mercury.Demo’s own styling variables - defined in ‘_variables.scss’ - and styling components as listed in ‘assets/scss/components/*’.
In the ‘assets/scss/components/*’ folder, you see styling components. These components use Foundation Sass’ mix-ins, styling variables and Mercury variables. Best practice is to define colors, typography and grid settings in the ‘_variable.scss’ file.
This makes it easy to theme your website and apply changes for all components, because all the styling components use theme colors and settings that are defined in the _variable.scss file.
Mercury.Demo includes sample templates provided for displaying a set of components on a page for example: Account, Catalog, Checkout, Location pages. Templates are generated by Zurb Foundations Panini template engine using Handlebars syntax. BBy combining the provided sample data in ‘Testdata’ it’s possible to run a fully working static environment. From here you can apply styling and interaction changes without running Sitecore on your development machine.
Local test data
Mercury.Demo is initialized with local test data placed in the 'testdata' folder. Feel free to customize this data to match your project needs.
Backend developers can benefit from Mercury.Demo since the Mercury.Demo project automatically places the .css and .js in the correct location for use in a web project. Only layout HTML changes should be manually integrated in .cshtml files since these files should be compiled together with the web project.
With local test data, website performance is not an issue because everything is local. No need to wait for the CMS before the page loads or any other web requests. In the end, working with Mercury.Demo will speed up your process and integration of a web project.