# codyhouse-framework > A lightweight front-end framework for building accessible, bespoke interfaces. Latest version **3.0.14** (published 2023-07-10) · MIT license · 0 weekly downloads ## Install ```sh npm install codyhouse-framework pnpm add codyhouse-framework yarn add codyhouse-framework bun add codyhouse-framework ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 3.0.14 | | Published | 2023-07-10 | | First published | 2019-01-09 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 596.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 1145 | | Author | Amber Creative Lab | | Maintainers | codyhouse | | Keywords | scss, css, framework, design-system, html, front-end, buttons, colors, forms, grid, mixins, spacing, typography, codyhouse | ## Links - npm: https://www.npmjs.com/package/codyhouse-framework - Repository: https://github.com/CodyHouse/codyhouse-framework - Homepage: https://codyhouse.co - Issues: https://github.com/CodyHouse/codyhouse-framework/issues - npm.io page: https://npm.io/package/codyhouse-framework ## Alternatives - [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads - [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads - [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads - [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads - [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads ## Recent versions - 3.0.14 (latest) — 2023-07-10 - 3.0.13 — 2023-04-04 - 3.0.12 — 2023-02-17 - 3.0.11 — 2022-11-17 - 3.0.10 — 2022-10-21 - 3.0.8 — 2022-10-10 - 3.0.7 — 2022-10-10 - 3.0.6 — 2022-06-21 - 3.0.5 — 2022-04-27 - 2.9.3 — 2022-04-27 - 3.0.4 — 2021-12-22 - 2.9.2 — 2021-12-22 - 3.0.3 — 2021-11-08 - 3.0.2 — 2021-10-12 - 3.0.1 — 2021-09-20 - … 65 more at https://npm.io/package/codyhouse-framework/versions ## README # 🐞 CodyFrame v3 A lightweight front-end framework for building accessible, bespoke interfaces. **✦ New version available!** [Download CodyFrame v4 →](https://github.com/codyhouse/codyframe) Files included: 1. **base/*:** essential CSS rules and utility classes (we suggest you don't modify these files). 2. **custom-style/*:** SCSS templates you can use to create your bespoke style. 3. **style.scss:** used to import the _base.scss and _custom-style.scss files. 4. **util.js:** utility functions used in the [CodyHouse components](https://codyhouse.co/ds/components). Make sure to import this file before the script file of the components. Selling points: - 🙌 No need to override existing CSS rules - 🎨 CSS custom properties - 📖 Easy to learn - 🏗 A library of [accessible components](https://codyhouse.co/ds/components) ```text codyhouse-framework/ └── main/ ├── assets/ │ ├── css/ │ │ ├── base/* │ │ │── custom-style/ │ │ │ ├── _buttons.scss │ │ │ ├── _colors.scss │ │ │ ├── _forms.scss │ │ │ ├── _icons.scss │ │ │ ├── _shared-styles.scss │ │ │ ├── _spacing.scss │ │ │ ├── _typography.scss │ │ │ └── _util.scss │ │ ├── _base.scss │ │ ├── _custom-style.scss │ │ ├── style-fallback.css │ │ ├── style.css │ │ └── style.scss │ └── js/ │ └── util.js └── index.html ``` ## Documentation [View the documentation on codyhouse.co →](https://codyhouse.co/ds/get-started) ## Progressive enhancement If you're using our [components](https://codyhouse.co/ds/components), make sure to include the following script in the `` of your document: ```html ``` The script is used in CSS to check if JavaScript is enabled and apply additional style accordingly. ## Gulp CodyFrame includes a Gulp configuration file. To start a project that runs on Gulp, navigate to the framework folder, and run the following two commands: 1) Install the node modules ``` npm install ``` 2) Launch your project on a development server ``` npm run gulp watch ``` ⚠️ **Note:** make sure you have [Npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), [Node](https://nodejs.org/en/download/), and [Git](https://git-scm.com/) installed. 📝 [How to use CodyFrame with Webpack](https://codyhouse.co/ds/docs/framework#webpack) ## Component library CodyHouse's components are accessible, progressively enhanced, HTML, CSS, JS components that work seamlessly with CodyFrame. [Explore the components](https://codyhouse.co/ds/components) ## Global Editors The Global Editors are visual tools that you can use to create the style of typography elements, color palettes, spacing rules, buttons, and forms. They generate SCSS code compatible with CodyFrame. Explore the editors: - **Colors** [codyhouse.co/ds/globals/colors](https://codyhouse.co/ds/globals/colors) - **Typography** [codyhouse.co/ds/globals/typography](https://codyhouse.co/ds/globals/typography) - **Spacing** [codyhouse.co/ds/globals/spacing](https://codyhouse.co/ds/globals/spacing) - **Buttons** [codyhouse.co/ds/globals/buttons](https://codyhouse.co/ds/globals/buttons) - **Forms** [codyhouse.co/ds/globals/forms](https://codyhouse.co/ds/globals/forms) - **Shared styles** [codyhouse.co/ds/globals/shared-styles](https://codyhouse.co/ds/globals/shared-styles) ## Extensions Browse our extensions for VSCode, Sublime Text and Atom: [codyhouse.co/ds/docs/extensions](https://codyhouse.co/ds/docs/extensions) --- _Source: https://npm.io/package/codyhouse-framework · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._