How to register own CSS framework or enable Core Framework addon with Greenshift

From v.7 of Greenshift, we have a class and component system. Here is tutorial

You can also register your own preset classes and framework classes. The difference between class presets and framework classes is that Presets include ready styles that are attached to a class, while framework classes don’t have styles and are loaded from your theme or plugin independently

Currently, Greenshift has already some registered groups of preset classes. They are: style, interactions, spacing, shadow, border classes, background classes and data attributes. You can inject your own classes into these groups or create your own group. Each class must have a specific structure of the array. Example of Preset class

[
   'value'=> 'gs_border_elegant',
   'label'=> "Border Elegant",
   'css'=> ".gs_border_elegant{border:1px solid #00000012}",
   'type' => "preset"
]

Example for Framework class

[
   'value'=> 'mb10',
   'label'=> "Margin Bottom 10px",
   'type' => "framework"
]

Filters to inject in existing Preset groups are next

1. greenshift_style_preset_classes
2. greenshift_interaction_preset_classes
3. greenshift_spacing_preset_classes
4. greenshift_shadow_preset_classes
5. greenshift_border_preset_classes
6. greenshift_background_preset_classes
7. greenshift_data_preset_classes

Example of code, if you want to add additional classes to style presets

add_filter('greenshift_style_preset_classes', 'mycustom_greenshift_style_classes');
function mycustom_greenshift_style_classes($options){
   $options[] = 
   [
      'value'=> 'mb10',
      'label'=> "Margin Bottom 10px",
      'type' => "preset",
      'css' => ".mb10{margin-bottom:10px}"
   ];
   return $options;
}

You can also register your own group and classes. You need to use the next filter

greenshift_preset_classes

Example of code

add_filter('greenshift_preset_classes', 'mycustom_greenshift_preset_classes_group');
function mycustom_greenshift_preset_classes_group($options){
return array(
	array(
	   'label' => esc_html__('My New group Presets', 'textdomain'),
	      'options' => array(
                array(
                    'value'=> 'mb10',
                    'label'=> "Margin Bottom 10px",
                    'type' => "preset",
                    'css' => ".mb10{margin-bottom:10px}"
                ),
                 array(
                    'value'=> 'mb20',
                    'label'=> "Margin Bottom 20px",
                    'type' => "preset",
                    'css' => ".mb20{margin-bottom:20px}"
                )
            )
        )
	);
}

You can also register Framework group. You need to use next filter and example

add_filter('greenshift_framework_classes', 'mycustom_greenshift_framework_classes_group');
function mycustom_greenshift_framework_classes_group($options){
return array(
	array(
	   'label' => esc_html__('My New group framework', 'textdomain'),
	      'options' => array(
                array(
                    'value'=> 'mb10',
                    'label'=> "Margin Bottom 10px",
                    'type' => "framework",
                ),
                 array(
                    'value'=> 'mb20',
                    'label'=> "Margin Bottom 20px",
                    'type' => "framework",
                )
            )
        )
	);
}

As you see, framework classes don’t have attached styles, so you need to manage style loading for framework classes by yourself.

Using Core Framework with Greenshift

You can also inject utility classes of the Core framework Gutenberg plugin in selector of classes in Greenshift

For this, enable option in Greenshift settings – Interface. Also, don’t forget to enable Gutenberg addon in Core Framework settings

Also, we strongly recommend checking if your font size is equal to 100% in the option of the Core framework plugin.

Also, the Core framework will modify some of the system elements, so, I recommend checking them before saving CSS framework data. Two things that you need to check: Typography options (Headings) and Components (Avatar element). These two options can affect your avatars and headings on site. You can continue to modify them in the Core framework or remove these items from Framework. For this, near item which you want to remove, find 3 dots icon, click on it, and select delete

Please, note, that Greenshift options have priority over Core framework system items. For example, if you add options for headings in Core framework and also local attributes to Advanced heading block, then local attributes will have priority. The same for Global classes of Greenshift which you add in block, they have priority over global classes of Core framework