Key Concepts
Reference
🤓
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
Last modified 6mo ago