Which CSS Classes Can We Use in Atlas UI?

Based on some intermediate learning paths, I have found that we can use various CSS classes that work in Atlas UI framework. It seems to be a mixture of special Atlas UI classes and some of the Bootstrap classes. Some classes can be set up by clicking in Studio Pro, some not. Some examples from this mixture of CSS classes: col-xs-12, btn-block, img-circle, card, spacing-outer-left-large. I would like to have a list of all classes that I can use (otherwise, how do I know, what I can choose from?). I found this: https://github.com/mendix/Atlas-UI-Framework/blob/release/settings.json https://docs.mendix.com/howto/front-end/styles/ But I am still not sure, this does not look like a complete list of all classes that can be used. For example, can we use all Bootstrap classes (as we see them in official Bootstrap documentation) or only some of them? Also the Mendix docs list does not look complete. Are we able to get a complete list of the available classes, even if looking somewhere in the source code of Mendix or somewhere else?
2 answers

Hi Lukáš,

Personally I always look at the source code itself to find the classes that I need, because it gives me a better view into exactly what the class does. The Atlas UI framework sourcefiles can be found in /themesource/atlas_core/web/.

The Bootstrap styling is located within that folder in /_legacy/bootstrap. The Bootstrap version used is commented at the top of the _bootstrap.scss file, so you can refer to the Bootstrap documentation for that specific version to find the available classes for Bootstrap.

Hope that helps!


Hi Lukáš Tomek,

To find the CSS classes of components in the Atlas Design System:

  1. Go to Atlas Design System.
  2. Right-click on the desired component and choose "Inspect" in your browser.
  3. Look for class names in the HTML elements' "class" attribute to identify the CSS classes applied to the component.

Hope it will be helpful!