Development and Coding

We also use a BEM class system, which is a best practice method of having a class structure you can call upon to make new layouts and elements. It means that code is simple to read (for example the site header is class=”site-header” and then elements within are classed as “site-header__logo”, “site-header__button” etc, which then may have modifiers (for example two header buttons but one needs to be more visible might have a class=”site-header__button–standout”.

Lastly, utilising BEM we employ a system of objects and components to split out our styling templates. Objects are things such as buttons, input fields, modals, tables, and components are things like a video banner block, or a call to action grid. We first define the objects, then reference them within the components. It means that elements don’t have an array of classes, making it harder to read (e.g. class=”site-header__button button button–standout margin–top”), but simply have the one class (e.g. class=”site-header__button”).

The frontend developer will be involved in early design meetings, plus reviewing design work from a technical point of view, to ensure that the work meets with platform functionality, and not to have an effect on site speed or performance.