Atlas 3 Change Summary
Last modified: September 19, 2024
Introduction
This document is a high-level summary of the changes Atlas 3 brings to Mendix.
High-Level Summary
Atlas 3 includes many changes to style and branding, and has a more modern look and feel. The differences between Atlas 2 and Atlas 3 are best expressed through comparison, using our reference apps. To learn more about how your app can look with Atlas 3, see the Atlas Design System website.
On both web and native, improvements have been made to layouts, widgets, building blocks, and page templates. These changes include but are not limited to layout and spacing, colors and aesthetics, and user experience.
New Theme
Our new theme has the following advantages:
- Updated color palette
- Values changed in variables
- Introduced exclusion variables for widget default styling
- Changed from Mendix Blue to Ultramarine
- MxDock added to template to create one unified platform experience
Grid System
Our new grid system has the following advantages:
- Moved to an 8 pixel grid system
- Provides a good basic unit to work with (the numbers 4 and 8 are easily multiplied)
- Offers more uniformity in design
Float Removal
Our removal of float has the following advantages:
- Removal of the use of “float: left” and “float: right” throughout Atlas core
- Migration of float to flex layout
- Removal of the reliance on floats for layout (flex is more a modern option than float)
Design Properties
Consult the table below for a summary of the changes to existing design properties.
| Spacing options - added spacing-inner, spacing-inner-medium, spacing-inner-large | Introduction of options for inner spacing to all components. Align design properties with that of native. Design in the two mediums of native and web should be the same experience. |
|---|---|
| Spacing outer options | Previous spacing options are renamed to outer to be more explicit and to refer to “margin”, while inner refers to “padding”. Aligning design implementation between native and web. |
| Streamlined style options | Across a number of widgets we have streamlined the options available for style to primary, secondary, success, warning and danger. The options of “brand-inverse” and “brand-info” are still actionable classes in the sass framework. |
Consult the table below for a summary of additional design properties.
| Tab Container | Addition of design properties for tab styling and positioning. |
|---|---|
| Datagrid 2 | Addition of design properties for styling and layout of the datagrid 2. |
| Badge | Addition of style design property for styling the new updated badge. |
| Badge Button | Addition of design properties for design of the badge button, same properties as that of the standard button: style, size, full-width and border. |
| Progress Circle | Addition of design properties for styling the new updated progress circle. Properties including bar color and bar thickness. |
| Progress Bar | Addition of design properties for the styling the new updated progress bar. Properties including bar color and bar thickness. |
| Additional background variants | Dark and light variations can be added to your background colors via design properties. |
| Responsive images with image-fit | Options can now be added for images to be resized to fit its container. Options include fill, contain, cover and scale-down. |
Web Environment Changes
Here is a list of key changes pertaining to the web environment:
- The color palette has been improved which influences all aspects of design and user-experience, from widgets to page templates
- Layout and spacing now relies on an 8 pixel system, creating more uniformity in design
- Display type flex has been used instead of float where possible
- Many design properties have been introduced, and existing ones have received added options:
- Inner spacing options allowing users to configure padding for widgets. This applies to all widgets
- Previous spacing options are now renamed to Outer to be more explicit and apply to margin for widgets
- Structure widgets get a new gradient option for background color
- Structure widgets get a shade design property with options to apply shades to background colors
- List View widgets get a style option to add horizontal borders at the top and bottom of each list item
- Static and dynamic images each get a new design property to assist with fitting images (for example fill, contain, cover, or scale-down)
- Tab container widgets get new design properties to style and space tabs
- Text widgets get a new color option to color text white
- Table widgets get new design properties for styling and layout
- Inner spacing options allowing users to configure padding for widgets. This applies to all widgets
- Helper classes have been added (in core/base/_spacing.scss) to assist with the following:
- Spacing
- Shadows
- Widget height
- Widget width
- Widget borders
- Some design properties have been removed:
- Info and Inverse brand styles for all widgets
- Some design properties have been deprecated:
- List View widgets’ styleless option
- Design properties such as Style, Color, and Background color that had a Brand Default option are now called Brand Secondary
UI Content
If you are using building blocks or page templates, please make sure you download the corresponding modules from the Mendix Marketplace.
For the web platform, download the Atlas Web Content module:
For the native platform, download the Atlas Native Mobile Content module:
Design Properties for Web
These are the design property changes for Atlas 3 web:
| Parent | Property | Removed | Added | Renamed |
|---|---|---|---|---|
| Widget | Spacing Top | {"name": "Inner none","class": "spacing-inner-top-none"},{"name": "Inner small","class": "spacing-inner-top"},{"name": "Inner medium","class": "spacing-inner-top-medium"},{"name": "Inner large","class": "spacing-inner-top-large"} | “None” => "Outer none”“Small” => “Outer small”“Medium” => “Outer medium”“Large” => “Outer large” | |
| Widget | Spacing bottom | Same as Spacing Top | Same as Spacing Top | |
| Widget | Spacing right | Same as Spacing Top | Same as Spacing Top | |
| Widget | Spacing left | Same as Spacing Top | Same as Spacing Top | |
| DivContainer | Background color | { "name": "Brand Default", "oldNames": [ "Default" ], "class": "background-default"},{ "name": "Brand Inverse", "oldNames": ["Inverse"], "class": "background-inverse"},{ "name": "Brand Info", "oldNames": ["Info"], "class": "background-info"}, | { "name": "Background Primary", "oldNames": ["Background Default"], "class": "background-main"},{ "name": "Brand Secondary", “oldNames”: [“Brand Default”, “Default”] "class": "background-secondary"},{ "name": "Brand Gradient", "class": "background-brand-gradient"} | |
| DivContainer | Shade (new) | {"name": "Light","class": "background-light"},{"name": "Dark","class": "background-dark"} | ||
| GroupBox | Style | {"name": "Brand Default","oldNames": ["Default"],"class": "groupbox-default"},{"name": "Brand Inverse","oldNames": ["Inverse"],"class": "groupbox-inverse"},{"name": "Brand Info","oldNames": ["Info"],"class": "groupbox-info"}, | {"name": "Brand Secondary","oldNames": ["Default", "Brand Default"],"class": "groupbox-secondary"}, | |
| StaticImageViewer | Fit (new) | {"name": "Fill","class": "img-fill"},{"name": "Contain","class": "img-contain"},{"name": "Cover","class": "img-cover"},{"name": "Scale-down","class": "img-scale-down"} | ||
| DynamicImageViewer | Fit (new) | Same as StaticImageViewer | ||
| Label | Style | {"name": "Brand Default","oldNames": ["Default"],"class": "label-default"},{"name": "Brand Inverse","oldNames": ["Inverse"],"class": "label-inverse"},{"name": "Brand Info","oldNames": ["Info"],"class": "label-info"}, | {"name": "Brand Secondary","oldNames": ["Default", "Brand Default"],"class": "label-secondary"}, | |
| TabContainer (new) | ||||
| DynamicText | FontWeight renamed to Weight | |||
| DynamicText | Size (new) | {"name": "Small","class": "text-small"},{"name": "Large","class": "text-large"} | ||
| DynamicText | Color | {"name": "Brand Default","oldNames": ["Default"],"class": "text-default"},{"name": "Brand Inverse","oldNames": ["Inverse"],"class": "text-inverse"},{"name": "Brand Info","oldNames": ["Info"],"class": "text-info"}, | {"name": "White","class": "text-white"},{ "name": "Brand Secondary", "oldNames": ["Default", "Brand Default"], "class": "text-secondary"}, | |
| Table (new ) | ||||
| com.mendix.widget.custom.badge.Badge (new) | ||||
| com.mendix.widget.custom.progressbar.ProgressBar (new) | ||||
| com.mendix.widget.custom.badgebutton.BadgeButton (new) | ||||
| com.mendix.widget.custom.progresscircle.ProgressCircle (new) |
Design Properties for Native Mobile
These are the design property changes for Atlas 3 native mobile:
| Parent | Property | Removed | Added |
|---|---|---|---|
| All | Background color | { "name": "Primary", "class": "backgroundPrimary" }, { "name": "Gray", "class": "backgroundGray" }, | { "name": "Background Primary", "oldNames": ["Background Default"], "class": "background-main" }, { "name": "Background Secondary", "oldNames": ["Background Dashboard"], "class": "background-secondary" }, |
| Widget | Spacing top | { "name": "Smaller", "class": "spacingOuterTopSmaller" }, { "name": "Larger", "class": "spacingOuterTopLarger" }, | |
| Widget | Spacing bottom | { "name": "Smaller", "class": "spacingOuterBottomSmaller" }, { "name": "Larger", "class": "spacingOuterBottomLarger" }, | |
| Widget | Spacing right | { "name": "Smaller", "class": "spacingOuterRightSmaller" }, { "name": "Larger", "class": "spacingOuterRightLarger" }, | |
| Widget | Spacing left | { "name": "Smaller", "class": "spacingOuterLeftSmaller" }, { "name": "Larger", "class": "spacingOuterLeftLarger" }, | |
| DivContainer | Background color | { "name": "Secondary", "class": "backgroundSecondary" }, | { "name": "Gray", "class": "backgroundGray" }, { "name": "Brand Info", "class": "backgroundBrandInfo" } |
| ScrollContainer | Background color | { "name": "Secondary", "class": "backgroundSecondary" }, | { "name": "Gray", "class": "backgroundGray" }, { "name": "Brand Info", "class": "backgroundBrandInfo" } |
| Image | No longer exists | No longer exists | No longer exists |
| StaticImageViewer | Shape | { "name": "Square", "class": "imageSquare" }, { "name": "Circle", "class": "imageCircle" } | |
| StaticImageViewer | Size | { "name": "Icon", "class": "imageIcon", "oldNames": ["imageCircleIcon", "imageSquareIcon"] }, { "name": "Small", "class": "imageSmall", "oldNames": ["imageCircleSmall", "imageSquareSmall"] }, { "name": "Medium", "class": "imageMedium", "oldNames": ["imageCircleMedium", "imageSquareMedium"] }, { "name": "Large", "class": "imageLarge", "oldNames": ["imageCircleLarge", "imageSquareLarge"] }, { "name": "Larger", "class": "imageLarger", "oldNames": ["imageCircleLarger", "imageSquareLarger"] }, { "name": "FullSize", "class": "imageFullSize" } | |
| DynamicImage | No longer exists | No longer exists | No longer exists |
| DynamicImageViewer | Same as StaticImageViewer | Same as StaticImageViewer | Same as StaticImageViewer |
| DynamicText | Color | { "name": "Contrast lowest", "class": "textContrastLowest" }, { "name": "Contrast lower", "class": "textContrastLower" }, { "name": "Contrast low", "class": "textContrastLow" }, { "name": "Contrast default", "class": "textContrastDefault" }, { "name": "Contrast high", "class": "textContrastHigh" }, { "name": "Contrast higher", "class": "textContrastHigher" }, { "name": "Contrast highest", "class": "textContrastHighest" } | { "name": "Paragraph", "class": "textParagraph" }, { "name": "Disabled", "class": "textDisabled" }, { "name": "Black", "class": "textBlack" }, |
| DynamicText | Size | { "name": "Smallest", "class": "textSmallest" }, { "name": "Largest", "class": "textLargest" } | |
| DynamicText | Weight | { "name": "Light", "class": "textLight" }, { "name": "Semibold", "class": "textSemiBold" }, | |
| Decoration (New) | { "name": "Underline", "class": "textUnderline" }, { "name": "Line Through", "class": "textLineThrough" } | ||
| LayoutGrid (New) | |||
| LayoutGridRow (New) | |||
| LayoutGridColumn (New) | |||
| ListView | Background color (new) | { "name": "Primary", "class": "backgroundPrimary" }, { "name": "Gray", "class": "backgroundGray" }, { "name": "Brand Primary", "class": "backgroundBrandPrimary" }, { "name": "Brand Success", "class": "backgroundBrandSuccess" }, { "name": "Brand Warning", "class": "backgroundBrandWarning" }, { "name": "Brand Danger", "class": "backgroundBrandDanger" }, { "name": "Brand Info", "class": "backgroundBrandInfo" } | |
| com.mendix.widget.native.animation.Animation | Background color | { "name": "Secondary", "class": "backgroundSecondary" }, | { "name": "Gray", "class": "backgroundGray" }, { "name": "Brand Info", "class": "backgroundBrandInfo" } |
| com.mendix.widget.native.floatingactionbutton.FloatingActionButton | Style | { "name": "Secondary", "class": "floatingActionButtonSecondary" }, | |
| com.mendix.widget.native.safeareaview.SafeAreaView | Background color | { "name": "Secondary", "class": "backgroundSecondary" }, | { "name": "Gray", "class": "backgroundGray" }, { "name": "Brand Info", "class": "backgroundBrandInfo" } |