CodyFrame v2.9

Download
Import CodyFrame as npm module
Files included
Progressive enhancement
Use with Gulp
Use with Webpack
Use with Wordpress
Use with Shopify
Use with Laravel Mix
Use with SASS compiler
Use with Vue.js
Use with React.js
Use with Gatsby
Supported browsers

CodyFrame is a lightweight front-end framework for building accessible, bespoke interfaces.

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

Download #

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 modules required for compiling SCSS into CSS.

npm install

⚠️ Note: if you don't have npm installed you can get it from the npmjs website.

2) Launch your project on a development server.

npm run gulp watch

⚠️ Note: if you receive error messages while trying to run the npm install command, you may need to install Git on your device first. You can download Git on the Git website.

Launch the Framework from the Github repo

Import CodyFrame as npm module #

Install the framework via npm:

# Using npm
npm i codyhouse-framework

# Using Yarn
yarn add codyhouse-framework

⚠️ Note: if you don't have npm installed you can get it from the npmjs website.

Import the _base.scss file of the framework from the node module, then add your custom style using the custom style templates (the SCSS partials included in the 📁custom-style folder of the framework).

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

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

To use the CodyHouse 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:

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 component script file.

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-fallback.css
    │   │   ├── style.css
    │   │   └── style.scss
    │   └── js/
    │       ├── scripts.js
    │       ├── scripts.min.js
    │       └── util.js
    └── index.html

Progressive enhancement #

CodyFrame and the Components are built following the principle of progressive enhancement.

If you are using the CodyHouse 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.

Using the Framework with Gulp #

When using the gulp watch task, the Gulp file included in CodyFrame runs the following tasks:

1) Reload the browser

It takes care of reloading your browser when you change an HTML/SCSS/JS file.

2) Compile SCSS to CSS

Each time one of your .scss files is updated, Gulp converts all your SCSS code to compressed CSS code; the autoprefixer module is used to add vendor prefixes where required.

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

When using this command, the gulp configuration is set to compile the SCSS into two separate CSS files: style.css includes the CSS custom properties; 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 <head> of the index.html file: it 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>

3) Import the CSS of the CodyHouse Components #

If you want Gulp to auto-import the .scss of the CodyHouse Components into your style.scss file, create a 📁components folder inside 📁main/assets/css. In this new folder, create a new .scss file for each component.

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

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

To import the components in the right order (the order is affected by component dependencies), we recommend using the file names specified in each component .scss file:

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

File#: _1_accordion

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

The final structure will look like this:

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-fallback.css
├── style.css
└── style.scss

4) Combine and compress JS files

To auto-compile multiple JS files (util.js + components) into a single one (script.js), create a 📁components folder inside 📁main/assets/js. In this new folder, create a new .js file for each component.

As we did with the SCSS files, we suggest using 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
├── script.js
├── script.min.js
└── util.js

For detailed info on how CodyFrame Gulp file works, please refer to our article:

📝 Understanding the CodyHouse Framework Gulp configuration file.

PurgeCSS

The Gulp configuration file comes with a gulp dist command that you can use to create a distribution folder. This command takes care of:

Compressing your style file and purge it using the PurgeCSS plugin; this will remove the framework's unused CSS classes. The file is then copied to the dist folder;
Compressing your js files and copy them to the dist folder;
Coping your assets/html files to the dist folder.

You can run the command with:

npm run gulp dist

Using Gulp in a PHP project #

If you are running a PHP project, you will need to modify the gulpfile.js file if you want your project to reload when you make changes to it.

First, install the gulp-connect-php module running the following command (making sure your command line prompt is at the root of your project folder):

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 and purge it using the PurgeCSS plugin; this will remove the framework's unused CSS classes. The file is then copied to the dist folder;
Compressing your js files and copy them to the dist folder;
Coping your assets/php files to the dist folder.

You can run the command with:

npm run gulp dist

Using the Framework with Webpack #

To use CodyFrame with Webpack, first install it using npm.

Copy the 📁custom-style folder (where you'll find the custom style templates) of the framework in your project, then import _base.scss (basic style) and _custom-style.scss in your style.scss file:

@import '~codyhouse-framework/main/assets/css/base';
@import './assets/css/custom-style';

If you need to support older browsers where CSS Custom properties have not been implemented (e.g., IE), make a copy of the style.scss file and rename it style-fallback.scss.

Your project 📁src folder structure should be:

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

To compile the framework SCSS, you will need the file-loader, the extract-loader and the postcss-loader with Autoprefixer.

For the style-fallback.scss file, you will also need postcss-calc and a modified version of postcss-css-variables. Your webpack config should include the following rule (or similar):

module.exports = { 
  // 👇 remove './src/style-fallback.scss' from the list below if you don't need to support older browsers (e.g., IE11) where CSS Custom Variables have not been implemented
  entry: ['./src/index.js', './src/style.scss', './src/style-fallback.scss'],
  // ...
  module: {
    rules: [
      { 
      test: /\.s[ac]ss$/i,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: 'assets/css/[name].css',
          }
        }, 
        {
          loader: 'extract-loader'
        },
        {
          loader: 'css-loader?-url'
        }, 
        {
          loader: 'postcss-loader',
          options: {
            plugins: function (loader) {
              return loader.resourcePath.indexOf('style.') > -1
              ? [require('autoprefixer')]
              : [require('autoprefixer'), require('postcss-css-variables'), require('postcss-calc')];
            }
          }
        }, 
        {
          loader: 'sass-loader'
        }
      ],
      }
    ]
  }
  // ...
};

⚠️ Important: make sure to install the modified version of the postcss-css-variables plugin. In your package.json add:

{
  "devDependencies": {
    // ...
    "postcss-css-variables": "git+https://github.com/CodyHouse/postcss-css-variables",
    // ...
  }
}

👉 This webpack configuration compiles the SCSS file into two separate CSS files: style.css includes the CSS custom properties; in the style-fallback.css file, the CSS variables are replaced by their fallbacks (generated by the PostCSS plugin). Include the following code in the <head> of your index.html file 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">
<!-- Include the script below if you need to support browsers where CSS Variables have not been implemented (e.g., IE11) -->
<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>

PurgeCSS

You can include the PurgeCSS plugin in your webpack configuration file. This will remove the unused CSS classes of the framework.

Use the PurgeCSS plugin when using the Webpack postCSS loader:

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

module.exports = { 
  entry: ['./src/index.js', './src/style.scss', './src/style-fallback.scss'],
  // ...
  module: {
    rules: [
      { 
      test: /\.s[ac]ss$/i,
      use: [
        // additional loaders here
        {
          loader: 'postcss-loader',
          options: {
            plugins: function (loader) {
              return loader.resourcePath.indexOf('style.') > -1
              ? [require('autoprefixer'), purgecss(purgecssOpts)]
              : [require('autoprefixer'), require('postcss-css-variables'), require('postcss-calc'), purgecss(purgecssOpts)];
            }
          }
        }, 
        // additional loaders here
      ],
      }
    ]
  }
  // ...
};

How to import the CodyHouse Components

To automatically import the .scss and .js of the CodyHouse components, create a 📁components folder inside 📁src/assets/css, and a 📁components folder inside 📁src/assets/js. Then create a .scss and .js file for each component.

To import the components in the right order (the order is affected by component dependencies), we recommend using the file names specified in each component .scss/.js file:

src/
├── 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
│   └── js/
│        └── components/
│             ├── _1_accordion.js
│             ├── _1_alert.js
│             ├── _1_back-to-top.js
│             ├── _2_menu-bar.js
│             └── _3_lightbox.js
├── index.js
├── style.scss
└── style-fallback.scss

In your style.scss and style-fallback.scss files, add the following line of code:

@import '~codyhouse-framework/main/assets/css/base';
@import './assets/css/custom-style';
@import 'assets/css/components/**/*.scss'; // 👈import all the .scss files in the css/components/* folder

In your configuration file, update the CSS rule to use the node-sass-glob-importer, and use webpack-merge-and-include-globally to merge all your JS files in a single frontend.js file:

const globImporter = require('node-sass-glob-importer'); // 👈custom node-sass importer
const MergeIntoSingleFilePlugin = require('webpack-merge-and-include-globally'); // 👈 merge .js files together into single file

module.exports = { 
  // ...
  module: {
    rules: [
      { 
        test: /\.s[ac]ss$/i,
        use: [
          {
            // ...
          }, {
            loader: 'sass-loader',
            options: {   
              sassOptions: {
                importer: globImporter() // 👈 use glob syntax to import components .scss files
              }
            }
          }
        ],
      }
    ]
  },
  plugins: [
    new MergeIntoSingleFilePlugin({ // 👈  merge util.js and components .js files
      files: {
        "frontend.js": [
          'node_modules/codyhouse-framework/main/assets/js/util.js',
          'src/assets/js/components/**/*.js',
        ]
      }
    }),
  ]
};

Using the Framework with WordPress #

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.

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, move to the WP theme folder and install the node modules using the npm install command.

⚠️ Note: if you don't have npm installed you can get it from the npmjs website.

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

In the 📁css folder, copy the 📁custom-style folder (where you'll find the custom style templates) of the framework (you'll find it in 📁node_modules/codyhouse-framework/assets/css), then import _base.scss (basic style) and _custom-style.scss in your style.scss file:

