🤓Rules and Tips for a Proper Build

After building hundreds of Flows we came up with a list of ground rules to keep in mind. Some of them are for The Builder's best performance, and some are just good practice. If you follow them, you will enjoy a smoother path... We recommend reading this before starting your Flow and after building a couple of pages, once you have acquired more experience.

Ground Rules

On Keys and Tags:

• Always use snake_case for keys and tags on the builder.

• Use unique keys for everything:

  • For static components, add the page name at the start. For example:

    • page_name_img

    • page_name_title

  • Use clear and clean names for data components, they need to be specific enough to not get confused. For example:

    • email

    • first_name

    • last_name

• Plain text for titles and subtitles with:

  • page_name_title and page_name_subtitle keys

  • title and subtitle tags

On Global Components Keys:

• Global header container for logo or progress bar with keys:

  • global_header_container

  • global_logo

  • global_progress_bar

• Global footer container for prev and next buttons (normal buttons with actions) with keys:

  • global_footer_container

  • global_prev

  • global_next

On Styles:

• Apply styles always on the tag (if you want to apply styles on a single page, use "All Components with this tag and on this page").

• Try to make the flow responsive from scratch (using % instead of px is helpful), avoid having different styles for mobile when possible.

For Neat Flows:

• Put all the content of the page inside a container (layouts come like this by default).

• Add "no value" on conditions and use "not false" instead of true, to show the longest possible route on the progress bar.

Useful Tips

To Keep in Mind:

• When changing a style on a tag, it doesn't only affect the component on that page, but all other components with that tag. It might look funny on other pages.

• Components with position absolute can overlap in different screen sizes(use % for positioning). Also, try using position relative on the component's parent container.

• When editing keys, don’t include "-" or other special characters. They need to be snake_case, not kebab-case.

• Checkbox needs to be InputBox type checkbox not OptionSelector

Don't forget to:

• Set the --primary-color variable on the Entire Flow so that the progress circle color changes.

• Always remove padding when the button doesn't have background-color or border.

• Change the color of the gray borders on the buttons for hover/selected states (If the background-color changes)

Also, Remember to:

• Change the key of the cloned components when cloning a page

• Set the input type(e.g. email)

• Preload images one or two pages before.

• Use selected state designs.

Pro Tips

• Put the font on the entire flow, not just certain components.

• Make the title smaller on mobile

• Add validation on required input fields