πŸŽ‰ Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Framework

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

Some of the advantages of working with this framework:

  • ⚑️ lightweight (15KB minified and gzipped)
  • πŸ™Œ no need to override existing CSS rules
  • πŸ“± mobile-first
  • 🎨 create unique designs with total control
  • πŸ“– easy to learn

πŸ” On this page:

  1. Download
  2. Files included
  3. Progressive enhancement
  4. Using the framework with Gulp
  5. Using the framework with Webpack
  6. Using the framework with Wordpress
  7. Using the framework with Shopify
  8. Using the framework with Laravel Mix
  9. Using the framework with a SASS compiler
  10. Supported browsers

Download #

How to download and install CodyFrame.

npm #

πŸŽ₯ Import CodyFrame as npm module
πŸ• 5:10

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 basic style of the framework from the node module, then add your custom style using the custom style templates (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';

If you 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>

Github Repository #

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

If you want to use CodyFrame as a boilerplate for your next project, download it 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
Launch the Framework from the Github repo

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-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 #

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.

⚠️ The Gulp configuration file is set to compile 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). The script in the <head> 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>

⚠️ Important: To generate the style-fallback.css file, we use a modified version of the postcss-css-variables plugin:

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

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.

πŸŽ₯ Integrating the Components using Gulp
πŸ• 7:24

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 β†—


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

Make a copy of the style.scss file and rename it style-fallback.scss. You will need it for browsers not supporting CSS Custom properties (e.g., IE).

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, 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 = { 
  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">
<!-- 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 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' );

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>

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

Make a copy of the style.scss file and rename it style-fallback.scss. You will need it for browsers not supporting CSS Custom properties (e.g., IE).

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

mix.sass( 'resources/sass/style.scss', 'css');
mix.sass( 'resources/sass/style-fallback.scss', 'css') // style fallback
 .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">
<!-- 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 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:

  1. Set the tool to compile the style.scss to the style.css file.
  2. 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.


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 πŸ‘‰

βœ… Project duplicated

βœ… Project created

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