Go to homepage

Projects /

CodyFrame v3

CodyFrame v3 is a CSS framework for building accessible, bespoke interfaces.

Note

A new version of CodyFrame is available!

Some of the advantages of working with CodyFrame:

  • No need to override existing CSS rules
  • CSS custom properties
  • Easy to learn

Download #

Download CodyFrame on Github

Download CodyFrame on Github:

github.com/CodyHouse/codyhouse-framework ↗

Then run the following two commands to start a web project based on the Gulp configuration file included in the framework:

  1. Install the node modules.
npm install
  1. Launch your project on a development server.
npm run gulp watch

Note

Make sure you have Npm, Node, and Git installed.

Alternatively, you can import via CDN the CSS and JS of the framework. 

<head>
  <script>document.getElementsByTagName("html")[0].className += " js";</script>
  <link rel="stylesheet" href="https://unpkg.com/codyhouse-framework/main/assets/css/style.min.css">
</head>
<body>
  <!-- ... -->
<script src="https://unpkg.com/codyhouse-framework/main/assets/js/util.js"></script>
</body>
</html>

Importing the framework via CDN can be useful for quick prototyping. To create your custom style (e.g., buttons and form elements), use the Gulp starter template.

Import CodyFrame as npm module #

Install the framework via npm:

# Using npm
npm i codyhouse-framework

# Using Yarn
yarn add codyhouse-framework

Note

Make sure you have Npm installed.

Create a '_base.scss' file and import the base style of the framework:

// _base.scss file
// import the basic style of the framework
// ----- 👇 update this path according to your content structure
@forward '../../../node_modules/codyhouse-framework/main/assets/css/base';

Make a copy of the framework 'custom-style' folder and '_custom-style.scss' file and paste it in your project. The SCSS files contained in the folder are used to set the custom style (e.g., buttons and forms) of your project.

In your 'style.scss' file, import the '_base.scss' and '_custom-style.scss' files.

@use 'base' as *;
@use 'custom-style';

If you use our components, make sure to import the 'util.js' file before the component script files.

<body>
  <!---------- 👇 import from unpkg or import a local copy of the file -->
  <script src="https://unpkg.com/codyhouse-framework/main/assets/js/util.js"></script>
</body>

Files included #

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 components. Make sure to import this file before the component script file.
Understanding 'Base' and 'Custom' style
codyhouse-framework/
└── main/
    ├── assets/
    │   ├── css/
    │   │   ├── base/*
    │   │   ├── custom-style/
    │   │   │   ├── _buttons.scss
    │   │   │   ├── _colors.scss
    │   │   │   ├── _forms.scss
    │   │   │   ├── _icons.scss
    │   │   │   ├── _shared-styles.scss
    │   │   │   ├── _spacing.scss
    │   │   │   └── _typography.scss
    │   │   ├── _base.scss
    │   │   ├── _custom-style.scss
    │   │   ├── style.css
    │   │   └── style.scss
    │   └── js/
    │       ├── scripts.js
    │       ├── scripts.min.js
    │       └── util.js
    └── index.html

PurgeCSS #

PurgeCSS is a tool used to remove unused CSS to make your style file smaller. For example, you can use it to remove all the framework utility classes you're not actually using in your project.

When using PurgeCSS with Codyframe, we suggest to ignore the CSS of the components. This is why we have included the PurgeCSS start ignore comment inside the '_custom-style.scss' file.

All the files imported in the style.scss file after the custom-style will be ignored by PurgeCSS:

@use 'base' as * with (
  $breakpoints: (
    'xs': 32rem, // ~512px
    'sm': 48rem, // ~768px
    'md': 64rem, // ~1024px
    'lg': 80rem, // ~1280px
    'xl': 90rem  // ~1440px
  ),
  $grid-columns: 12
);

@use 'custom-style';
/* 👇 ignored by PurgeCSS */
@use 'components/**/*.scss';
@use 'your-custom-css.scss';

Using CodyFrame with Gulp #

How you integrate CodyFrame into a Gulp project depends on whether you're starting the project from scratch or you're importing CodyFrame into an existing project.

Starting a Gulp project from scratch #

Download our Gulp starter template on GitHub, then run the following two commands:

  1. Install the node modules.
npm install
  1. Launch your project on a development server.
npm run gulp watch

Note

Make sure you have Npm, Node, and Git installed.

To auto-import the SCSS of the components into your style.scss file, create a new SCSS file for each component inside the 'assets/css/components' folder.

Use the file names specified in each component SCSS file to import the components in the right order:

/* -------------------------------- 

File#: _1_accordion

-------------------------------- */

The final structure will look like:

css/
├── base/
├── components/
│   ├── _1_accordion.scss
│   ├── _1_alert.scss
│   ├── _1_back-to-top.scss
│   ├── _2_menu-bar.scss
│   └── _3_lightbox.scss
├── custom-style/
├── _base.scss
├── _custom-style.scss
├── style.css
└── style.scss

To auto-compile multiple JS files (util.js + components) into a single one (scripts.js), create a new JS file for each component inside the 'assets/js/components' folder.

As we did with the SCSS files, use the file names specified in the component JS file:

js/
├── components/
│   ├── _1_accordion.js
│   ├── _1_alert.js
│   ├── _1_back-to-top.js
│   ├── _2_menu-bar.js
│   └── _3_lightbox.js
├── scripts.js
├── scripts.min.js
└── util.js

Optionally, you can use the gulp dist command to:

  • Compress your style file, purge it using PurgeCSS, and copy it to the 'dist' folder;
  • Compress your JS files and copy them to the 'dist' folder;
  • Copy your assets and html files to the 'dist' folder.
npm run gulp dist

Importing CodyFrame into an existing Gulp project #

Install the framework via npm:

# Using npm
npm i codyhouse-framework

# Using Yarn
yarn add codyhouse-framework

Note

Make sure you have Npm installed.

Create a '_base.scss' file and import the base style of the framework:

// _base.scss file
// import the basic style of the framework
// ----- 👇 update this path according to your content structure
@forward '../../../node_modules/codyhouse-framework/main/assets/css/base';

Make a copy of the framework 'custom-style' folder and '_custom-style.scss' file and paste it in your project. The SCSS files contained in the folder are used to set the custom style (e.g., buttons and forms) of your project.

In your 'style.scss' file, import the '_base.scss' and '_custom-style.scss' files.

@use 'base' as *;
@use 'custom-style';

To use our components, make sure to import the 'util.js' file before the component script files.

<body>
  <!---------- 👇 import from unpkg or import a local copy of the file -->
  <script src="https://unpkg.com/codyhouse-framework/main/assets/js/util.js"></script>
</body>

Using Gulp in a PHP project #

If you are running a PHP project, start downloading our Gulp starter template  and install the node modules using the npm install command.

You will need to modify the template if you want your project to reload when you make changes to your php files.

First, install the gulp-connect-php module running the following command:

npm install gulp-connect-php --save-dev

In the 'gulpfile.js', import the new module:

var connect = require('gulp-connect-php');

Then define a projectPath variable to store the path to your project (e.g., localhost:8888/projectFolder) and modify the watch task:

gulp.task('watch', gulp.series(['sass', 'scripts'], function () {
  connect.server({}, function (){
    browserSync({
      proxy: projectPath,
      notify: false
    });
  });
  gulp.watch('**/*.php', gulp.series(reload));
  gulp.watch('assets/css/**/*.scss', gulp.series(['sass']));
  gulp.watch(componentsJsPath, gulp.series(['scripts']));
}));

Here's how the final 'gulpfile.js' file should look like:

CodyFrame gulp config for a PHP project ↗

The gulp configuration file comes with the additional gulp dist command. This command takes care of:

  • Compressing your style file, purging it using PurgeCSS, and coping it to the 'dist' folder;
  • Compressing your JS files and coping them to the 'dist' folder;
  • Coping your assets and php files to the 'dist' folder.

You can run the command with:

npm run gulp dist

Using CodyFrame with Webpack #

Install the framework via npm:

# Using npm
npm i codyhouse-framework

# Using Yarn
yarn add codyhouse-framework

Note

Make sure you have Npm, Node, and Git installed.

Create a '_base.scss' file and import the base style of the framework:

// _base.scss file
// import the basic style of the framework
@forward 'codyhouse-framework/main/assets/css/base';

Make a copy of the framework 'custom-style' folder and '_custom-style.scss' file and paste it in your project. The SCSS files contained in the folder are used to set the custom style (e.g., buttons and forms) of your project.

In your 'style.scss' file, import the '_base.scss' and '_custom-style.scss' files.

@use './assets/css/base' as *;
@use './assets/css/custom-style';

Your project 'src' folder structure should be:

src/
├── assets/
│   └── css/
│        ├── custom-style/*
│        ├── _custom-style.scss
│        └── _base.scss
├── index.js
└── style.scss

Your Webpack config should include the following rule (or similar):

module.exports = { 
  entry: ['./src/index.js', './src/style.scss'],
  //..
  module: {
    rules: [
      { 
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: 'style-loader',
          }, {
            loader: 'css-loader'
          }, {
            loader: 'sass-loader'
          }
        ],
      }
    ]
  },
  //..
};

In your 'style.scss' file, add the following line of code:

@use './assets/css/base' as *;
@use './assets/css/custom-style';

Using CodyFrame with WordPress #

Download the 'gulpfile.js' and 'package.json' files from Github and include them in your theme root folder.

If you already have a 'package.json' file, make sure to include all the devDependencies and add the gulp script to your scripts list.

Open the 'gulpfile.js' file, and set the themeName variable equal to your theme folder name:

var themeName = 'codyframe-wp'; // use your WP theme folder name

Using the terminal/command line, navigate to the WP theme folder and install the node modules using the npm install command.

Note

Make sure you have Npm and Node installed.

Inside your WP theme folder, create an 'assets' folder with a 'css' and 'js' subfolders.

In the 'css' folder, create a '_base.scss' file and import the base style of the framework:

// _base.scss file
// import the basic style of the framework
@forward '../../node_modules/codyhouse-framework/main/assets/css/base';

Make a copy of the framework 'custom-style' folder and '_custom-style.scss' file and paste it in your project. The SCSS files contained in the folder are used to set the custom style (e.g., buttons and forms) of your project.

In your 'style.scss' file, import the '_base.scss' and '_custom-style.scss' files.

// import the basic style of the framework
@use 'base' as *;

// add your custom style
@use 'custom-style';

Your project 'assets' folder structure should be:

themeName/
└── assets/
    ├── css/
    │    ├── custom-style/
    │    ├── _custom-style.scss
    │    ├── _base.scss    
    │    └── style.scss
    │
    └── js/

To preview your theme, run the npm run gulp watch command. Make sure your local server is live (e.g., if you are using MAMP, make sure to lauch it and start the server).

Use the wp_enqueue_scripts and the wp_print_scripts hooks to load the CodyFrame style and JS utility functions:

function codyframe_register_styles() {

  $theme_version = wp_get_theme()->get( 'Version' );

  wp_enqueue_style( 'codyframe', get_template_directory_uri() . '/assets/css/style.css', array(), $theme_version );
}

add_action( 'wp_enqueue_scripts', 'codyframe_register_styles' );

function codyframe_register_scripts() {

  $theme_version = wp_get_theme()->get( 'Version' );

  wp_enqueue_script( 'codyframe', get_template_directory_uri() . '/assets/js/scripts.js', array(), $theme_version, true );
}

add_action( 'wp_enqueue_scripts', 'codyframe_register_scripts' );

// no-js support
function codyframe_js_support() {
  ?>
  <script>document.getElementsByTagName("html")[0].className += " js";</script>
  <?php
}

add_action( 'wp_print_scripts', 'codyframe_js_support');

To automatically import the SCSS and JS of the CodyHouse components, create a 'components' folder inside 'assets/css', and a 'components' folder inside 'assets/js'. Then create a SCSS and JS file for each component.

Use the file names specified in each component SCSS/JS file to import them in the right order:

themeName/
└── assets/
    ├── css/
    │    ├── components/
    │    │    ├── _1_accordion.scss
    │    │    ├── _1_alert.scss
    │    │    ├── _1_back-to-top.scss
    │    │    ├── _2_menu-bar.scss
    │    │    └── _3_lightbox.scss
    │    ├── custom-style/
    │    ├── _custom-style.scss
    │    ├── _base.scss    
    │    └── style.scss
    │
    └── js/
         ├── components/
         │    ├── _1_accordion.js
         │    ├── _1_alert.js
         │    ├── _1_back-to-top.js
         │    ├── _2_menu-bar.js
         │    └── _3_lightbox.js
         └── scripts.js

In your 'style.scss' file, add the following line of code:

@use 'base' as *;
@use 'custom-style';
@use 'components/**/*.scss'; // 👈import all the SCSS files in the css/components/* folder

