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:
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.
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>