🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Templates

The CodyHouse templates are accessible, progressively enhanced, HTML, CSS, JS starter kits based on CodyFrame.


🔍 On this page:

  1. Getting Started
  2. Folder Structure
  3. Style Customizations
  4. Components
  5. CSS Utility Classes
  6. Icons
  7. Progressive enhancement
  8. Supported Browsers

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

⚠️ Note: if you don't have npm installed you can get it from the npmjs website.

4) Run the following command to launch your project on a development server.

npm run gulp watch

⚠️ Note: 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 JS files and 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 are a Pro member, you can include any of our free and pro components.

More info on how to import new components on our documentation page

CSS Utility Classes #

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

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';
}

2) 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 #

The template supports the latest, stable releases of all major browsers (including IE11).

Since the templates use CSS custom properies, the Gulp configuration file takes care of creating a style fallback (style-fallback.css) version for browsers not supporting them (e.g., IE11).

A custom script (added in the <head> of each HTML file) is used to deliver only one file (style.css or style-fallback.css), according to the browser in use:

<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);}document.getElementsByTagName("html")[0].className += " ie";}
</script>

Please note: a slightly different visual experience may be provided for browsers not supporting CSS custom properties.

If you need to report a bug releated to one of our templates, please use the template GitHub folder (link can be found on the template info page).

✅ Project duplicated

✅ Project created

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