After a full immersion of 4 months, we're thrilled to introduce a new design, new features, and some important updates about the future of CodyHouse.
What's new:
New Design #
The main goal of the new design was to improve discoverability in our growing components library.
First, we've redesigned all the library preview images, made them bigger and more realistic.
Then we completely reimagined the search page, which now includes scoped search options and preview images.
Finally, we took this chance to refresh our branding.
We worked with the talented Evgeniy Artsebasov to redesign our logo:
We updated the typography system and created a series of illustrations for strategic pages and marketing material.
Every page went under the lens. The globals have been improved, the documentation pages are easier to read; even 'dark mode' looks way better than before.
Tailwind CSS Components #
All our components were previously based on a single CSS framework: CodyFrame. From a business point of view, it made sense to open our library to new market opportunities.
So we decided to create a variation of the components compatible with Tailwind CSS, the popular utility-first framework, as well as a 'no CSS framework' version (more about this in the next chapter).
To switch from one framework to another, use the selector on the component/global pages:
To push things further, we've made four global editors compatible with Tailwind. Now you can create a system of buttons in the browser, using our visual tools, and export the code compatible with Tailwind!
No CSS Framework Components #
For a long time, we've been experimenting with the idea of providing each component as a separate entity, with no need to include a CSS framework along with it.
Sometimes developers need that single component, and they want to integrate it right away into an existing CSS project. Working with a new CSS framework is not an option.
Well, now they can do that! 🎉
All the components are available in a 'No CSS Framework' version.
From a technical point, we detect the utility classes used in a CodyFrame component, add a randomly generated prefix to each class, and include them in the component code. This way, the utility classes won't conflict with other frameworks. The BEM classes don't change.
What's Next #
What we plan to do next:
- Create new components
- Improve the global editors
- Create a community space
- Improve CodyFrame CSS
Thanks for reading 👋
