🐞 CodyFrame

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

Progressive enhancement

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.

Gulp

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.

⚠️ Note: if you receive error messages while trying to run the 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.

<link id="codyframe" rel="stylesheet" href="assets/css/style.css">
<!-- browsers not supporting CSS variables -->
<script>
  if(!('CSS' in window) || !CSS.supports('color', 'var(--color-var)')) {var cfStyle = document.getElementById('codyframe');if(cfStyle) {var href = cfStyle.getAttribute('href');href = href.replace('style.css', 'style-fallback.css');cfStyle.setAttribute('href', href);}}
</script>

📝 How to use the Framework with Webpack

Component Library

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

Explore the Components

Global Editors

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

Extensions

Explore our autocomplete extensions for VSCode, Sublime Text and Atom:

codyhouse.co/ds/docs/extensions

tinybug / codyhouse-framework