CodyFrame

Quick start

If you prefer working with SASS, create a style.scss file and import the CodyFrame files:

@use 'reset'; // ← reset
@use 'config' as *; // ← customize the framework

// ↓ copy & modify these templates locally
@use 'typography';
@use 'icons';
@use 'buttons';
@use 'forms';

// ↓ import here the CodyHouse components
@use 'components/_1_header' as *;
@use 'components/_1_footer' as *;
// ...

@use 'util'; // ← utility classes

The _config.scss file is used to customize the framework (i.e., to edit the breakpoints or to change the spacing scale).

Example:

@use 'reset';
@use 'config' as * with (
  $breakpoints: (
    'sm': '48rem',
    'md': '64rem',
    'lg': '80rem'
  ),
  $font-family: (
    'primary': 'Inter, system-ui, sans-serif'
  ),
  $font-size: (
    'sm': '0.8125rem',
    'base': '1rem',
    'md': '1.1875rem',
    'lg': '1.4375rem',
    '2xl': '2.0625rem'
  )
);

// ...

Check the documentation for a full list of configuration options.

If you prefer working with CSS (without a preprocessor):

@import 'https://unpkg.com/codyframe/main/css/reset.css'; /* ← reset */

/* ↓ copy & modify these templates locally */
@import 'typography.css';
@import 'icons.css';
@import 'buttons.css';
@import 'forms.css';

/* ↓ import here the CodyHouse components */
@import 'components/_1_header.css';
@import 'components/_1_footer.css';
/* ... */

@import 'https://unpkg.com/codyframe/main/css/util.css'; /* ← utility classes */

To install the node module:

# using npm
npm i codyframe

# using Yarn
yarn add codyframe

If you install CodyFrame as npm module, import the reset, config, and util modules from the node package:

@use '../../../node_modules/codyframe/main/scss/reset';
@use '../../../node_modules/codyframe/main/scss/config' as *;

// ↓ copy & modify these templates locally
@use 'typography';
@use 'icons';
@use 'buttons';
@use 'forms';

// ↓ import here the CodyHouse components
@use 'components/_1_header' as *;
@use 'components/_1_footer' as *;
// ...

@use '../../../node_modules/codyframe/main/scss/util';

Documentation

Explore the full documentation on codyhouse.co →

Components

CodyHouse's components are accessible, progressively enhanced, HTML, CSS, JS components that work seamlessly with CodyFrame.

Explore the components →