Optionally, you can use PurgeCSS to remove the unused CSS classes of the framework. You can do that using the gulp purgeCSS task defined in the gulp.js configuration file:

npm run gulp purgeCSS

When using PurgeCSS with Codyframe, we suggest to ignore the CSS of the components. This is why we have included the PurgeCSS start ignore comment inside the '_custom-style.scss' file.

All the files imported in the style.scss file after the custom-style will be ignored by PurgeCSS:

@use 'base' as *;

@use 'custom-style';
/* 👇 ignored by PurgeCSS */
@use 'components/**/*.scss';
@use 'your-custom-css.scss';

Using CodyFrame with Shopify #

Download the 'gulpfile.js' and 'package.json' files from Github and include it in your theme root folder.

If you already have a 'package.json' file, make sure to include all the devDependencies and add the gulp script to your scripts list.

Using the terminal/command line, move to the Shopify theme folder and install the node modules using the npm install command.

Note

Make sure you have Npm and Node installed.

Inside your theme folder, create an 'scss' and 'js' folder.

Create a '_base.scss' file and import the base style of the framework:

// _base.scss file
// import the basic style of the framework
@forward '../../node_modules/codyhouse-framework/main/assets/css/base';

Make a copy of the framework 'custom-style' folder and '_custom-style.scss' file and paste it in your project. The SCSS files contained in the folder are used to set the custom style (e.g., buttons and forms) of your project.

In your 'style.scss' file, import the '_base.scss' and '_custom-style.scss' files.

// import the basic style of the framework
@use 'base' as *;

// add your custom style
@use 'custom-style';

Your project folder structure should be:

themeName/
├── [all shopify directories]
├── assets/
├── scss/
│    ├── custom-style/
│    ├── _custom-style.scss
│    ├── _base.scss
│    └── style.scss
│ 
├── js/
├── gulpfile.js
└── package.json

Note

Adding liquid tags to your SCSS files can cause a syntax error while compiling. To escape a liquid string wrap it in #{' ... '}. More info in this article.

Run the npm run gulp watch command to run the sass and scripts tasks. These will create, in the 'assets' folder, a 'style.css' and a 'script.min.js' files. Make sure to import them in your page.

To automatically import the SCSS and JS of our components, create a 'components' folder inside 'scss', and a 'components' folder inside 'js'. Then create a SCSS and JS file for each component.

Use the file names specified in each component SCSS/JS file to import them in the right order:

themeName/
├── [all shopify directories]
├── assets/
├── scss/
│    ├── components/
|    |    ├── _1_accordion.scss
│    |    ├── _1_alert.scss
|    |    ├── _1_accordion.scss
│    |    └── _1_back-to-top.scss
│    ├── custom-style/
│    ├── _custom-style.scss
│    ├── _base.scss
│    └── style.scss
│ 
├── js/
│    └── components/
|         ├── _1_accordion.js
│         ├── _1_alert.js
|         └── _1_back-to-top.js
├── gulpfile.js
└── package.json

In your 'style.scss' file, add the following line of code:

@use 'base' as *;
@use 'custom-style';
@use 'components/**/*.scss'; // 👈import all the .scss files in the scss/components/* folder

Optionally, you can use PurgeCSS to remove the unused CSS classes of the framework. You can do that using the gulp purgeCSS task defined in the gulp.js configuration file:

npm run gulp purgeCSS

When using PurgeCSS with Codyframe, we suggest to ignore the CSS of the components. This is why we have included the PurgeCSS start ignore comment inside the '_custom-style.scss' file.

