Designing Themes

A guide to designing or customising a theme for Evance


Evance's Theme Engine was developed to overcome frequent obstacles we faced as a production team. Whether you're creating a theme, modifying an existing one, or redesigning your site we hope that you'll find this guide useful.

Structure

As you would expect the bulk of your theme consists of HTML, CSS, JavaScript and images. The Evance Theme Engine requires a specific file structure in order to load appropriate layouts and templates for each customisable area of your site. If you are new to creating themes in Evance we recommend taking the time to understand the file structure and configuration requirements.

Understanding Theme File Structure

EVML

Evance uses EVML to render your theme's layouts and templates. The familiar syntax of HTML and JavaScript, with a debug tool that links directly into online documentation, makes EVML easy to learn and fast to work with. Under the hood EVML Objects simplify common functionality to streamline production, whilst quietly utilising built-in caching engines and efficiently handling database lookups.

EVML Reference Guide

CSS

Evance automatically loads relevant stylesheets for your theme, can combine multiple files from a JSON inventory into a single sheet, and automatically compresses your CSS before they're delivered by a CDN.  Evance avoids unexpected display errors when changing CSS caused by browser and CDN caching. You can nest, extend, use variables, create presets and utilise colour adjustment functions. 

CSS Preprocessor Guide

JavaScript + jQuery

Evance themes require a core set of JavaScript files including jQuery. You may, of course, load additional libraries and include your own JavaScript files. Similarly to CSS your JavaScript is automatically included and you can combined multiple files in a JSON inventory into a single script. JavaScript is compressed and delivered using a CDN.  

CDN

Evance utilises a Content Delivery Network to deliver static files such as CSS, JavaScript, and images. EVML Objects and special URL formats ensure that CDN URLs are calculated on your behalf so that you don't have to worry about URL transformations or caching issues when modifying static content.

URLs

Special URL formats remove the need for cumbersome functions and filters in hard coded URLs.

Evance Path URLs