Global Editors
Use the Global Editors to design the global style of your project in the browser, and export code compatible with CodyFrame and Tailwind CSS*.
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.
*Some globals are not available for Tailwind CSS.
Colors #
The Color Editor generates color palettes and themes.
If you're working with CodyFrame, paste the generated code into the custom-style/_colors.scss file. If you are working with Tailwind CSS, import the generated code in the base layer.
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, paste the generated code into the custom-style/_typography.scss file. In Tailwind CSS, import the generated code in the base layer.
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, 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, the generated code should be pasted into the custom-style/_buttons.scss file. In Tailwind CSS, import the generated code in the components layer.
Forms #
Use the Form Editor to design the style of your form elements.
In CodyFrame, the generated code should be pasted into the custom-style/_forms.scss file. In Tailwind CSS, import the generated code in the components layer.
Shared Styles #
Use the Shared-Styles Editor to create a visual library of reusable styles. In CodyFrame, the generated code should be pasted into the custom-style/_shared-styles.scss file.
