Global Editors
Use the Global Editors to design the global style of your project in the browser, and export code compatible with CodyFrame.
When you save your changes in the editor, the components style is updated accordingly.
Optionally, you can import/export your global editors as a .JSON file on the Globals page.
Colors #
The Color Editor generates color palettes and themes.
In CodyFrame v3, paste the generated code into the custom-style/_colors.scss file.
Typography #
The Typography Editor helps you set the typography of your web project. You can use it for font pairing, to generate the type scale and set responsive rules.
In CodyFrame v3, paste the generated code into the custom-style/_typography.scss file.
Set the basic typography rules:
How to create and edit the typography scale:
How to use the Line-height Crop tool:
Spacing #
Use the Spacing Editor to create a scalable and responsive spacing system. In CodyFrame v3, copy the exported code into the custom-style/_spacing.scss file.
Buttons #
Use the Buttons Editor to design and export a system of buttons.
In CodyFrame v3, the generated code should be pasted into the custom-style/_buttons.scss file.
Forms #
Use the Form Editor to design the style of your form elements.
In CodyFrame v3, the generated code should be pasted into the custom-style/_forms.scss file.
Shared Styles #
Use the Shared-Styles Editor to create a visual library of reusable styles. In CodyFrame v3, the generated code should be pasted into the custom-style/_shared-styles.scss file.
