Framework

The CodyHouse's framework is a system of SCSS globals. It's a great starting point to set up your own design system, and it includes the CSS utility classes and JS shared functions used in the CodyHouse components.

Download the Framework on Github

or install the framework in your Node.js powered apps with the npm package:

npm i codyhouse-framework

Getting started #

The framework includes a Gulp file with some basic configurations needed to run a web project based on the framework.

To start a web project using this Gulp configuration file, navigate to the framework folder and run the following commands:

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.

The idea behind the Framework #

The framework serves three main purposes:

  1. Template - it provides you with a CSS template to speed up the first steps of setting up the style of a web project.
  2. Responsive - it includes smart rules that take care of several responsiveness aspects.
  3. Design system - it simplifies the process of creating the base of your design system.

The framework is composed of:

codyhouse-framework/
└── main/
    ├── assets/
    │   ├── css/
    │   │   ├── globals/
    │   │   │   ├── _accessibility.scss
    │   │   │   ├── _alignment.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
    │   │   │   ├── _visibility.scss
    │   │   │   └── _z-index.scss
    │   │   ├── _globals.scss
    │   │   ├── style.css
    │   │   └── style.scss
    │   └── js/
    │       └── util.js
    └── index.html

Supported browsers #

The Framework supports the latest, stable releases of all major browsers. On Windows, we support IE 9+ / Microsoft Edge.

Progressive enhancement #

The Framework and the Components are built following the principle of progressive enhancement. Please 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.