How to use the Site Builder

The Site Builder is the basis of all features and work with GridUp. For this reason, it should always be executed right at the beginning. The Suite Builder guides you through the setup process of your project and lets you make the most important decisions.

1. Open the Site Builder

The Site Builder is located in the "Basics" tab. Clicking on the Site Builder will open a new window with the Project Style Settings.

2. Select your button sets

Click on "Edit" in the "Add button" field, which will open the Button Editor. Now select your button sets by first selecting which button you want to assign in the panel on the left and then assigning a button set with "Add" in the selection on the right.

3. Select the navbar

Click on "Edit" in the field "Add Navbar", whereupon the Navbar Editor opens. Now select your navbar by clicking on the left side of the panel and then add a navbar with "Add" on the right side of the panel.

4. Select the footer

Click on "Edit" in the field "Add Footer", whereupon the Footer Editor opens. Now select your footer by clicking on the left side of the panel and then add a footer with "Add" on the right side of the panel.

5. Select the setup process

So that GridUp knows how to insert the classes, you have the choice between 3 setup variants:

• Delete existing: Deletes all existing classes and generates all classes.
• Overwrite existing: If classes with the same names already exist, they will simply be overwritten with the new styles.
• Skip equal: If classes with the same names already exist, they will be skipped and not changed.

6. Start process

Start the Site Builder process by clicking the "Start Process" button. The page will be reloaded (do not interrupt this process). Now you will see a new page in your project called GridUp Style Guide. This style guide, which is based on Finsweet Client First 2.0, has been generated by GridUp for you. Here you can customize your classes.

7. Watch the magic

If you now add a page with the function "Add pages with structure", the page will be created and automatically the navbar you selected, a page structure and the footer you selected will be added. If you continue to add components and pages, all buttons will be automatically replaced with your selected buttons and if the style sync is enabled, the styles of the classes will also be applied.

‍