A lightweight front-end framework for building accessible, bespoke interfaces.
✦ New version available! Download CodyFrame v4 →
Files included:
- base/*: essential CSS rules and utility classes (we suggest you don't modify these files).
- custom-style/*: SCSS templates you can use to create your bespoke style.
- style.scss: used to import the _base.scss and _custom-style.scss files.
- util.js: utility functions used in the CodyHouse 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
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
View the documentation on codyhouse.co →
If you're using our components, make sure to include the following script in the <head> of your document:
<script>document.getElementsByTagName("html")[0].className += " js";</script>The script is used in CSS to check if JavaScript is enabled and apply additional style accordingly.
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:
- Install the node modules
npm install
- Launch your project on a development server
npm run gulp watch
📝 How to use CodyFrame with Webpack
CodyHouse's components are accessible, progressively enhanced, HTML, CSS, JS components that work seamlessly with CodyFrame.
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
- Typography codyhouse.co/ds/globals/typography
- Spacing codyhouse.co/ds/globals/spacing
- Buttons codyhouse.co/ds/globals/buttons
- Forms codyhouse.co/ds/globals/forms
- Shared styles codyhouse.co/ds/globals/shared-styles
Browse our extensions for VSCode, Sublime Text and Atom: