Welcome

The Atomia Pattern Library is where the UI components for the Atomia GUI applications are specified.

This is a so called living style guide or pattern library, which means that the CSS that is styling the UI components here in the Atomia Pattern Library is the same CSS that is used to style the Atomia GUI applications when deployed.

Coding style

We use the SCSS syntax for Sass with the SUIT CSS naming conventions for writing our stylesheets.

We also try to write our stylesheets in idiomatic CSS (or in our case idiomatic SCSS).

Customization

You can of course customize the styles from Atomia Pattern Library to fit your brand.

Start by downloading the Atomia Theme Starter Kit.

Using the starter kit requires you to have a recent version of Node.js installed.

Quickstart

Follow the steps below to get going with your own branded theme:

  1. Unzip your downloaded atomia-themestarter.zip.
  2. On the command line cd into atomia-themestarter/themestarter.
  3. Run npm install to install all development dependencies that are required to compile your new theme.
  4. Run npm install -g gulp to be able to use the gulp command unqualified. Otherwise you will need to use ./node_modules/.bin/gulp instead.
  5. Run gulp theme to compile the example theme.
  6. The compiled theme will now be available in publish/Content.
  7. Copy the Content directory to the theme directory of an Atomia installation of BillingCustomerPanel or HostingControlPanel (e.g. C:\Program Files (x86)\Atomia\BillingCustomerPanel\Themes\MyTheme.)
  8. Assuming you have your theme activated in your application, you should now be able to see the example custom theme styles.
  9. The next step is to open theme/css/theme.css in your starter kit directory and set the basic branding variables that are defined there.
  10. Recompile the theme in the same way as in step 4 and you should now have your very own basic Atomia theme.