Go to homepage

Projects /

CodyHouse Design v4

New design, new features, same goals.

CodyHouse Design v4

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
Old gallery vs. new gallery

Then we completely reimagined the search page, which now includes scoped search options and preview images.

New search
New search modal

Finally, we took this chance to refresh our branding. 

We worked with the talented Evgeniy Artsebasov to redesign our logo:

New logo
Old logo vs. new logo

We updated the typography system and created a series of illustrations for strategic pages and marketing material.

New homepage
New homepage

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

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 👋

Level up your CSS skills

Each month we email a 1-minute CSS tutorial to 20K developers

Awesome! We just sent you a confirmation link by email

Error - please try again or contact us

Your email address is already subscribed

Project duplicated

Project created

Globals imported

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