Components

Core Framework is equipped with a component editor that allows for seamless management of reusable elements/components, providing a powerful live editor for real-time visualization.

Video Overview

The components editor is where you can create reusable elements, such as buttons, link styles, cards, icons, avatars, and more. You can access each component and make edits or add modifier classes and pseudo-classes.

Here is an example of the components overview, where you can see all the components you've created in one place:

Components Editor Overview

1. Editing Components

To edit a component, simply click on the "Edit" button. If there are no components to edit, you can click on the plus icon to create a new one!

Creating a Component is this Easy!

When adding a new component, you can select the type from the list. Once you have added a component, it will be visible in your components section, and an edit button will become available for it. Clicking on the edit button will open up a new window where you can add modifiers and states/pseudos to the component.

1.1 Naming your Component Class

To customize the name of your new component, click on the base class field on the left under "default styles". You can then give it any name you like. As you type, all other instances of the name will change in real time.

Editing the class name

1.2 Adding Modifiers

To add a modifier to your component class, simply click on the "Add a modifier" button at the top. It will automatically be added under the "Modifiers" section:

Adding a modifier

Simply click in the field to add your modifier name to the base class.

In this box, you can add a conjoining class without any spaces, such as .btn-primary.is-large. You can also add selectors like .btn-primary svg. Furthermore, you can add your own pseudo-classes, such as .btn-primary:focus, for unlimited flexibility!

1.3 Adding States

To add states or pseudo-classes, simply hover over your base class or modifier classes to see the "+State" option appear. Clicking on this option will display a list of states that you can add to your modifier classes. These states will then appear under the class.

Adding States

If your components are difficult to see on our default background, then please use this button to toggle different background colors:

Clicking on this button will toggle different backgrounds

1.4 Deleting Modifiers and States

To delete modifiers and states, simply click on the mini menu (3 dots) and choose "Remove" from the menu:

Removing Modifiers and/or States