@import '../../node_modules/codyhouse-framework/main/assets/css/base';
@import 'custom-style';

Your project 📁assets folder structure should be:

themeName/
└── assets/
    ├── css/
    │    ├── custom-style/
    │    ├── _custom-style.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');

IE support

If you need to support IE11 and below, modify the sass task in the gulpfile.js file:

gulp.task('sass', function() {
  return gulp.src(scssFilesPath)
  .pipe(sassGlob())
  .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
  .pipe(postcss([autoprefixer()]))
  .pipe(gulp.dest(cssFolder))
  .pipe(browserSync.reload({
    stream: true,
    notify: false
  }))
  .pipe(rename('style-fallback.css'))
  .pipe(postcss([cssvariables(), calc()]))
  .pipe(gulp.dest(cssFolder));
});

In the functions.php file, use the wp_prints_script hook to add a custom <script> element:

function codyframe_ie_support() {
  ?>
  <script>if(! ('CSS' in window) || !CSS.supports('color', 'var(--color-var)')) {var cfStyle = document.getElementById('codyframe-css');if(cfStyle) {var href = cfStyle.getAttribute('href');href = href.replace('style.css', 'style-fallback.css');cfStyle.setAttribute('href', href);}}</script>
  <?php
}
add_action( 'wp_print_scripts', 'codyframe_ie_support' );

Purge CSS

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

How to import the CodyHouse Components

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.

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

To import the components in the right order (the order is affected by component dependencies), we recommend using the file names specified in each component .scss/.js file:

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

      File#: _1_accordion 

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

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

@import '../../node_modules/codyhouse-framework/main/assets/css/base';
@import 'custom-style'; 
@import 'components/**/*.scss'; // 👈import all the .scss files in the css/components/* folder

Using the Framework 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: if you don't have npm installed you can get it from the npmjs website.

Inside your theme folder, create an 📁scss and 📁js folders.

In the 📁scss folder, copy the 📁custom-style folder (where you'll find the custom style templates) of the framework (you'll find it in 📁node_modules/codyhouse-framework/assets/css), then import _base.scss (basic style) and _custom-style.scss in your style.scss file:

@import '../../node_modules/codyhouse-framework/main/assets/css/base';
@import 'custom-style';

Your project folder structure should be:

themeName/
├── [all shopify directories]
├── assets/
├── scss/
│    ├── custom-style/
│    ├── _custom-style.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 #{' ... '} (sass built in method for escaping strings). You can read more about escaping liquid strings in this article.

Run the npm run gulp watch command to run the sass and scripts tasks. That will create, in the 📁assets folder, a style.css and a script.js.min files. Make sure to include those in your page.

IE Support

If you need to support IE11 and below, modify the sass task in the gulpfile.js file:

gulp.task('sass', function() {
  return gulp.src(scssFilesPath)
  .pipe(sassGlob())
  .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
  .pipe(postcss([autoprefixer()]))
  .pipe(rename('style.css.liquid')) // create a fallback style for IE
  .pipe(replace('"{{', '{{'))
  .pipe(replace('}}"', '}}'))
  .pipe(gulp.dest(cssFolder))
  .pipe(rename('style-fallback.css.liquid'))
  .pipe(postcss([cssvariables(), calc()]))
  .pipe(gulp.dest(cssFolder));
});

In the head of your theme, use the following code to switch between style.css and style-fallback.css:

<link id="codyframe" rel="stylesheet" href="{{ style.css | asset_url }}" />
<!-- 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>

PurgeCSS

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

How to import the CodyHouse Components

To automatically import the .scss and .js of the CodyHouse components, create a 📁components folder inside 📁scss, and a 📁components folder inside 📁js. Then create a .scss and .js file for each component.

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

To import the components in the right order (the order is affected by component dependencies), we recommend using the file names specified in each component .scss/.js file:

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

      File#: _1_accordion 

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

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

@import '../../node_modules/codyhouse-framework/main/assets/css/base';
@import 'custom-style'; 
@import 'components/**/*.scss'; // 👈import all the .scss files in the scss/components/* folder

Using the Framework with Laravel Mix #

Install CodyFrame using npm.

