Global Editors

Use the Global Editors to design typography elements, color themes, spacing rules, buttons, and form elements in the browser, and export custom style (SCSS code) compatible with CodyFrame.

When you save your changes, the components are updated with the style you set in the editors.

Optionally, you can import/export your global editors as a .JSON file on the Globals page.

Explore the Global Editors

🔍 On this page:

1. Colors
2. Typography
3. Spacing
4. Buttons
5. Forms
6. Shared-Styles

Colors #

The Color Editor generates color palettes and themes compatible with CodyFrame. You can use it to set the colors of your design system taking advantage of a visual approach, then copy the generated SCSS and paste it into the 📁 custom-style/_colors.scss file of the framework.

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. Paste the generated code into the 📁 custom-style/_typography.scss file of CodyFrame.

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 spacing system. You can generate a spacing scale, set responsive rules, then copy the exported code into the 📁 custom-style/_spacing.scss file of CodyFrame.

Buttons #

Use the Buttons Editor to design and export a system of SCSS buttons. The generated code should be pasted into the 📁 custom-style/_buttons.scss file of CodyFrame.

Forms #

Use the Forms Editor to design and export form elements. The generated code should be pasted into the 📁 custom-style/_forms.scss CodyFrame's file.

Shared Styles #

Use the Shared-Styles Editor to create a visual library of reusable styles. The generated code should be pasted into the 📁 custom-style/_shared-styles.scss file of CodyFrame.