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.
We also try to write our stylesheets in idiomatic CSS (or in our case idiomatic SCSS).
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.
Follow the steps below to get going with your own branded theme:
- Unzip your downloaded atomia-themestarter.zip.
- On the command line
npm installto install all development dependencies that are required to compile your new theme.
npm install -g gulpto be able to use the
gulpcommand unqualified. Otherwise you will need to use
gulp themeto compile the example theme.
- The compiled theme will now be available in
- Copy the
Contentdirectory to the theme directory of an Atomia installation of BillingCustomerPanel or HostingControlPanel (e.g.
C:\Program Files (x86)\Atomia\BillingCustomerPanel\Themes\MyTheme.)
- Assuming you have your theme activated in your application, you should now be able to see the example custom theme styles.
- The next step is to open
theme/css/theme.cssin your starter kit directory and set the basic branding variables that are defined there.
- Recompile the theme in the same way as in step 4 and you should now have your very own basic Atomia theme.