🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Introducing the Global Editors

A closer look at our new web design tools.

About two months ago we launched the CodyHouse Framework and Components. The framework is the engine that powers up the whole (new) Design System section. The components library is a growing arsenal of accessible HTML, CSS, JS assets. Framework and components work together. As soon as the number of components becomes significant, developers will have a great resource to kick off any web project.

🔥 Today we're thrilled to introduce another resource: the Global Editors.

The Global Editors are web design tools that allow you to set the style of typography elements, color themes, spacing rules, buttons, and forms directly in the browser. They generate SCSS code that is compatible with the CodyHouse framework.

Working with the Editors is as simple as 1) use the tools to edit the globals, 2) copy the SCSS, 3) paste it into the framework.

To strengthen even more the connection between globals and components, when you save your changes in one of the Global Editors, all the components are updated with the new style.

Learn more about what each editor can do:

1) Colors Editor #

The Color Editor is a web design tool that generates color palettes and themes.

Launch the Color Editor

🎥 Watch the Video Tutorial

Colors Editor
Colors Editor

2) Typography Editor #

The Typography Editor is a tool that helps you to set the typography of your web project.

Launch the Typography Editor

🎥 Watch the Video Tutorial

Typography Editor
Typography Editor

3) Spacing Editor #

The Spacing Editor is a web design tool that allows you to create a spacing system in SCSS.

Launch the Spacing Editor

🎥 Watch the Video Tutorial

Spacing Editor
Spacing Editor

4) Buttons Editor #

The Buttons Editor is a web design tool that allows you to design and export a system of SCSS buttons.

Launch the Buttons Editor

🎥 Watch the Video Tutorial

Buttons Editor
Buttons Editor

5) Forms Editor #

The Forms Editor is a web design tool that allows you to design and export form elements for your web project.

Launch the Forms Editor

🎥 Watch the Video Tutorial

Forms Editor
Forms Editor

What's next? #

The next step is going to be populating the components library. We plan to grow this section into a huge collection! In the meantime, we'll keep improving the tools we've built. Thanks to the feedback and bug reports you're sending to us via email. You're helping us understand where we should focus our efforts 🙏.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us