πŸŽ‰ 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 (8KB 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 Laravel Mix
  7. Using the framework with a SASS compiler
  8. Supported browsers

Download #

How to download and install CodyFrame.

npm #

Install the framework via npm:

# Using npm
npm i codyhouse-framework

# Using Yarn
yarn add codyhouse-framework

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>
  <!---------- πŸ‘‡ update this path according to your content structure -->
  <script src="../node_modules/codyhouse-framework/main/assets/js/util.js"></script>
</body>
πŸŽ₯ How to use CodyFrame with NPM
πŸ• 5:39

Github Repository #

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

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.scss: essential CSS rules and utility classes (We suggest you don't modify these files).
  2. _custom-style.scss: CSS templates you can use to create your bespoke style (e.g., buttons, forms, and colors).
  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/
    β”‚   β”‚   β”‚   β”œβ”€β”€ _accessibility.scss
    β”‚   β”‚   β”‚   β”œβ”€β”€ _breakpoints.scss
    β”‚   β”‚   β”‚   β”œβ”€β”€ _buttons.scss
    β”‚   β”‚   β”‚   β”œβ”€β”€ _colors.scss
    β”‚   β”‚   β”‚   β”œβ”€β”€ _forms.scss
    β”‚   β”‚   β”‚   β”œβ”€β”€ _grid-layout.scss
    β”‚   β”‚   β”‚   β”œβ”€β”€ _icons.scss
    β”‚   β”‚   β”‚   β”œβ”€β”€ _mixins.scss
    β”‚   β”‚   β”‚   β”œβ”€β”€ _reset.scss
    β”‚   β”‚   β”‚   β”œβ”€β”€ _shared-styles.scss
    β”‚   β”‚   β”‚   β”œβ”€β”€ _spacing.scss
    β”‚   β”‚   β”‚   β”œβ”€β”€ _typography.scss
    β”‚   β”‚   β”‚   β”œβ”€β”€ _util.scss
    β”‚   β”‚   β”‚   β”œβ”€β”€ _visibility.scss
    β”‚   β”‚   β”‚   └── _z-index.scss
    β”‚   β”‚   │── custom-style/
    β”‚   β”‚   β”‚   β”œβ”€β”€ _buttons.scss
    β”‚   β”‚   β”‚   β”œβ”€β”€ _colors.scss
    β”‚   β”‚   β”‚   β”œβ”€β”€ _forms.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.

<script>
  function addCss(path) {
    var link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.href = path;
    document.head.appendChild(link);
  }
  if('CSS' in window && CSS.supports('color', 'var(--color-var)')) {
    addCss('assets/css/style.css');
  } else {
    addCss('assets/css/style-fallback.css');
  }
</script>
<noscript>
  <link rel="stylesheet" href="assets/css/style-fallback.css">
</noscript>

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 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 script in the <head> of your index.html file to deliver only one file, according to whether the browser supports CSS variables or not.

<script>
  function addCss(path) {
    var link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.href = path;
    document.head.appendChild(link);
  }
  if('CSS' in window && CSS.supports('color', 'var(--color-var)')) {
    addCss('assets/css/style.css');
  } else {
    addCss('assets/css/style-fallback.css');
  }
</script>
<noscript>
  <link rel="stylesheet" href="assets/css/style-fallback.css">
</noscript>

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

<script>
  function addCss(path) {
    var link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.href = path;
    document.head.appendChild(link);
  }
  if('CSS' in window && CSS.supports('color', 'var(--color-var)')) {
    addCss('css/style.css');
  } else {
    addCss('css/style-fallback.css');
  }
</script>
<noscript>
  <link rel="stylesheet" href="css/style-fallback.css">
</noscript>

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 IE9+). 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