How-To Tutorials

Check out the detailed tutorials below to learn how to install, update, and use the Minimalist Library to create amazing websites in no time.

1. Minimalist Library Overview

2. Installing the Library

Minimalist Library requires Blocs 5.1 for Mac or newer, or the latest version of Blocs for iPad/iPhone.

To install the Minimalist Library, please follow these instructions:

1. Launch the Blocs app, but do not open any projects.
2. Open the Extension Manager (Window > Extension Manager).
3. Click on the + button located in the top right corner.
4. Navigate to the directory containing the Library files and select them all.
5. Click 'Open' and wait for the installation process to complete.
6. Restart Blocs.

3. Uninstalling the Library

To remove the Minimalist Library from your computer, follow these instructions:

1. Open the Extension Manager (Window > Extension Manager).
2. Select the 'Blocs' category using the dropdown menu.
3. Select all of the Minimalist Library custom blocs you wish to uninstall.
4. Click on the '-' icon located in the top right corner.
5. Click 'Yes, remove Extensions' to confirm.

6. Then, select the 'Sites' category using the dropdown menu.
7. Select the Minimalist Library Site Template, and uninstall it using the same '-' icon.

8. Restart Blocs, open a new project, and proceed to open the Bloc Bar.
9. Select the Library using the Library Selector in the top left corner of the Bloc Bar.
10. Click on the Bloc Bar settings icon in the top right corner of the Bloc Bar, and click 'Organize’.
11. Click on the trash can icon, and confirm the deletion by clicking 'Delete Library' when asked.

4. Upgrading from Ver 1 to Ver 2

You can run both 1.X and 2.X versions of the library at the same time, but we recommend completely removing Version 1 from your computer before installing Version 2.

1. Follow Tutorial #3 to completely remove Version 1 from your computer.
2. Follow Tutorial #2 to freshly install Version 2 on your computer.

5. Updating the Library

Please note that the following does not apply to upgrading from Version 1 to Version 2. To learn how to upgrade the major version of the library, see Tutorial #3.

To update the Minimalist Library, please follow these instructions:

1. Launch the Blocs app, but do not open any projects.
2. Open the Extension Manager (Window > Extension Manager).
3. Click on the + button located in the top right corner.
4. Navigate to the directory containing the Library files and select them all.
5. Click 'Open' and wait for the installation process to complete.
6. Blocs will scan your library, add the missing (new) sections, and override the older files.
7. Restart Blocs.

6. Starter Site Template

When you install the Minimalist Library to your computer, you will notice the new Site Template added to your Site Template Library named the 'Minimalist Library Site Template - 2.X Ver.bex'. This Site Template contains all the essential core classes and code for the Minimalist Library to work perfectly. It is important to begin all your projects from this template.

When updating the Library, the new latest version of the Site Template will be installed automatically. However, the older version will still remain in your Site Template Library. We strongly advise you to use only the most recent version of the Site Template at all times.

7. Adjusting the Global Typography

To change the global typography settings for your project, open the Class Manager and edit the first class (h1, h2, h3, h4, h5, h6, p, label, .btn, a). We recommend selecting the font with the regular or light weight (Regular, 400, or 300).

Next, locate the .bold class in the Class Manager and choose the Bold, Extra-Bold, or Black version of your font (600, 700, 800), which will be applied to all bold text on your website. When styling your text later, always use the class .bold to make text bold.

To change the font for all buttons, find the class .btn and select the desired font weight. By default, buttons will use the global regular font you have set in the h1, h2, h3, h4, h5, h6, p, label, .btn, a class.

8. Adjusting the Global Colors

Version 2 of the Minimalist Library utilizes all four default color swatches available in Blocs to provide a seamless experience for changing the theme of the website from light to dark with just a few clicks.

These are the roles of each of these swatches:

Primary - The main background color
Primary Variant - The alternative background color
Secondary - The main text color
Secondary Variant - The alternative text color

You can change these four colors at any time (when starting the project or during the styling process) to switch between different color schemes.

To edit the colors, open the Global Swatch Manager and modify the colors. Make sure to always set the Variant swatches to slightly darker or lighter colors depending on their roles.

For example, if you want to switch the default (light) color scheme to dark, adjust the colors as follows:

Primary: #101010
Primary Variant: #282828
Secondary: #FFFFFF
Secondary Variant: #EAEAEA

9. Adjusting the Global Corner Radius

To edit the global corner radius settings, modify the radius in the following two classes: .btn (for all buttons) and .global-radius (for all images, cards, form fields, etc.). When editing the .global-radius class, ensure that you check the !important option in the Rules tab of the Class Editor.

If you do not want to have rounded corners on some elements, simply remove the .global-radius class from these elements. Additionally, when manually adding new elements, remember to apply the .global-radius class to ensure the global corner radius settings are applied.