CodyHouse Framework 2.0

Since the release of v1.0, we've been listening to all your feedback and built upon it. The v2.0 of the CodyHouse framework is, we believe, an important step in the life of our project.

The good stuff about v2.0:

• ⚡️ lightweight (8KB minified and gzipped)
• 🙌 no need to override existing CSS rules
• 📱 mobile-first
• 🎨 create unique designs with total control
• 📖 easy to learn
• 📦 85 (and growing) free components

File Organization #

The SCSS files of the framework are organized in two main folders:

1. 📁 base → essential CSS rules and utility classes
2. 📁 custom-style → SCSS templates to help you create your bespoke style

The _base.scss is the core of the framework (e.g., breakpoints, mixins, utility classes...). If you're integrating v2.0 as an external npm module, we suggest you import only this file. Updates of the _base.scss won't break the custom style of your project.

The 'custom-style' folder includes the SCSS files where you create the unique style of your project. Use them as a reference to design your own buttons, form elements, typography, and more.

This separation means you don't need to override existing CSS rules. We put what's required to power-up the system and the CodyHouse components into 'base', while your bespoke style goes into 'custom-style'.

codyhouse-framework/
└── main/
    ├── assets/
    │   ├── css/
    │   │   ├── base/
    │   │   │   ├── _accessibility.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
    │   │   │   ├── _util.scss
    │   │   │   ├── _visibility.scss
    │   │   │   └── _z-index.scss
    │   │   │── custom-style/
    │   │   │   ├── _buttons.scss
    │   │   │   ├── _colors.scss
    │   │   │   ├── _forms.scss
    │   │   │   ├── _shared-styles.scss
    │   │   │   ├── _spacing.scss
    │   │   │   └── _typography.scss
    │   │   ├── _base.scss
    │   │   ├── _custom-style.scss
    │   │   ├── style.css
    │   │   └── style.scss
    │   └── js/
    │       └── util.js
    └── index.html

Component Library #

All the components have been updated and are compatible with v2.0! Now that the new version of the framework is out, we can restart working on new components (pssst...we just released the number input and full-screen select components).

At the moment, the library includes 85 (free) accessible, progressively enhanced, HTML, CSS, JS components. In addition to delivering new free components, we plan on releasing premium components and themes. They will allow us to continue working full-time on the framework and all the free cool stuff we publish on CodyHouse.

👉 Feel free to suggest new components on our Nolt board.

Global Editors #

The Global Editors have been updated as well! Go ahead and use our web tools to create custom buttons, form elements, typography rules and more directly in the browser! The code generated can be copied and pasted into the appropriate 'custom-style' files.

• Colors codyhouse.co/ds/globals/colors
• Typography codyhouse.co/ds/globals/typography
• Spacing codyhouse.co/ds/globals/spacing
• Buttons codyhouse.co/ds/globals/buttons
• Forms codyhouse.co/ds/globals/forms

Documentation #

The documentation has undergone a massive update! Now it's easier to navigate the content and find the information you're looking for, with plenty of live examples of how to use the classes of the framework.

How to upgrade #

If you've been using v1, and want to download the new components, please make sure to upgrade to v1.2.1. This release includes all the new classes of v.2.0, plus fallbacks so you can keep using v1.0 without issues.

What now? #

Join us on this journey and help us build an awesome framework and the best library of web components! 🚀