# CodyFrame

A lightweight front-end framework for building accessible, bespoke interfaces.

[Explore the documentation on codyhouse.co](https://codyhouse.co/ds/get-started)

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](https://codyhouse.co/ds/components). Make sure to import this file before the script file of the components.

Some of the advantages of working with CodyFrame:

* ⚡️ lightweight (**20KB** minified and gzipped - before running PurgeCSS)
* 🙌 no need to override existing CSS rules
* 📱 mobile-first
* 🎨 create unique designs with total control
* 📖 easy to learn
* 💼 a library of [accessible components](https://codyhouse.co/ds/components)

```
codyhouse-framework/
└── main/
    ├── assets/
    │   ├── css/
    │   │   ├── base/*
    │   │   │── custom-style/
    │   │   │   ├── _buttons.scss
    │   │   │   ├── _colors.scss
    │   │   │   ├── _forms.scss
    │   │   │   ├── _icons.scss
    │   │   │   ├── _shared-styles.scss
    │   │   │   ├── _spacing.scss
    │   │   │   ├── _typography.scss
    │   │   │   └── _util.scss
    │   │   ├── _base.scss
    │   │   ├── _custom-style.scss
    │   │   ├── style-fallback.css
    │   │   ├── style.css
    │   │   └── style.scss
    │   └── js/
    │       └── util.js
    └── index.html
```

## Progressive enhancement

If you're using the Components, make sure to include the following script in the `<head>` of your document:

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

## Gulp

CodyFrame includes a Gulp configuration file. To start a project that runs on Gulp, once you have downloaded the source files, navigate to the framework folder, and run the following commands in your command line:

```
npm install
npm run gulp watch
```

The first command will install the modules the framework requires for compiling SCSS into CSS; the second will launch your project on a development server.

⚠️ **Note:** if you receive error messages while trying to run the `npm install` command, you may need to download and install [Git](https://git-scm.com) first.

**If you need to support browsers where CSS Custom Properties have not been implemented (e.g. IE11),** use the `npm run gulp watch-ie` command instead.

When using this command, the gulp configuration file is set to compile the SCSS into two separate CSS files: style.css includes the CSS variables; in the style-fallback.css file, the CSS variables are replaced by their fallbacks (generated by the PostCSS plugin). Make sure to uncomment the following script in the of the index.html file: it is used to deliver only one file, according to whether the browser supports CSS variables or not.

```html
<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 use the Framework with Webpack](https://codyhouse.co/ds/docs/framework#webpack)

## Component Library

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

You can use the Gulp configuration file to auto-import the .scss of the CodyHouse's Components.

[Learn more about importing the CSS and JS of the CodyHouse's Components](https://codyhouse.co/ds/docs/framework#import-css-components)

[Explore the Components](https://codyhouse.co/ds/components)

## Global Editors

The Global Editors are visual tools that allow you to set the style of typography elements, color themes, spacing rules, buttons, and forms directly in the browser. They generate SCSS code that is compatible with CodyFrame.

Explore the Editors:

* **Colors** [codyhouse.co/ds/globals/colors](https://codyhouse.co/ds/globals/colors)
* **Typography** [codyhouse.co/ds/globals/typography](https://codyhouse.co/ds/globals/typography)
* **Spacing** [codyhouse.co/ds/globals/spacing](https://codyhouse.co/ds/globals/spacing)
* **Buttons** [codyhouse.co/ds/globals/buttons](https://codyhouse.co/ds/globals/buttons)
* **Forms** [codyhouse.co/ds/globals/forms](https://codyhouse.co/ds/globals/forms)
* **Shared Styles** [codyhouse.co/ds/globals/shared-styles](https://codyhouse.co/ds/globals/shared-styles)

## Extensions

Explore our autocomplete extensions for VSCode, Sublime Text and Atom:

[codyhouse.co/ds/docs/extensions](https://codyhouse.co/ds/docs/extensions)
