A lightweight front-end framework for building accessible, bespoke interfaces.
Explore the documentation on codyhouse.co
The framework is composed of:
- _base.scss: essential CSS rules and utility classes.
- _custom-style.scss: CSS templates you can use to create your bespoke style (e.g., buttons, forms, and colors).
- 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 component script file.
Some of the advantages of working with CodyFrame:
- ⚡️ lightweight (13KB minified and gzipped)
- 🙌 no need to override existing CSS rules
- 📱 mobile-first
- 🎨 create unique designs with total control
- 📖 easy to learn
- 💼 a library of accessible components
codyhouse-framework/
└── main/
├── assets/
│ ├── css/
│ │ ├── base/
│ │ │ ├── _accessibility.scss
│ │ │ ├── _breakpoints.scss
│ │ │ ├── _buttons.scss
│ │ │ ├── _colors.scss
│ │ │ ├── _forms.scss
│ │ │ ├── _grid-layout.scss
│ │ │ ├── _icons.scss
│ │ │ ├── _mixins.scss
│ │ │ ├── _reset.scss
│ │ │ ├── _shared-styles.scss
│ │ │ ├── _spacing.scss
│ │ │ ├── _typography.scss
│ │ │ ├── _util.scss
│ │ │ ├── _visibility.scss
│ │ │ └── _z-index.scss
│ │ │── custom-style/
│ │ │ ├── _buttons.scss
│ │ │ ├── _colors.scss
│ │ │ ├── _forms.scss
│ │ │ ├── _shared-styles.scss
│ │ │ ├── _spacing.scss
│ │ │ └── _typography.scss
│ │ ├── _base.scss
│ │ ├── _custom-style.scss
│ │ ├── style-fallback.css
│ │ ├── style.css
│ │ └── style.scss
│ └── js/
│ └── util.js
└── index.html
If you're using the 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 target that JavaScript is enabled and apply additional style accordingly. If you don't include the script, part of the style of the components won't be visible.
CodyFrame includes a Gulp configuration file. To start a project that runs on Gulp, once you have downloaded the source files, navigate to the framework folder, and run the following commands in your command line:
npm install
npm run gulp watch
The first command will install the modules the framework requires for compiling SCSS into CSS; the second will launch your project on a development server.
npm install command, you may need to download and install Git first.
The Gulp configuration file is set to compile the SCSS into two separate CSS files: style.css includes the CSS variables; in the style-fallback.css file, the CSS variables are replaced by their fallbacks (generated by the PostCSS plugin). A script in the of the index.html file is used to deliver only one file, according to whether the browser supports CSS variables or not.
<script>
if('CSS' in window && CSS.supports('color', 'var(--color-var)')) {
document.write('<link rel="stylesheet" href="assets/css/style.css">');
} else {
document.write('<link rel="stylesheet" href="assets/css/style-fallback.css">');
}
</script>
<noscript>
<link rel="stylesheet" href="assets/css/style-fallback.css">
</noscript>📝 How to use the Framework with Webpack
CodyHouse's Components are accessible, progressively enhanced, HTML, CSS, JS components that work seamlessly with the framework.
You can use the Gulp configuration file to auto-import the .scss of the CodyHouse's Components.
Learn more about importing the CSS and JS of the CodyHouse's Components
The Global Editors are web design tools that allow you to set the style of typography elements, color themes, spacing rules, buttons, and forms directly in the browser. They generate SCSS code that is 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
Explore our autocomplete extensions for VSCode, Sublime Text and Atom: