IOP Nucleus



IOP Nucleus is a pattern library that forms the core of IOP’s digital UI from 2018 onwards.

This library aims to stay lean and platform agnostic, with little opinion of final implementation. However, there is inevitably some key tech that’s been used to create this website and the UI it contains. It has been built with the main website in mind, but should serve as a relatively lightweight statring point for any IOP digital product.

IOP Nucleus has been built using Fractal.


Components have been grouped into the following heirarchical groups:


Colours, icons and typography styles form the backbone of the UI and are considered ‘base’ level as as they lay the foundation for the other, more complex components that they live within.


Buttons and form elements are the most simplisitic of ‘components’ and these are classed as atoms to convey the level of complexity. Mostly they require very simple markup in order to use and are often implemented as part of the larger ‘molecular’ level Components.


Components are more complex UI pieces like heros and footers that require more markup and often have stronger UI semantics which creates distinction between them and other components.


Templates like the content page are examples of how components and atoms can be combined to create whole page templates using the Bootstrap grid and base styles.

Distributed code


All UI structure uses HTML. As it is, this makes is usable across multiple browsers and devices as a website, web app or hybrid mobile application. To use a template, simply find the component within this site and copy the code from the HTML tab.


BEM classes is used to structure CSS and ensure stlyes are encapsulated as UI components where possible

Context classes are used to contain components and other elements and give them contextual meaning on a wider template basis

State classes are used to convey transient component states primarly centred around user interactions.

Base styles includes general typographic treatment and comes with the Bootstrap 3 grid.

Use bundled CSS

<link rel="stylesheet" type="text/css" href="">


Data attributes are used to attach behaviours to components to allow users to simply load the bundle and add behaviours without writing extra JavaScript.

Use bundled JS

<script type="text/javascript" src=""></script>

jQuery has been used and is required along with the bundles.