Global Classes Creator

Bricksforge allows you to create your own Global Classes Sets, converting CSS Code into Global Classes. This is a great way to use your favorite CSS Frameworks in your Bricksforge projects or to create your own framework.

How to use

Bricksforge comes with a CSS Framework out of the box, but you are not forced to use it. You can create your own Global Classes Sets and use them in your projects. There is no limit to the number of Global Classes Sets you can create. You can navigate to the Global Classes Creator by clicking on the “Global Classes” menu item in the left navigation.

Included Framework

For the included framework, we are using Chota. Chota is a lightweight CSS framework that is easy to use and customize. It is a great starting point for your own framework or for using in smaller projects.

You can read more about Chota in the Chota Documentation.

Create a custom set

To create a custom set, click on the “New Global Classes Set” button. You will be prompted to enter a name for your set. This name will be used to identify your set in the Global Classes Creator.

Also, if needed, you can enter a prefix for your classes. This prefix will be added to all classes in your set. This is useful if you want to avoid class name collisions with other frameworks.

Example: If you enter doc as a prefix, the class bg-primary will be added as doc-bg-primary. This ensures that your classes will not collide with other classes from other plugins or frameworks.

Once you have entered a name and a prefix, click on the “Create Set” button. This will create a new Global Classes Set.

Create Classes

Once you have created a new Global Classes Set, you can start adding classes to it. To add a new class, you just need to write the CSS code in the code editor.

Example:

.bg-default {
    background-color: #f8f9fa;
}
.bg-primary {
    background-color: #007bff;
}

After you have written the CSS code, click on the “Save & Generate Global Classes” button. This will save the CSS code and convert it into Global Classes.

These classes can now be used in the Bricks Builder.

Delete Classes

To delete a class, you just need to delete the CSS code for that class and click on the “Save & Generate Global Classes” button. This will delete the class from the Global Classes Set.

CSS Variables

You can also use CSS Variables in your CSS code. This is useful if you want to create a theme for your framework.

Bricksforge will only parse the CSS Classes and will ignore other CSS code. This means that you can use CSS Variables, but they will not be converted into Global Classes.

Example:

:root {
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
}

.bg-default {
    background-color: var(--light);
}

.bg-primary {
    background-color: var(--primary);
}

This will still create the classes bg-default and bg-primary, but it will not create any classes for the CSS Variables.

This way you can create a theme for your framework using CSS Variables, which you can customize for every project. This makes it so flexible!

Visual Helpers

The Global Classes Creator also comes with some visual helpers. These helpers will help you to modify your CSS Variables using UI controls instead of writing code.

Bricksforge automatically will detect CSS Variables and the type of the variable.

Currently, the following types are supported:

• Colors
• Typography
• Others

If a variable cannot be detected, it will be added to the “Others” section.

Colors

If a CSS Variable is detected as a color, you can use the color picker to change the color. The value of the CSS Variable will be updated automatically in your CSS code.

Typography

If a CSS Variable is detected as a typography, you can use the typography controls to change the typography. The value of the CSS Variable will be updated automatically in your CSS code. You can update the value using the slider or by entering a value in the input field. Also, you can use a CSS Clamp Generator to generate a CSS Clamp value.

CSS Clamp is a great CSS feature that allows you to create responsive typography. You can read more about CSS Clamp here.

Others

If a CSS Variable is detected as “Others”, you can use a slider or the input field to change the value of the variable. The value of the CSS Variable will be updated automatically in your CSS code.

Activate your classes

Once you have created your Global Classes Set, you can activate it in your project. To do this, enable the “Activate Global Classes” switch in the right sidebar.

Since version 0.9.8, you can activate or deactivate single Global Classes Sets. Make sure to activate the Global Classes Set you want to use.