{"id":10649,"library":"codyhouse-framework","title":"CodyHouse Framework v3","description":"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.","status":"maintenance","version":"3.0.14","language":"javascript","source_language":"en","source_url":"https://github.com/CodyHouse/codyhouse-framework","tags":["javascript","scss","css","framework","design-system","html","front-end","buttons","colors"],"install":[{"cmd":"npm install codyhouse-framework","lang":"bash","label":"npm"},{"cmd":"yarn add codyhouse-framework","lang":"bash","label":"yarn"},{"cmd":"pnpm add codyhouse-framework","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","wrong":"@import 'codyhouse-framework/main/assets/css/style.css';","symbol":"CSS Stylesheet","correct":""},{"note":"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.","wrong":"@import 'custom-style/your-custom-file';","symbol":"SCSS Custom Styles","correct":"@import 'codyhouse-framework/main/assets/css/custom-style/your-custom-file';"},{"note":"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.","wrong":"import { util } from 'codyhouse-framework/main/assets/js/util.js';","symbol":"util.js","correct":""},{"note":"This script is critical for progressive enhancement, allowing CSS to apply additional styles when JavaScript is enabled. It should be placed in the `` of your document.","wrong":"if (typeof window !== 'undefined') { document.documentElement.classList.add('js'); }","symbol":"JavaScript Enabled Check","correct":""}],"quickstart":{"code":"\n\n\n \n \n CodyHouse Framework Quickstart\n \n \n \n \n\n\n
\n

Welcome to CodyHouse Framework

\n

A lightweight, accessible front-end framework.

\n
\n\n
\n \n \n\n
\n
\n

This is a column using the framework's grid system. CodyFrame provides a flexible grid for responsive layouts.

\n

Text components allow for easy styling of paragraph elements without applying individual classes.

\n
\n
\n

Another column with a light primary background and rounded corners. Utility classes like bg-primary-light, radius-md, and padding-md are used here.

\n
\n
\n
\n\n \n\n \n \n\n\n","lang":"html","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":"<4.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Include `util.js` using a `