kinetic platform test

Overview

The Assets folder contains fonts, images, and styles for customizing the front-end code's visual appearance.

Fonts

Location src/Global/Assets/Fonts

The Fonts folder houses any fonts that must be fully downloaded rather than imported via scripts. The default font is Plus Jakarta Sans, with all versions of the font fully downloaded and stored in the Fonts folder for use in air-gapped (non-Internet-enabled) systems. You can add additional fonts as needed.

When air-gapping is unnecessary and importing fonts via scripts is preferred, you can delete this folder to improve build performance.

Images

Location: src/Global/Assets/Images

The Images folder stores any images required in the build process and images that you would rather not depend on an import for. By default, this folder contains Kinetic Data-based images when the Starter Base is cloned.

If you do not have images included directly in the application, you can delete this folder to improve build performance.

Styles

Location: src/Global/Assets/Styles

The Styles folder is the one-stop shop for all styling files for the application. When the Starter is cloned, the Styles folder is created with CoreForm and DesignTokens subfolders and individual styling files. The master.scss file imports all the files contained in the Styles fold[pper and is then itself imported into app.jsx so the styles can be applied to the application. This is also where styling variables are assigned; these can be easily changed to alter the front-end application’s look and feel.

The CoreForm subfolder holds specific styling that's applied to the CoreForm. This styling is rendered server-side and delivered to the application.

📖

Any changes made to the styling of files in this folder will apply to ALL CoreForms rendered in the application. If you want unique styling on specific forms, you'll want to use class names as defined in the Kinetic Platform Form Builder.

The DesignToken folder contains any imported design tokens generated from applications such as Figma or Zeplin. You can alter the existing files directly or create new tokens and import them into src/Global/Assets/Styles.