Atlas Core

Content Type: Module
Categories: User Interface

Overview

The Atlas Core module contains the base layouts, styling and design properties for the many widgets which can be used to create beautiful experiences.

Documentation

Demo urlhttps://mendix.com/atlas

Please see Atlas Core in the Mendix documentation for details.

 

Atlas 3 to Atlas 4

Highlight

 

  • Atlas 4 will fully utilize CSS variables instead of SASS variables. All the available CSS variables can be seen at Atlas-core/Styling/web/themes/_theme-default.scss.
  • Currently, atlas 4 is released under compatibility mode. To fully ignore SASS variables mapping in styling, user can add $use-css-variables: true; inside their Styling/web/custom-variables.scss.
  • For backward compatibility, we maintain _variables-css-mappings.scss file which contains conversion from SASS to CSS variables. This file is now renamed into _css-variables-mappings.scss with a few minor changes.

Debugging and overriding CSS variables

 

CSS variables can easily be viewed and overridden on the browser. Simply run the application, open developer console (F12 or (ctrl|cmd) + shift + I).

In the elements tab, on the right side, find the Styles tab. Scroll down, and user can see the compiled version of CSS variables from color-variants.scss and theme-default.scss right click and press "copy rule". paste this rules inside your own Styling folder to change the value and overrides.

 

Color mix

 

darker, dark, light, lighter suffix variables (gray, brand-primary, brand-success, brand-warning, brand-danger, brand-default) will no longer use sass function mix in favor of CSS function color-mix. and there will be a new color-variants.scss file to support this mapping which will produce CSS variables such as:

--gray-50: color-mix(in srgb, var(--gray), var(--color-base) 90%); --gray-100: color-mix(in srgb, var(--gray), var(--color-base) 80%); --gray-200: color-mix(in srgb, var(--gray), var(--color-base) 60%); --gray-300: color-mix(in srgb, var(--gray), var(--color-base) 40%); --gray-400: color-mix(in srgb, var(--gray), var(--color-base) 20%); --gray-500: color-mix(in srgb, var(--gray), var(--color-contrast) 0%); --gray-600: color-mix(in srgb, var(--gray), var(--color-contrast) 20%); --gray-700: color-mix(in srgb, var(--gray), var(--color-contrast) 40%); --gray-800: color-mix(in srgb, var(--gray), var(--color-contrast) 50%); --gray-900: color-mix(in srgb, var(--gray), var(--color-contrast) 60%);

These variables will then mapped to the previously darker, dark, light, and lighter color variants:

--gray-lighter: var(--gray-50); --gray-light: var(--gray-300); --gray-primary: var(--gray-200); --gray-dark: var(--gray-700); --gray-darker: var(--gray-800);

The full list of CSS variables can be seen inside developer console upon running the application.

If you previously rely on the SASS functions to build your color variants, please update.

Releases

Version: 4.0.1
Framework Version: 11.0.0
Release Notes: ### Fixed - We fixed an issue where first element on the page failed to set to full height on react client. - We fixed an issue where form vertical label not rendered correctly on rtl direction.
Version: 4.0.0
Framework Version: 11.0.0
Release Notes: ### Breaking change - Atlas major changes. Atlas 4 will fully utilize css variables instead of SASS variables.
Version: 3.18.0
Framework Version: 10.21.0
Release Notes: ### Fixed - We fixed an issue where first element on the page failed to set to full height on react client. - We fixed an issue where form vertical label not rendered correctly on rtl direction.
Version: 3.17.0
Framework Version: 10.21.0
Release Notes: ### Changed - We updated studio pro minimum version to 10.21 to support Mendix 11.
Version: 3.16.5
Framework Version: 10.12.6
Release Notes: ### Fixed - We fixed an issue where first element on the page failed to set to full height on react client. - We fixed an issue where form vertical label not rendered correctly on rtl direction.
Version: 3.16.4
Framework Version: 10.12.6
Release Notes: ### Fixed - We fixed an issue where inner data view incorrectly rendered on modern client.
Version: 3.16.3
Framework Version: 10.12.6
Release Notes: ### Fixed - We fixed an issue where data view incorrectly render on modern client. ### Changed - We changed the import order of custom variable to make it work with CSS variables. Thanks @askii2 for contribution.
Version: 3.16.2
Framework Version: 10.12.6
Release Notes: ### Fixed - We fixed an issue where Atlas_Topbar layout showing incorrect padding in topbar menu.
Version: 3.16.1
Framework Version: 10.12.6
Release Notes: ### Fixed - We fixed an issue where focus would show up when opening delete confirmation dialog. ### Changed - We update atlas-core minimum version to SP 10.12.6.
Version: 3.15.0
Framework Version: 10.6.0
Release Notes: ### Fixed - We fixed an issue with **hide on tablet** and **hide on phone** design properties not working correctly on some devices. ### Added - We added language translation for design properties. - We added the styling of popup menu widget to atlas.