IOP Nucleus
Intro
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>