⚑️ Black Friday ends in 1 day - 50% off CodyHouse Pro Lifetime →

Projects

Progress value is 30%

Framework

Star

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

Some of the advantages of working with CodyFrame:

  • πŸ™Œ No need to override existing CSS rules
  • 🎨 CSS custom properties
  • πŸ“± mobile-first
  • πŸ“– easy to learn

πŸ” On this page:

  1. Download
  2. Import CodyFrame as npm module
  3. Files included
  4. Progressive enhancement
  5. Supported browsers
  6. CodyFrame v2 (legacy)
Using the framework with:
  1. Gulp
  2. PHP (Gulp)
  3. Webpack
  4. Wordpress
  5. Shopify
  6. Laravel Mix
  7. SASS compiler
  8. Vue.js
  9. React.js
  10. Gatsby
  11. Nuxt
  12. All others

Download #

πŸŽ₯ Download CodyFrame on Github
πŸ• 3:00

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

2. 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';
@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
πŸ• 2:39
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

Progressive enhancement #

CodyHouse UI follows the principle of progressive enhancement.

If you are using our 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 check if JavaScript is enabled and apply additional style accordingly. If you don't include the script, part of the components style won't be visible.


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

2. 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';
@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 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';
@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

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

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: 'file-loader',
          options: {
            name: 'assets/css/[name].css',
          }
        }, 
        {
          loader: 'extract-loader'
        },
        {
          loader: 'css-loader?-url'
        }, 
        {
          loader: 'postcss-loader',
          options: {
            plugins: function (loader) {
              return [require('autoprefixer')];
            }
          }
        }, 
        {
          loader: 'sass-loader',
          options: {
            implementation: require('sass'),
          },
        }
      ],
      }
    ]
  }
  // ...
};

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.

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

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
β”‚   β”‚    └── _base.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

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

@use './assets/css/base';
@use './assets/css/custom-style';
@use './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 import-glob-loader and use webpack-merge-and-include-globally to merge all your JS files in a single 'frontend.js' file:

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: {
              implementation: require('sass'),
            }
          }
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        enforce: 'pre',
        loader: 'import-glob-loader',
        options: {
          test: 'use'
        }
      }
    ]
  },
  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',
        ]
      }
    }),
  ]
};

Optionally, you can include PurgeCSS in your webpack configuration file to 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'],
  // ...
  module: {
    rules: [
      { 
      test: /\.s[ac]ss$/i,
      use: [
        // additional loaders here
        {
          loader: 'postcss-loader',
          options: {
            plugins: function (loader) {
              return [require('autoprefixer'), purgecss(purgecssOpts)];
            }
          }
        }, 
        // additional loaders here
      ],
      }
    ]
  }
  // ...
};

We suggest you ignore the custom style and the components when running PurgeCSS:

@use './assets/css/base';
/*! purgecss start ignore */
@use './assets/css/custom-style';
@use './assets/css/components/**/*.scss';
/*! purgecss end ignore */

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';

// 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' ;
@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

We suggest you ignore the custom style and the components style when running PurgeCSS:

@use 'base' ;

/*! purgecss start ignore */
@use 'custom-style';
@use 'components/**/*.scss';
/*! purgecss end ignore */

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';

// 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' ;
@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

We suggest you ignore the custom style and the components style when running PurgeCSS:

@use 'base' ;

/*! purgecss start ignore */
@use 'custom-style';
@use 'components/**/*.scss';
/*! purgecss end ignore */

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 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';
@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'; 
@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)
  ]
});

We suggest you ignore the custom style and the components style when running PurgeCSS:

@use 'base' ;

/*! purgecss start ignore */
@use 'custom-style';
@use 'components/**/*.scss';
/*! purgecss end ignore */

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' 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 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';
@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 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';
@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


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.

We don't support IE11.

Get started with Accessibility πŸ‘‰

Project duplicated

Project created

Globals imported

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