IOP Nucleus


Intro

IOP

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 iop.org website in mind, but should serve as a relatively lightweight statring point for any IOP digital product.

IOP Nucleus has been built using Fractal.


Structure

Components have been grouped into the following heirarchical groups:

Base

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.

Atoms

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

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

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

HTML

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.

CSS

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="http://iop-nucleus.catchdigital.com/css/styles.css">

JavaScript

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="http://iop-nucleus.catchdigital.com/js/bundle.js"></script>

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

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"
></script>