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.
![New gallery page](assets/img/posts/codyhouse-v4-gallery.jpg)
Then we completely reimagined the search page, which now includes scoped search options and preview images.
![New search](assets/img/posts/codyhouse-v4-search.jpg)
Finally, we took this chance to refresh our branding.
We worked with the talented Evgeniy Artsebasov to redesign our logo:
![New logo](assets/img/posts/codyhouse-v4-logo.png)
We updated the typography system and created a series of illustrations for strategic pages and marketing material.
![New homepage](assets/img/posts/codyhouse-v4-homepage.jpg)
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:
![framework selector](assets/img/posts/codyhouse-v4-framework-switch.jpg)
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 👋