Reports Framework

Introduction

A project commissioned by Mishcon. Working with Well Studio, Pilotbean and Interact to build a flexible system to enable the creation and presentation of design reports. Examples of these reports are listed in the Mishcon Reports Basecamp project.

Design styles

Brand Guidelines

BRAND Coming Soon

A library of brand artchitecture and guidelines

Guidelines

Design System

UI New

A library of design styles and rules for Reports are now available in Figma

Design System

Development tools

The following tools have been used in the framework of the Mishcon Reports prototype

Git Repository

Sit amet

The site repository is located in the Well Studio GitLab

Git Repo

Preview

A preview version of the framework site is available on the Well Studio development server

Open Props

Site CSS uses the non-prescriptive Open Props library of CSS variables

UI Kit

We trigger events and animations while scrolling the page using the scrollspy feature from UI Kit

Eleventy

This Node-based builder is used to generate purely static output.

Bootstrap

We picked select components from the Bootstrap framework where Markup, CSS and JS is robust and well proven. We use BS for Grid, Cards, Modals and Utilities.

Font Awesome

Icons on the site are from the Font Awesome library

Figma

A library of design styles and rules for the new section are available in Figma

Team responsibilities

The following tools have been used in the framework of the Mishcon Reports prototype

Interact

Design library and patterns

Well Studio

Front end markup and CSS

Pilotbean

CMS integration and final deployment of code