Since we started CodyHouse 4 years ago, we’ve been asked to create a framework so that our code snippets could be used together. We didn’t consider this option until a few months ago.

Today we’re thrilled to introduce a new section titled Design System. In this article, I’m going to explain what’s our goal and what are our plans for the future of this project.

Design System

Design Systems is a hot topic right now mostly because it’s a solution to an issue anyone working on a middle-to-big web project faces at some point. The complexity of the project grows, and so does the maintenance cost. A design system is a living organism where you store reusable information about your project; it’s the structure upon which a project grows.

Creating a design system is expensive, though. For this reason, most companies consider creating a “design system framework”, and adapt it to different projects. Here at Amber Creative, we’ve done the same many times.

These considerations made us realize the potential of creating a project that could simplify the process of creating a design system for any company.

Such a project requires different parts working together:

1. The CodyHouse Framework, a solid system of CSS globals.
2. The CodyHouse Components, a library of HTML, CSS, JS components that work seamlessly with the Framework.
3. The CodyHouse Global Editors, a collection of web design tools to create and export typography elements, color themes, spacing rules, buttons and forms.

The Framework

The framework is the base upon which you can build the style of your web project. It’s composed of 13 SCSS files.

You can download it on Github and explore the documentation on CodyHouse.

codyhouse-framework/
└── main/
    ├── assets/
    │   ├── css/
    │   │   ├── globals/
    │   │   │   ├── _alignment.scss
    │   │   │   ├── _breakpoints.scss
    │   │   │   ├── _buttons.scss
    │   │   │   ├── _colors.scss
    │   │   │   ├── _forms.scss
    │   │   │   ├── _grid-layout.scss
    │   │   │   ├── _icons.scss
    │   │   │   ├── _mixins.scss
    │   │   │   ├── _reset.scss
    │   │   │   ├── _shared-styles.scss
    │   │   │   ├── _spacing.scss
    │   │   │   ├── _typography.scss
    │   │   │   └── _z-index.scss
    │   │   ├── _globals.scss
    │   │   ├── style.css
    │   │   └── style.scss
    │   └── js/
    │       └── util.js
    └── index.html

“But what makes this framework different?” I hear you say. Our framework is based on the idea that you should give up a bit of your “visual control” in favor of “system control” and maintainability. To do so, we’ve created smart controls (CSS Variables), that are injected in all components and, if modified, generate a cascade effect. In short, we’ve created a system quite simple in its essence, but where you can achieve more doing less.

A great example is how we manage typography. We’ve created 2 controls that affect the whole typography system and take care of the type scale and responsiveness.

The Components

The Components make the Framework even more valuable. We’ve started small with 15 components. The plan is to add new ones on a weekly basis and grow this section into an arsenal of hundreds of production-ready assets 🙌.

Because we’ve focused mostly on the functionality and accessibility, keeping the style to a bare minimum, the components are straightforward to customize.

Imagine when we get to the point where we have 200 components. You’ll be able to copy and paste as many as you like in your project, then edit them according to your needs. You’d have access to an ever-growing, curated collection of assets, and you won’t need to create them yourself. In a way, this library, together with the framework, could become your “design system”.

CodyHouse Studio

CodyHouse Studio is the icing on the cake: a complementary set of tools that work with the framework. Imagine an app where you can create your system of buttons visually, then export the code and paste it into your project. Or an app where you can define your spacing system, and export it. CodyHouse Studio is this and more!

We’ve already shown some of the features of CodyHouse Studio, but we need more time to complete it. We plan to release it in early 2019.

What’s next?

We have so many things to do! First of all, we’re creating more components. Secondly, we’re working on a series of video tutorials that explain how to use the framework. Finally, we have to continue our work on CodyHouse Studio. We’ll share quick previews of our new app on Twitter, so make sure to follow us!

It has been an exciting end of 2018, and we look forward to an even more explosive 2019! 🔥