CodyHouse Framework v3

3.0.14 · maintenance · verified Sun Apr 19

CodyHouse Framework v3 is a lightweight, front-end framework primarily built with SCSS for creating accessible and custom user interfaces. It emphasizes a 'no override' approach using CSS custom properties and provides a foundational set of CSS rules and utility classes. While the current stable version discussed here is v3.0.14, the project actively promotes v4.0.0 as the latest major release, suggesting v3 is now in a maintenance or legacy state with no further feature development or breaking changes expected. Its key differentiators include a focus on accessibility, ease of learning, and seamless integration with CodyHouse's library of HTML, CSS, and JS components and visual Global Editors for design system management.

Common errors

```
Error: Node Sass does not yet support your current environment: OS X 64-bit with Node.js X.X.X
```
cause Incompatibility between the `node-sass` version used by Gulp/Webpack and your Node.js version. `node-sass` is often sensitive to Node.js updates.

fix Update `node-sass` and related dependencies to versions compatible with your Node.js installation. Often, running `npm rebuild node-sass` or `npm update` can resolve this. Alternatively, consider migrating to `sass` (Dart Sass) which is more actively maintained and less prone to Node.js version issues.
```
ReferenceError: require is not defined in ES module scope
```
cause Attempting to use CommonJS `require()` syntax in an ES module (`.mjs` or `type: "module"` in `package.json`).

fix CodyHouse Framework's `util.js` is not an ES module. If you need to include it in an ES module context, you'll need a bundler (like Webpack or Rollup) to handle its CommonJS-like inclusion. For direct browser use, include it via a `<script>` tag.
```
CSS custom property `--color-primary` is not defined
```
cause Trying to use a CSS custom property (variable) that hasn't been defined in your active stylesheet or accessible scope.

fix Ensure that your `_colors.scss` (or equivalent file where custom properties are defined) is correctly imported and compiled into your final `style.css`. Verify the variable name is correct and global custom properties are accessible.

Warnings

breaking CodyHouse Framework v4 has been released and is actively promoted. While v3.x has received no breaking changes, users should be aware that future development and new features will focus on v4, making v3 a legacy version.
Fix: Consider migrating to CodyHouse Framework v4 for access to the latest features, improvements, and ongoing support. Refer to the v4 documentation for migration guides and changes.
gotcha The framework primarily uses SCSS and CSS custom properties. While it ships with compiled CSS, direct customization is intended through SCSS variables and partials, requiring a build process (e.g., Gulp, Webpack) for optimal use.
Fix: Set up a build pipeline using Gulp or Webpack to compile your custom SCSS and integrate it with the framework's base styles. Consult the documentation for Gulp configuration details.
gotcha The `util.js` file is a collection of global utility functions, primarily used by CodyHouse's separate component library. It is designed to be included as a standard script, not an ES module, and relies on being present before component-specific scripts.
Fix: Include `util.js` using a `<script>` tag in your HTML, preferably at the end of the `<body>` or before any component JavaScript. Do not attempt to import it as an ES module unless you explicitly transpile it.

Install

npm install codyhouse-framework npm
yarn add codyhouse-framework yarn
pnpm add codyhouse-framework pnpm

Imports

CSS Stylesheet
wrong:
```
@import 'codyhouse-framework/main/assets/css/style.css';
```
correct:
```
<link rel="stylesheet" href="/path/to/codyhouse-framework/main/assets/css/style.css">
```
The primary way to use CodyHouse Framework is by linking the compiled CSS file in your HTML. Direct `@import` into other CSS is possible but less common for the main output.
SCSS Custom Styles
wrong:
```
@import 'custom-style/your-custom-file';
```
correct:
```
@import 'codyhouse-framework/main/assets/css/custom-style/your-custom-file';
```
When extending the framework with your own SCSS, you'll import specific partials from the `custom-style` directory. Ensure your SCSS compilation process correctly resolves paths.
util.js
wrong:
```
import { util } from 'codyhouse-framework/main/assets/js/util.js';
```
correct:
```
<script src="/path/to/codyhouse-framework/main/assets/js/util.js"></script>
```
The `util.js` file contains global utility functions for CodyHouse components and should be included as a classic script tag before any component scripts. It is not designed as an ES module.
JavaScript Enabled Check
wrong:
```
if (typeof window !== 'undefined') { document.documentElement.classList.add('js'); }
```
correct:
```
<script>document.getElementsByTagName("html")[0].className += " js";</script>
```
This script is critical for progressive enhancement, allowing CSS to apply additional styles when JavaScript is enabled. It should be placed in the `<head>` of your document.

Quickstart

This quickstart demonstrates a basic HTML page setup using CodyHouse Framework v3, including linking the compiled CSS, adding the JS-enabled check, and using a few common utility classes and components like buttons and grid for layout.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CodyHouse Framework Quickstart</title>
  <script>document.getElementsByTagName("html")[0].className += " js";</script>
  <!-- Link the compiled CSS from your build process or directly from node_modules -->
  <link rel="stylesheet" href="./node_modules/codyhouse-framework/main/assets/css/style.css">
  <style>
    /* Custom styles using framework variables */
    :root {
      --color-primary-dark: hsl(210, 50%, 20%);
    }
    .my-custom-heading {
      color: var(--color-primary-dark);
      font-size: var(--text-xxl);
      margin-bottom: var(--space-md);
    }
  </style>
</head>
<body>
  <header class="container padding-y-md">
    <h1 class="my-custom-heading">Welcome to CodyHouse Framework</h1>
    <p class="color-contrast-medium text-sm">A lightweight, accessible front-end framework.</p>
  </header>

  <main class="container padding-y-lg">
    <button class="btn btn--primary margin-right-sm">Primary Button</button>
    <button class="btn btn--secondary">Secondary Button</button>

    <div class="grid gap-md margin-top-lg">
      <div class="col-6@md text-component">
        <p>This is a column using the framework's grid system. CodyFrame provides a flexible grid for responsive layouts.</p>
        <p>Text components allow for easy styling of paragraph elements without applying individual classes.</p>
      </div>
      <div class="col-6@md bg-primary-light radius-md padding-md text-component">
        <p>Another column with a light primary background and rounded corners. Utility classes like <code>bg-primary-light</code>, <code>radius-md</code>, and <code>padding-md</code> are used here.</p>
      </div>
    </div>
  </main>

  <footer class="container padding-y-md text-center border-top-alpha">
    <p class="text-sm color-contrast-low">Built with CodyHouse Framework.</p>
  </footer>

  <!-- Include the utility JS file if using CodyHouse components -->
  <script src="./node_modules/codyhouse-framework/main/assets/js/util.js"></script>
</body>
</html>

view raw JSON →