EvoToolkit - v3.7.2 (Changelog)

Introduction

The Brand Toolkit is a pattern library which documents EvoToolkit, an Evolution Funding framework which provides a solid, proven architecture for project CSS & JS that allows you to easily create layouts with ready-made, onbrand UI components.

Having a framework and collection of ready-made UI components provides a number of advantages when working on projects:

  1. It saves time because you don't have to create everything from scratch.
  2. Because all developers are using pre-built components, it improves design consistancy across all of our systems, which is better for usability than having a new interface for each system.
  3. Each component has already been fully tested with full cross-browser compatibility back to IE11.
  4. Having a predefined architecture, driven by best practices, means you'll not have to worry about what is the best way to organise CSS to make it simple, easy to use and scalable.
  5. It's extendable and customisable on a project by project basis, so if it doesn't quite meet your needs, you can easily tweak it until it does.

Framework Breakdown

Here's a quick breakdown of the technology and methodologies used in EvoToolkit.

  • CSS
  • JavaScript

For its CSS, EvoToolkit leans heavily on Inverted Triangle CSS (ITCSS), an architecture where CSS is broken down into multiple layers which are organised by how specific and explicit their style declarations are.

These layers are as follows, from high explicity to low, hence the inverted triangle ▼:-

  • Settings - Global variables, maps, and other data used by the framework.
  • Tools - Helpful SASS functions and mixins which are suited for various tasks.
  • Generic - The first layer that actually produces any CSS. It houses very high-level, far reaching styles which effect much of the DOM.
  • Elements - Styling bare, unclassed elements. For example, what would a <h1> look like without any classes attached?
  • Objects - These are undecorated design patterns. You would typically use these as a part of existing components or when building your own.
  • Components - Ready made, customisable UI components which you can drop into your project.
  • Utilities - High-specificity, very explicit selectors. Typically small, single use helper classes.

ITCSS helps you to organize your project CSS so you can better handle specifics like global namespace, cascade and selector specificity; making your CSS more scalable and maintainable in the process.

See 'Manage large CSS projects with ITCSS' (Article / Video), aswell as the resources below, for a more thorough exploration into this methodology.

EvoToolkit uses a class based approach for implementing JavaScript logic, allowing for maximum readability and flexibility.

Here's a few points of note:-

  • Code is extrapolated into seperate files using the same ITCSS directory structure where possible for consistency (Tools, Objects, Components, etc). This also helps ensure a seperation of concerns.
  • Supports the latest ES6 JavaScript, due to being transpiled by Babel into older ES5 JavaScript on build. This means older browsers such as Internet Explorer, which don't support many ES6 features, can function without breaking.

For more information, see Extending EvoToolkit and JavaScript API.

Supporting Articles

EvoToolkit is driven heavily by industry best practices. Here is a collection of resources where some of these best practices are explored in more detail. (Show/Hide All)

Inverted Triangle CSS (ITCSS)

BEM (Block Element Modifier)

Responsive Design

SASS

General CSS Methodology

Pattern Libraries

Theory

Examples