CSS Generator
  • 06 Jun 2023
  • 2 Minutes to read
  • Dark
    Light

CSS Generator

  • Dark
    Light

Article summary

The CSS generator feature provides users with a seamless way to create personalized CSS documents by selecting desired properties. This functionality proves useful when customizing forms and pages within Decisions. The process begins with a color picker tool, enabling users to choose specific colors for the CSS document. Make the selections and define other properties, such as background color, font color, border color, and additional styling options; this project dynamically generates the corresponding CSS code.

The generated CSS code is then presented to the user, offering immediate visibility of the customized styles. Additionally, the code can be automatically saved to the server or downloaded as a separate file for importing into Decisions. By streamlining the generation of CSS documents based on individual color preferences, this feature significantly simplifies and expedites the styling process. Users can effortlessly achieve tailored designs, ultimately saving time and effort.

Considerations

  • The CSS created does not include all possible stylings and classes that could be applied in Decisions. Further classes and customization can be done after the CSS made with this project is downloaded.
  • When saved to the server, the CSS created will be named what was entered on the first Form of the process. This file can be renamed in the Systems > Designers > CSS Report using a right-click action.
  • Any created CSS sheets will need to be selected on any pages and forms you'd like to use them on after saving/downloading the CSS generated. 
  • Remember to add the used CSS to a project to export it with a project. 

What's Included

This build consists of two primary flows that play a role in the overall functionality:

Flow NameDescription
Generate CSS from User Selections
This Flow creates the CSS file from the selections in the CSS Generator process. This can be run as an API Service, sending in a payload of the choices otherwise collected from the Forms.
Run CSS Generator
The CSS Generator Flow simplifies the process of generating CSS styles by offering a range of features and customization options.

Run CSS Generator Flow

The "Run CSS Generator Flow" consists of Forms and Sub Flows, which help in creating a desired CSS document. This Flow is designed to generate CSS styles with ease. It includes a variety of features such as basic styles, Form fields, button styles, and watermarked tiles forms to select the respective properties for their CSS.

Additionally, it offers a Preview Form that displays a real-time preview of the generated CSS to assist users in making any necessary adjustments. The Flow automatically updates the CSS file that comes along with the project, ensuring that the most recent styles are included. Furthermore, it allows users to save or create the generated file on the server, providing an efficient way to manage and maintain their CSS files. Screenshots have been attached for every Form, which shows the detailed view.


Related Information

Articles:
Uploading CSS
Uploading Custom Fonts with CSS
CSS Properties on Form Controls


Was this article helpful?

What's Next