Overview

The starter package provides accessible components, tools, and documentation for designers and developers as a foundation for their own design system.

Core Elements

The starter ranges from visual elements and brand, to the most common Mendix widgets which comprise our apps. Our team has also created popular utility classes as a best practice for consistent and efficient styling.

• Foundations - These contain the visual design styles for color, typography, and spacing. Reusing these styles will reduce ambiguity and result in consistent design.
• Components - Components are the starter points for the design. Based off of Mendix's core widget offering and extended with styles to match the theme. Easy to use and improved with accessibility elements.
• Layouts - The layout contains widgets and structures that return on every page based on that layout. Each page in Mendix is based on a layout.
• Utility Classes - Utility classes add common classes for text, colors, layout, and spacing which can form the basis of a reusable design.

Documentation

Overview

This Design System Starter includes both a customTheme_starter module and a customTheme_ds module. The Design System has a Get Started guide to set up your data to power the Design System utility classes, and "How Tos" to build upon components and frameworks.

Custom Theme Module

• The Custom Theme is the foundational styling for the Design System Starter. It is a separate module, which can be easily imported into any app to quickly apply your branded styles. In Custom Theme, you can update variables, extend Atlas UI partials, and write custom styling.
• Contains the custom variables, utility classes, and SCSS partials for widgets and building blocks.