search

🐞CodyFrame

A lightweight front-end framework for building accessible, bespoke interfaces.

Explore the documentation on codyhouse.coarrow-up-right

The framework is composed of:

  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 Componentsarrow-up-right. Make sure to import this file before the script file of the components.

Some of the advantages of working with CodyFrame:

  • ⚡️ lightweight (20KB minified and gzipped - before running PurgeCSS)

  • 🙌 no need to override existing CSS rules

  • 📱 mobile-first

  • 🎨 create unique designs with total control

  • 📖 easy to learn

  • 💼 a library of accessible componentsarrow-up-right

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

hashtag
Progressive enhancement

If you're using the Components, make sure to include the following script in the <head> of your document:

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.

hashtag
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:

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 Gitarrow-up-right first.

If you need to support browsers where CSS Custom Properties have not been implemented (e.g. IE11), use the npm run gulp watch-ie command instead.

When using this command, 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). Make sure to uncomment the following script in the of the index.html file: it is used to deliver only one file, according to whether the browser supports CSS variables or not.

📝 How to use the Framework with Webpackarrow-up-right

hashtag
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 Componentsarrow-up-right

Explore the Componentsarrow-up-right

hashtag
Global Editors

The Global Editors are visual 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:

hashtag
Extensions

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

codyhouse.co/ds/docs/extensionsarrow-up-right

PreviouswwwrootNextLICENSE

Last updated