Copy this module into your theme/plugin
Add path to cherry-x-interface-builder.php file to CX_Loader initialization.
Initialize module on wp hook or later, but earlier than admin_enquque_scripts, wp_enqueue_scripts with priority 10, Example:

add_action( 'admin_enqueue_scripts', 'twentyseventeen_ui', 0 );
function twentyseventeen_ui() {
	global $twentyseventeen_loader;

	$builder_data = $twentyseventeen_loader->get_included_module_data( 'cherry-x-interface-builder.php' );

	$interface_builder = new CX_Interface_Builder( array(
		'path' => $builder_data['path'],
		'url'  => $builder_data['url'],
	) );
}

Arguments:

CX_Interface_Builder accepts an array of options with next structure:

path - path to module folder
url - URL to module folder

This information moved to argumnets to get path and URL with apropriate functions for themes and plugins.

Adding Elements

After initialization you need to register required interface elements to show. This need to be done not later than on hook wp_enqueue_scripts / admin_enqueue_scripts with priority 10. In CX_Interface_Builder exists 6 different elemnts types:

1. Sections

Wrapper for large UI elemnts block, for example heading, form, footer

add_action( 'admin_enquque_scripts', 'twentyseventeen_ui', 0 );
function twentyseventeen_ui() {

	global $twentyseventeen_loader;

	$builder_data = $twentyseventeen_loader->get_included_module_data( 'cherry-x-interface-builder.php' );

	$interface_builder = new CX_Interface_Builder( array(
		'path' => $builder_data['path'],
		'url'  => $builder_data['url'],
	) );

  $interface_builder->register_section(
		'options_section' => array(
			'type'        => 'section',
			'scroll'      => true,
			'title'       => __( 'Options Section', 'twentyseventeen' ),
			'description' => __( 'Options formed with Cherry X Interface Builder.', 'twentyseventeen' ),
		),
	);

}

2. Forms

HTML <form> element. All controls should be wrapped into this element. Example (all next examples are included int twentyseventeen_ui function context from previous eaxmple ):

$interface_builder->register_form(
		'options_form' => array(
			'type'   => 'form',
			'parent' => 'options_section',
			'action' => admin_url( 'admin.php?action=process_my_form' ),
		),
);

Forms should be included into previously registered section. parent key in form arguments. The same for the other elements - them all must have a parent - section, form or settings.

3. Components

Interface components like a tabs, accordions etc.

$interface_builder->register_component(
		'accordion' => array(
			'type'        => 'component-accordion',
			'parent'      => 'options_form',
			'title'       => esc_html__( 'Component accordion', 'twentyseventeen' ),
			'description' => esc_html__( 'Component Description', 'twentyseventeen' ),
		),
);

Allowed components types are:

component-accordion
component-toggle
component-tab-vertical
component-tab-horizontal

4. Settings

Wrapper for controls. Could be used as accordion, tab or toggle content or form canvas.

$interface_builder->register_settings(
  array(
		'accordion_1' => array(
			'type'        => 'settings',
			'parent'      => 'accordion',
			'title'       => esc_html__( 'Accordion child #1', 'blank-plugin' ),
			'description' => esc_html__( 'First acordion child description.', 'blank-plugin' ),
		),
		'accordion_2' => array(
			'type'        => 'settings',
			'parent'      => 'accordion',
			'title'       => esc_html__( 'Accordion child #2', 'blank-plugin' ),
			'description' => esc_html__( 'Second acordion child description.', 'blank-plugin' ),
		),
  )
);

5. Controls

UI controls

$interface_builder->register_controls(
  array(
		'checkbox_4' => array(
			'type'        => 'checkbox',
			'parent'      => 'accordion_1',
			'title'       => esc_html__( 'Checkbox', 'blank-plugin' ),
			'description' => esc_html__( 'Description checkbox.', 'blank-plugin' ),
			'class'       => '',
			'value'       => array(
				'checkbox' => 'true',
			),
			'options' => array(
				'checkbox' => esc_html__( 'Check Me', 'blank-plugin' ),
			),
		),
		'checkbox_multi_4' => array(
			'type'        => 'checkbox',
			'parent'      => 'accordion_1',
			'title'       => esc_html__( 'Multi Checkbox', 'blank-plugin' ),
			'description' => esc_html__( 'Description multi checkbox.', 'blank-plugin' ),
			'class'       => '',
			'value'       => array(
				'checkbox-0' => 'true',
				'checkbox-1' => 'false',
				'checkbox-2' => 'false',
				'checkbox-3' => 'true',
				'checkbox-4' => 'true',
			),
			'options' => array(
				'checkbox-0' => esc_html__( 'Check Me #1', 'blank-plugin' ),
				'checkbox-1' => esc_html__( 'Check Me #2', 'blank-plugin' ),
				'checkbox-2' => esc_html__( 'Check Me #3', 'blank-plugin' ),
				'checkbox-3' => esc_html__( 'Check Me #4', 'blank-plugin' ),
				'checkbox-4' => esc_html__( 'Check Me #5', 'blank-plugin' ),
			),
		),
		'colorpicker_4' => array(
			'type'        => 'colorpicker',
			'parent'      => 'accordion_1',
			'title'       => esc_html__( 'Color Picker', 'blank-plugin' ),
			'description' => esc_html__( 'Description color picker.', 'blank-plugin' ),
			'class'       => '',
			'value'       => '#3da3ce',
			'label'       => '',
		),
  )
);

6. HTML

Raw HTML code

$cx_interface_builder->register_settings(
		array(
      'save_button' => array(
						'type'   => 'html',
						'parent' => 'settings_bottom',
						'class'  => 'cherry-control dialog-save',
						'html'   => '<button type="submit" class="button button-primary">' . esc_html__( 'Save', 'blank-plugin' ) . '</button>',
			),
    )
);