All the files imported in the style.scss file after the custom-style will be ignored by PurgeCSS:

@use 'base' as *;

@use 'custom-style';
/* 👇 ignored by PurgeCSS */
@use 'components/**/*.scss';
@use 'your-custom-css.scss';

Using CodyFrame with Laravel Mix #

Install the framework via npm:

# Using npm
npm i codyhouse-framework

# Using Yarn
yarn add codyhouse-framework

Note

Make sure you have Npm, Node, and Git installed.

Create a '_base.scss' file and import the base style of the framework:

// _base.scss file
// import the basic style of the framework
@forward '~codyhouse-framework/main/assets/css/base';

Make a copy of the framework 'custom-style' folder and '_custom-style.scss' file and paste it in your project. The SCSS files contained in the folder are used to set the custom style (e.g., buttons and forms) of your project.

In your 'style.scss' file, import the '_base.scss' and '_custom-style.scss' files.

@use 'base' as *;
@use 'custom-style';

In your 'webpack.mix.js' file, add the following lines to compile the SCSS code:

mix.sass( 'resources/sass/style.scss', 'css');

To automatically import the SCSS and JS of our components, create a 'components' folder inside 'resources/sass', and a 'components' folder inside 'resources/js'. Then create a SCSS and JS file for each component.

Use the file names specified in each component SCSS/JS file (i.e., File#) to import them in the right order.

In your 'style.scss', add the following line of code:

@use 'base' as *; 
@use 'custom-style';
@use 'components/**/*.scss'; // 👈import all the .scss files in the sass/components/* folder

Install the import-glob-loader and webpack-merge-and-include-globally modules and modify your Webpack configuration in 'webpack.mix.js' file:

const MergeIntoSingleFilePlugin = require('webpack-merge-and-include-globally'); // 👈 merge .js files together into single file

mix.webpackConfig({
  module: {
    rules: [{
      test: /\.scss/,
      loader: "import-glob-loader", // 👈 use glob syntax to import components .scss files
      options: {
        test: "use",
      } 

    }]
  },
  plugins: [
    new MergeIntoSingleFilePlugin({ // 👈 merge util.js and components .js files in a single frontend.js file
      files: {
        "frontend.js": [
          "node_modules/codyhouse-framework/main/assets/js/util.js",
          "src/assets/js/components/**/*.js",
        ]
      }
    }),
  ]
});

Optionally, you can include PurgeCSS in your Laravel Mix configuration file to remove the unused CSS classes of the framework.

Update your sass mix to include PurgeCSS when using the PostCss plugin:

const purgecss = require('@fullhuman/postcss-purgecss');
let purgeCSSOpts = {
  content: ['src/*.php', 'src/assets/js//scripts.js'],
  safelist: ['.is-hidden', '.is-visible'],
  defaultExtractor: content => content.match(/[\w-/:%@]+(?<!:)/g) || []
};

mix.sass( 'resources/sass/style.scss', 'css')
.options({
  postCss: [
    purgecss(purgeCSSOpts)
  ]
});

When using PurgeCSS with Codyframe, we suggest to ignore the CSS of the components. This is why we have included the PurgeCSS start ignore comment inside the '_custom-style.scss' file.

All the files imported in the style.scss file after the custom-style will be ignored by PurgeCSS:

@use 'base' as *;

@use 'custom-style';
/* 👇 ignored by PurgeCSS */
@use 'components/**/*.scss';
@use 'your-custom-css.scss';

Using CodyFrame with a SASS compiler #

You can use CodyFrame with any SCSS compiler.

Make sure to do the following:

  1. Download CodyFrame on GitHub;
  2. Import the 'main/assets/css' folder and the 'util.js' file in your project;
  3. In the 'style.scss' file, remove the @use 'components/**/*.scss' line: 
    @use 'base' as * with (
  $breakpoints: (
    'xs': 32rem, // ~512px
    'sm': 48rem, // ~768px
    'md': 64rem, // ~1024px
    'lg': 80rem, // ~1280px
    'xl': 90rem  // ~1440px
  ),
  $grid-columns: 12
);

/*! purgecss start ignore */
@use 'custom-style';
// @use 'components/**/*.scss'; 👈 remove this line
/*! purgecss end ignore */
  4. Set the tool to compile the 'style.scss' to the 'style.css' file. Make sure to use Dart Sass as SASS compiler (rather than Libasass).

Using CodyFrame with Vue.js #

Install the framework via npm:

# Using npm
npm i codyhouse-framework

# Using Yarn
yarn add codyhouse-framework

Note

Make sure you have Npm, Node, and Git installed.

Create a '_base.scss' file and import the base style of the framework:

// _base.scss file
// import the basic style of the framework
@forward '~codyhouse-framework/main/assets/css/base';

Make a copy of the framework 'custom-style' folder and '_custom-style.scss' file and paste it in your project. The SCSS files contained in the folder are used to set the custom style (e.g., buttons and forms) of your project.

In your 'style.scss' file, import the '_base.scss' and '_custom-style.scss' files.

@use 'base' as *;
@use 'custom-style';

Compile the 'style.scss' file to 'style.css' using your 'vue.config.js' file.

Lastly, include the 'util.js' file of the framework: it contains utility functions and polyfills that we use when creating the components.

In your 'index.html' file, add the following script tag:

<script src="https://unpkg.com/codyhouse-framework/main/assets/js/util.js"></script>

Learn more about using the Framework with vue.js in this blog article:

📝 Using the CodyHouse components with Vue.js

Using CodyFrame with React.js #

Install the framework via npm:

# Using npm
npm i codyhouse-framework

# Using Yarn
yarn add codyhouse-framework

Note

Make sure you have Npm, Node, and Git installed.

Create a '_base.scss' file and import the base style of the framework:

// _base.scss file
// import the basic style of the framework
@forward '~codyhouse-framework/main/assets/css/base';

Make a copy of the framework 'custom-style' folder and '_custom-style.scss' file and paste it in your project. The SCSS files contained in the folder are used to set the custom style (e.g., buttons and forms) of your project.

In your 'style.scss' file, import the '_base.scss' and '_custom-style.scss' files.

@use 'base' as *;
@use 'custom-style';

Compile the 'style.scss' file to 'style.css' using your 'webpack.config.js' file.

Lastly, include the 'util.js' file of the framework: it contains utility functions and polyfills that we use when creating the components.

In your 'index.html' file, add the following script tag:

<script src="https://unpkg.com/codyhouse-framework/main/assets/js/util.js"></script>

Learn more about using the Framework with react.js in this blog article:

📝 Using the CodyHouse components with React

Using CodyFrame with Gatsby #

Download the Gatsby starter from GitHub:

Gatsby + CodyHouse Starter ↗

Using CodyFrame with Nuxt #

Learn how to import CodyFrame into a Nuxt project:

https://youtu.be/ufMByFlIWck

or download the Nuxt starter template from GitHub:

Nuxt + CodyHouse Starter ↗

All Others #

For any other CMS/back-end languge, select one of the following options based on your project configuration.

Import as npm Module #

If you use npm in your project, import CodyFrame as an external module. Follow the 'Import CodyFrame as npm module' section.

Import the SCSS files of CodyFrame #

If you use SASS in your project, follow these steps:

  1. Download CodyFrame on GitHub;
  2. Import the 'main/assets/css' folder and the 'util.js' file in your project;
  3. Compile the 'style.scss' to the 'style.css' file.

Import via CDN #

Alternatively, you can import via CDN the CSS and JS of the framework.

<head>
  <link rel="stylesheet" href="https://unpkg.com/codyhouse-framework/main/assets/css/style.min.css">
</head>
<body>
  <!-- ... -->
<script src="https://unpkg.com/codyhouse-framework/main/assets/js/util.js"></script>
</body>
</html>

Supported browsers #

CodyFrame supports the latest, stable releases of all major browsers.

Get started with Accessibility →

A video is being shown

Rename Project

Project duplicated

Project created

Globals imported

Preview of the components Preview of the components

Unlock all the Pro features

  • 404 components
  • 10 premium templates
  • Future updates
  • Unlimited projects
  • One-click project export
  • One-time payment, lifetime access

There was an error while trying to export your project. Please try again or contact us.