Importing design Systems

Greenshift has an option to import design systems from CSS code. This option is in Stylebook—Style.

You can also use this panel to add custom CSS on the site. The difference from adding custom styles from the Style editor is that Stylebook styles work globally: in the editor and in the front end.

Another helpful option is that you can automatically detect classes and variables. Variables will be placed in the Variable section (and will be removed from the code). Classes will be available in the Class selector.

Classes will be imported as Custom classes. If you want to overwrite them, add another CSS code. If you want to remove them – import empty CSS code.

Ensure that your code doesn’t have styles for system elements like buttons and inputs because this will affect system elements of the interface. If you want to add styles for form elements, add .editor-styles-wrapper before element to make it work for backend and .gspb-bodyfront to make it work on frontend. Example:

.editor-styles-wrapper button, .gspb-bodyfront button{….}

«
»