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.
Components have been grouped into the following heirarchical groups:
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.
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.
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.
<link rel="stylesheet" type="text/css" href="http://iop-nucleus.catchdigital.com/css/styles.css">
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>