Global Editors
The Global Editors are web tools that allow you to design typography elements, color themes, spacing rules, buttons, and form elements directly in the browser, and export custom style (SCSS code) compatible with the CodyFrame.
✅ When you save your changes, the components are updated with the style you set in the Editors.
🔍 On this page:
Colors #
The Color Editor generates color palettes and themes compatible with the 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 #
The Spacing Editor allows you to create a spacing system in SCSS. You can use it to generate a spacing scale and set responsive rules, then copy the exported code into the 📁 custom-style/_spacing.scss file of CodyFrame.
Buttons #
The Buttons Editor allows you 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 #
The Forms Editor allows you to design and export form elements. The generated code should be pasted into the 📁 custom-style/_forms.scss CodyFrame file.