Overview

Ireland.com user interfaces are as varied as their uses – ranging from inspiring websites to applications for a particular service. They are based on the principles of the Ireland.com look: variety, honesty and balance. The aim is to create varied solutions and a well-balanced, system-wide user experience – from the app to the web.

The basis for this is provided by a joint set of components, modules and animations.

example image

Getting Started

  1. Clone the repo in your projects folder.
  2. Edit the config.yml with your preferences.
  3. Install all libraries and dependencies with npm install
  4. After it has finished you can initiate the local dev environment by typing the following in the terminal: gulp
  5. If you’d like to update the provided theme spin up the following task after you change the theme folder: gulp fractal:theme

UI Elements

The previous iteration of the pattern library was relying on Atomic Webdesign. Since the chemistry language was not suited for everybody use we decided to have a more friendly naming convention taking inspiration from the GE Predix Design System with a few slight tweaks.

The classification is as follows:

  • Principles - grid, content alignment
  • Basics - buttons, links, tags
  • Components - individual, self-contained UI elements
  • Templates - header, footer, sidebars
  • Features - capabilities and functionalities
  • Applications - entry point for the user

CSS Structure

The new folder structure resembles the old ITCSS for all modules, keeping everything self-contained for being mantainable and scalable over time.

The customised Inverted Triangle CSS looks as follows:

  • Foundation - base grid settings
  • Settings - variables and definitions
  • Tools - mixins and functions
  • Generic - resets/3rd party
  • Elements - bare elements like H1, A, Sections etc.
  • Utilities - utilities and helpers
  • Components - specific UI components