https://github.com/codyhouse/codyframe
The intuitive CSS framework.
https://github.com/codyhouse/codyframe
css css-framework framework html responsive sass scss utility-classes
Last synced: 3 months ago
JSON representation
The intuitive CSS framework.
- Host: GitHub
- URL: https://github.com/codyhouse/codyframe
- Owner: codyhouse
- License: mit
- Created: 2023-02-10T11:18:35.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-24T12:32:51.000Z (5 months ago)
- Last Synced: 2025-03-29T03:03:01.352Z (3 months ago)
- Topics: css, css-framework, framework, html, responsive, sass, scss, utility-classes
- Language: CSS
- Homepage: https://codyhouse.co
- Size: 104 KB
- Stars: 68
- Watchers: 9
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CodyFrame
The intuitive CSS framework
## Quick start
If you prefer working with SASS, create a style.scss file and import the CodyFrame files:
```scss
@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:
```scss
@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](https://codyhouse.co/ds/docs/framework) for a full list of configuration options.
If you prefer working with CSS (without a preprocessor):
```css
@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:
```sh
# 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:
```scss
@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 →](https://codyhouse.co/ds/docs/framework)
## Components
CodyHouse's components are accessible, progressively enhanced, HTML, CSS, JS components that work seamlessly with CodyFrame.
[Explore the components →](https://codyhouse.co/ds/components)