The CodyHouse's framework is a system of SCSS globals. It's a great starting point to set up your own design system.
Download the Framework on Github
or install the framework in your Node.js powered apps with the npm package:
npm i codyhouse-framework
The framework serves three main purposes:
- Template - it provides you with a CSS template to speed up the first steps of setting up the style of a web project.
- Responsive - it includes smart rules that take care of several responsiveness aspects.
- Design system - it simplifies the process of creating the base of your design system.
The framework is composed of:
- A collection of SCSS files that compile into a _global.scss file. Make sure to import this style before your own;
- A util.js file with some utility functions that are used in the CodyHouse components. Make sure to import this before the component script file.
codyhouse-framework/ └── main/ ├── assets/ │ ├── css/ │ │ ├── globals/ │ │ │ ├── _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").className += " js";</script>
The framework includes a Gulp file with some basic configurations needed to run a web project based on the framework.
To use this Gulp configuration file, once you have downloaded the framework, make sure to run the following commands in your command line:
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.
If you are new to Gulp, take a look at this beginners guide.