The intuitive CSS framework
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 classesThe _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 codyframeIf 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';Explore the full documentation on codyhouse.co →
CodyHouse's components are accessible, progressively enhanced, HTML, CSS, JS components that work seamlessly with CodyFrame.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent