# Rules and Tips for a Proper Build

{% hint style="info" %}
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.
{% endhint %}

## Ground Rules

### On Keys and Tags:

* Always use **snake\_case** for keys and tags on the builder.
* Use **unique keys** for everything:
  * &#x20;For **static components**, add the page name at the start. For example:
    * &#x20;page\_name\_img&#x20;
    * 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&#x20;

### 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
