Overview

The Rocket UI Design System app has a complete collection of components, layouts and templates all powered by Rocket UI, which expands on Atlas UI and uses Bootstrap 5. The project contains a list of all available components (widgets and building blocks), layouts and templates.

Watch the video to learn how Rocket UI can enhance your app development experience.

Documentation

Description

The Rocket UI Design System app has a complete collection of components, layouts and templates all powered by Rocket UI, which expands on Atlas UI and uses Bootstrap 5.

The project contains a list of all available components (widgets and building blocks), layouts and templates in their respective Pages, a collection of documentation pages in the Foundations sub-menu to help you understand and work better with Rocket UI and Bootstrap 5, as well as a simple Theme Editor so you can test simple changes to your theme in real-time. In the Components page, while logged in with an administrator role you can add new components you create to the database or edit the existing component entries.

Project Explanation

When opening the app for the first time you’ll see a collection of modules already added to the project. To better understand how the project is structured we’ll give a brief explanation of each of them.

•     The main App Module contains the base setup of the app, which includes security (which contains the default administrator account details) and user settings, specific styling for the Style Guide and the necessary marketplace modules to ensure everything runs smoothly.
•     The RocketUI_DesignSystem Module contains the Design System Pages, Flows, Layouts and other content specific to the Design System and is where you’ll do most changes when changing or expanding the application.
•     The RocketUI_DesignSystem_Resources Module has the necessary building blocks and page templates for the Design System app, which help with faster page creation and are used throughout the app; you probably won’t need to change anything here regularly.
•     The RocketUI_DS_Data has the database domain setup to handle the component List and adding/editing components or their contents. Unless you need to make a change to the component creating/editing pages or the data model itself you won’t need to change anything here.
•     The RocketUI_DS_Darkmode module has the necessary components and logic to use dark mode on the app and to control how it applies to your page content.

Foundations

The Foundation section displays a comprehensive guide on the classes that are available to the developer while using Rocket UI. These are a combination of the Mendix/Atlas UI classes and Bootstrap 5 classes with customizations to maintain consistency. Most of these options are available through the design properties of the project but some options and variations are exclusively available through adding the class in the styling tab of the widget. These classes can be copied to the clipboard by simply clicking on them.

The guide divides itself between:

•     Typography - It shows the classes related to the text elements. This includes links as well customization options to these.
•     Colors - It shows the classes related with the general colors available in the application
•     Grid - It shows a responsive grid based on a 12-column grid layout and some variations
•     Spacing - It shows the revamped spacing classes and variations following Bootstrap logic. The design properties options that correlate with the specific spacing are also specified.
•     Borders - It shows the border classes brought from Bootstrap with some variations to the color, and radius.
•     Utility Classes - It shows other useful classes that are not completely related to the previous sections. These were added with Bootstrap.

Managing Components

To edit an existing component in the Component List, you should do the following:

•     If the change is relative to the information displayed on the component Overview Page.
•     Run the app and log in with an administrator role account
•     Navigate to the component list, select the check box next to the component you wish to change and click edit on top of the List
•     On the component Edit page, you change any basic information that you need to, as well as the various sections that will be displayed in the component Overview, keep in mind that the Overview section should have order 1, as it will be displayed before the component preview, while the others will be displayed after.
•     If you need to change the Component Overview page itself, go to the RocketUI_DesignSystem module inside Studio Pro, navigate to Web > Responsive > Component List > Components and Edit the desired Component’s Page and/or Snippet

To add a new component to the component List you should do the following:

•     Run your app and log in with an administrator role account
•     Go to the component List and click “New”
•     Fill out the Component Details form
•     After creating your new component in the component List, go to the RocketUI_DesignSystem module inside Studio Pro, navigate to Web > Responsive > Component List > Components and create a folder for your new component.
•     Create a new component page by duplicating any of the existing component pages and change its page Title in the page properties.
•     Create a Snippet to contain all your component preview Content, so it is easier to reuse if needed and place it on the new page, where the Snippet from the duplicated page was.
•     Then, open the respective DS_ShowWidgetOverview_”libraryName” Microflow and add a decision node to check for your new component using its Name and a Show Page redirecting to your Component Overview Page.
•     After this save everything and re-run your project
•     To verify that your new component and its overview page are working as intended and appear in the Component List
•     Click the “Export DB as JSON” button to get a JSON file with the updated DB, to use as a backup to make sure you don’t lose anything when changing from development to test or production.
•     Open the “MS_ImportDefaultWidgets” microflow which you can find inside “RocketUI_DS_Data” > “After-Startup” > “Microflows” > “Components” and paste the contents of the JSON File in the “Create String Variable” Action.

Using Multiple Themes

To Switch the theme that is being used in the application, you should add a data-bs-theme HTML attribute to the desired page element, normally we use the body or the root element, and change it’s value to the desired theme (by default we have a “Base  theme”, which you select when leave the field blank or give it a value of “light” and a “Dark Theme” which will be used if the attribute has a value of “dark”).

Additionally in the Design System you have a Dark Theme Switch already implemented in the Theme Editor Sidebar, which you can use to test both the Light and Dark Themes

Dependencies

Rocket UI