Copy the 📁custom-style folder (where you'll find the custom style templates) of the framework in your project 📁resources/sass folder, then import _base.scss (basic style) and _custom-style.scss in your style.scss file:

@import '~codyhouse-framework/main/assets/css/base';
@import 'custom-style';

If you need to support browsers where CSS Custom Variables have not been implemented (e.g., IE11), make a copy of the style.scss file and rename it style-fallback.scss.

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

mix.sass( 'resources/sass/style.scss', 'css');
// 👇 you will need this only if supporting older browsers (e.g., IE11)
mix.sass( 'resources/sass/style-fallback.scss', 'css')
 .options({
   postCss: [
     require('postcss-css-variables'),
     require('postcss-calc')
   ]
 });

⚠️ Important: make sure to install the modified version of the postcss-css-variables plugin. In your package.json add:

{
  "devDependencies": {
    // ...
    "postcss-css-variables": "git+https://github.com/CodyHouse/postcss-css-variables",
    // ...
  }
}

👉 This Laravel Mix configuration compiles the SCSS file into two separate CSS files: style.css includes the CSS custom properties; in the style-fallback.css file, the CSS variables are replaced by their fallbacks (generated by the PostCSS plugin). Include the following script in the <head> of your head.php file to deliver only one file, according to whether the browser supports CSS variables or not.

<link id="codyframe" rel="stylesheet" href="css/style.css">
<!-- Include the script below if you need to support browsers where CSS Variables have not been implemented (e.g., IE11) -->
<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>

PurgeCSS

You can include PurgeCSS in your Laravel Mix configuration file. This will 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)
  ]
});
// 👇 you will need this only if supporting older browsers (e.g., IE11)
mix.sass( 'resources/sass/style-fallback.scss', 'css') // style fallback
.options({
  postCss: [
    require('postcss-css-variables'),
    require('postcss-calc'),
    purgecss(purgeCSSOpts)
  ]
});

How to import the CodyHouse Components

To automatically import the .scss and .js of the CodyHouse 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.

To import the components in the right order (the order is affected by component dependencies), we recommend using the file names specified in each component .scss/.js file:

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

File#: _1_accordion

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

In your style.scss and style-fallback.scss files, add the following line of code:

@import '~codyhouse-framework/main/assets/css/base'; 
@import 'custom-style';
@import '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
    }]
  },
  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",
        ]
      }
    }),
  ]
});

Using the Framework with a SASS compiler #

You can use CodyFrame with any SCSS compiler tool.

Make sure to do the following:

Set the tool to compile the style.scss to the style.css file.
Use the starting template below (not the index.html file included in the framework):

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>document.getElementsByTagName("html")[0].className += " js";</script>
  <link rel="stylesheet" href="assets/css/style.css">
  <title>Title</title>
</head>
<body>
  
<script src="assets/js/util.js"></script> <!-- JS utility classes of the framework -->
<!-- your JS script goes here -->
</body>
</html>

⚠️ Important: if you use a SASS compiler tool, you won't provide a fallback for CSS Custom Properties. If you need to support IE, we suggest using Gulp.

Using the Framework with Vue.js #

To use CodyFrame with Vue.js, first install it using npm.

Copy the 📁custom-style folder (where you'll find the custom style templates) of the framework in the 📁src folder of your project, then import _base.scss (basic style) and _custom-style.scss in your style.scss file:

@import '~codyhouse-framework/main/assets/css/base';
@import 'custom-style';

You can now compile the style.scss file in style.css as you would typically do using your vue.config.js file.

As the last step, include the util.js file of the framework: this file 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 the Framework with React.js #

To use CodyFrame with React.js, first install it using npm.

@import '~codyhouse-framework/main/assets/css/base';
@import 'custom-style';

You can now compile the style.scss file in style.css as you would typically do using your webpack.config.js file.

As the last step, include the util.js file of the framework: this file 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 the Framework with Gatsby #

Download the Gatsby starter from GitHub:

Gatsby + CodyHouse Starter ↗

Supported browsers #

If used with Gulp, Webpack or Laravel Mix, CodyFrame supports the latest, stable releases of all major browsers (including IE11). If used with a SASS compiler tool, CodyFrame supports all modern browsers (but not IE).

Get started with Accessibility 👉

Quick Links

Components

Docs

Globals

Projects

CodyFrame v2.9

Download #

Import CodyFrame as npm module #

Files included #

Progressive enhancement #

Using the Framework with Gulp #

1) Reload the browser

2) Compile SCSS to CSS

3) Import the CSS of the CodyHouse Components #

4) Combine and compress JS files

PurgeCSS

Using Gulp in a PHP project #

Using the Framework with Webpack #

PurgeCSS

How to import the CodyHouse Components

Using the Framework with WordPress #

IE support

Purge CSS

How to import the CodyHouse Components

Using the Framework with Shopify #

IE Support

PurgeCSS

How to import the CodyHouse Components

Using the Framework with Laravel Mix #

PurgeCSS

How to import the CodyHouse Components

Using the Framework with a SASS compiler #

Using the Framework with Vue.js #

Using the Framework with React.js #

Using the Framework with Gatsby #

Supported browsers #

Cookie Compliance