The smart way to build websites with Blocs

Follow these steps to install Premium Smart:

1. Launch Blocs – Open the Blocs app on your Mac, iPad, or iPhone, but do not load any project yet.
   

2. Open the Extension Manager – Go to the top menu bar, select Window, and click on Extension Manager.
   

3. Add a New Extension – Click the “+” symbol in the top right corner.

4. Select the Files – Navigate to the location where the Premium Smart files are stored and select all of them.
   

5. Start Installation – Click Open and wait for the installation process to complete.
   

6. Restart Blocs – To finalize the installation, restart the Blocs app.
   

After installation, you will find a new site template in your template library named Premium Smart Site Template. This template contains all the essential settings and code components for Premium Smart. It is recommended to start all new projects with this template.

1. Open the Class Manager – Control global typography settings through the Class Manager.
   

2. Edit Basic Fonts – Modify the typography for headings, paragraphs, and buttons (h1, h2, h3, h4, h5, h6, p, label, .btn, a).
   

3. Define Bold Text – Adjust the .bold class to use a stronger weight for bold text.
   

4. Modify Button Fonts – Customize the .btn class if buttons should have a different font style or weight.
   

Premium Smart utilizes four predefined color palettes for quick switching between light and dark themes:
Adjusting Colors:

1. Open the Global Swatch Manager – Access the color settings.
   

2. Modify Colors – Adjust the primary and secondary colors as needed.
   

• Primary – Main heading color
  

• Primary Variant – Main text color
  

• Secondary – Main background color
  

• Secondary Variant – Main color for frames and icons
  

Adjusting Colors:

Open the Global Swatch Manager – Access the color settings.

Modify Colors – Adjust the primary and secondary colors as needed.

1. Open the Global Swatch Manager – Access the color settings.
   

2. Modify Colors – Adjust the primary and secondary colors as needed.
   

1. Open the Class Manager – Control corner rounding globally using specific classes.
   

2. Round Button Corners – Modify the .btn class to apply the desired corner radius to all buttons.
   

3. Set Global Rounding – The .smart-radius class manages the corner rounding of images, cards and form fields.

4. Apply Important Settings – Enable the !important option in the rules tab of the .smart-radius class to enforce changes.

5. Exclude Specific Elements – If certain elements should not have rounded corners, simply remove the .smart-radius class from them.

6. Ensure Consistency – When adding new elements, apply the .smart-radius class to maintain a uniform design.

1. Style the Button – .btn
   

2. Round Button Corners – Modify the .btn class to apply the desired corner radius to all buttons.
   

3. Set Global Rounding – The .smart-radius class manages the corner rounding of images, cards and form fields.

4. Apply Important Settings – Enable the !important option in the rules tab of the .smart-radius class to enforce changes.

5. Exclude Specific Elements – If certain elements should not have rounded corners, simply remove the .smart-radius class from them.

6. Ensure Consistency – When adding new elements, apply the .smart-radius class to maintain a uniform design.

If you need to remove Premium Smart from your computer, follow these steps:

1. Open the Extension Manager – Go to Window and select "Extension Manager."
   

2. Select the 'Blocs' Category – Use the dropdown menu to filter by "Blocs."
   

3. Choose the Extensions to Uninstall – Select all Premium Smart custom blocs you want to remove.
   

4. Remove the Extensions – Click on the '-' icon in the top right corner and confirm by clicking Yes, remove Extensions.
   

5. Select the 'Sites' Category – Change the dropdown menu to "Sites."
   

6. Uninstall the Site Template – Select the Premium Smart Site Template and remove it using the '-' icon.
   

7. Restart Blocs – Close and reopen the Blocs app.

8. Clear Library References

• Open a new project in Blocs.
  

• Open the Bloc Bar and select the Library using the Library Selector.
  

• Click on the Bloc Bar settings icon in the top right corner.
  

• Select "Organize," click on the trash can icon, and confirm the deletion by clicking "Delete Library."