Go to homepage

Projects /

Templates

The CodyHouse templates are accessible, progressively enhanced, HTML, CSS, JS starter kits available for CodyFrame CSS and Tailwind CSS.

Getting Started #

To get started with the template:

  1. Unzip the template folder.
  2. Open your command line, and navigate to the root directory of your template (use cd /path/to/template on macOs or pushd /path/to/template on Windows).
  3. In the command line, run the following command to install the node modules:
npm install
  1. Run the following command to launch your project on a development server.
npm run gulp watch

Note

If you don't have npm installed you can get it from the npmjs website.

If you receive error messages while trying to run the npm install command, you may need to install Git on your device first. You can download Git on the Git website.

If you prefer not to use the command line, grab the ready-to-use HTML/CSS/JS files included in the source files.

Folder Structure #

Here's the template structure:

├── main/
├── gulpfile.js
└── package.json

The gulpfile.js file is the configuration file used to compile SCSS into CSS, combine all component's JS files, compress them, and reload the browser when you change an HTML/SCSS/JS file.

The main/ folder is where all the HTML/CSS/JS files are stored:

main/
  ├── assets/
  │   ├── css/
  │   │   │── components/
  │   │   │── custom-style/
  │   │   ├── _custom-style.scss
  │   │   ├── style.scss
  │   │   ├── style-fallback.css
  │   │   └── style.css
  │   ├── js/
  │   │   ├── components/
  │   │   ├── scripts.js
  │   │   └── scripts.min.js
  │   │
  │   └── img/
  │
  ├── index.html
  └── /* all .html files */

The assets/css/custom-style folder contains the CSS templates you can use to create your bespoke style (e.g., buttons, forms, and colors).

The assets/css/components and assets/js/components folders contain the SCSS/JS code for each of the components used to build the template.

The assets/css/style.css and assets/js/script.js are production-ready CSS and JS files.

Style Customizations #

The assets/css/custom-style folder is where all the template bespoke style is stored:

  • Colors + Color Themes;
  • Buttons + Forms style;
  • Typography and Spacing.

Colors #

The template may include multiple color themes. Inspect the assets/css/custom-style/_colors.scss file for more information about the themes included:

// --------------------------------

// ⚠️👇 this template requires 2 color themes = [default/dark]
// (START) Global Editor code https://codyhouse.co/ds/globals/colors

// --------------------------------

Check the colors documentation page for more information on how colors work in CodyFrame. You can use the color editor to create a custom color palette for your template.

Buttons #

The style of the buttons is defined in the assets/css/custom-style/_buttons.scss file.

Check the buttons documentation page for more information on how buttons work in CodyFrame. You can use the buttons editor to create your custom buttons compatible with the template.

Typography #

The template may include Google Fonts imported as <link> in the <head> of each HTML file.

All the typography style is defined in the assets/css/custom-style/_typography.scss file.

Check the typography documentation page for more information on how to set your custom typography rules.

Spacing #

The spacing scale is defined in the assets/css/custom-style/_spacing.scss file.

Check the spacing documentation page for more information on how spacing works in CodyFrame.

Forms #

The style of the form elements is defined in the assets/css/custom-style/_forms.scss file.

Check the forms documentation page for more information on how form elements work in CodyFrame.

Components #

The template is built using selected components from the CodyHouse UI Framework.

Inside the assets/css/components and assets/js/components folders, you will find the SCSS/JS files of the components.

If you want to learn more about a component (e.g., guidelines and customization options), go to the component's info page.

You will find the name of the component in its SCSS/JS file (e.g., 'accordion' in the example below):

/* -------------------------------- 

File#: _1_accordion
Title: Accordion
Descr: Create stacked sections of content and allow the user to expand/collapse them
Usage: codyhouse.co/license

-------------------------------- */

You are not limited to using the components included in the template. Feel free to integrate any of the free components of the UI Framework. If you purchased the premium components package, you can include any of our free and pro components.

CSS Utility Classes #

All templates are based on CodyFrame, which means you can use any of the framework utility classes.

Icons #

In the template, we use inline SVG icons; but you can switch to a different integration option (more info below).

⭐️ All icons are from the Nucleo icon set.

Icon Font

  1. Open the css/custom-style/_icons.scss file, import the font-face and set the font-family property inside the .icon class:
@font-face {
  font-family: 'codyframe';
  src: url('../fonts/codyframe.eot');
  src: url('../fonts/codyframe.eot') format('embedded-opentype'),
    url('../fonts/codyframe.woff2') format('woff2'),
    url('../fonts/codyframe.woff') format('woff'),
    url('../fonts/codyframe.ttf') format('truetype'),
    url('../fonts/codyframe.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

.icon {
  // make sure to include the font-family declaration if you are using an icon font
  font-family: 'codyframe';
}
  1. In the HTML file, replace the <svg> element with your icon font element (make sure to preserve <svg> custom classes and attributes). Here's an example:
<!-- inline svg 👇 -->
<svg class="icon select__icon" aria-hidden="true" viewBox="0 0 16 16">
  <!-- svg code here -->
</svg>

<!-- iconfont 👇 -->
<i class="icon icon--arrow-down select__icon" aria-hidden="true"></i>

Symbols

In the HTML file, replace the <svg> element with your symbol element (make sure to preserve <svg> custom classes and attributes). Here's an example:

<!-- inline svg 👇 -->
<svg class="icon select__icon" aria-hidden="true" viewBox="0 0 16 16">
  <!-- svg code here -->
</svg>

<!-- symbol 👇 -->
<svg class="icon select__icon" aria-hidden="true">
  <use href="#icon-germany" xlink:href="#icon-germany"/>
</svg>

Progressive Enhancement #

The template is built following the principle of progressive enhancement.

For this reason, in the <head> of each HTML file, we include the following script:

<script>document.getElementsByTagName("html")[0].className += " js";</script>

The script is used to add the .js class to the html element if JavaScript is enabled, and apply additional style accordingly. 

Supported Browsers #

All templates support the latest, stable releases of all major browsers.

A video is being shown

Rename Project

Project duplicated

Project created

Globals imported

Preview of the components Preview of the components

Unlock all the Pro features

  • 404 components
  • 10 premium templates
  • Future updates
  • Unlimited projects
  • One-click project export
  • One-time payment, lifetime access

There was an error while trying to export your project. Please try again or contact us.