Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
CSS Stylesheet
✓ <link rel="stylesheet" href="/path/to/codyhouse-framework/main/assets/css/style.css">
✗ @import '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
✓ @import 'codyhouse-framework/main/assets/css/custom-style/your-custom-file';
✗ @import '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
✓ <script src="/path/to/codyhouse-framework/main/assets/js/util.js"></script>
✗ import { util } from 'codyhouse-framework/main/assets/js/util.js';
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
✓ <script>document.getElementsByTagName("html")[0].className += " js";</script>
✗ if (typeof window !== 'undefined') { document.documentElement.classList.add('js'); }
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.
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>
Errors
Common errors & fixes
Error: Node Sass does not yet support your current environment: OS X 64-bit with Node.js X.X.X
Incompatibility between the `node-sass` version used by Gulp/Webpack and your Node.js version. `node-sass` is often sensitive to Node.js updates.
fixUpdate `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
Attempting to use CommonJS `require()` syntax in an ES module (`.mjs` or `type: "module"` in `package.json`).
fixCodyHouse 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
Trying to use a CSS custom property (variable) that hasn't been defined in your active stylesheet or accessible scope.
fixEnsure 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.
Audit
Dependencies
No dependency data recorded yet.