πŸŽ‰ 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 that are built on top of 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 #

Here's the steps to follow 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 comman (this will install the node modules required for compiling SCSS into CSS).

npm install

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

4) 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.

Templates also come with ready-to-use HTML/CSS/JS files, if you prefer not to use the command line.

Folder Structure #

Here's how our templates are structured:

β”œβ”€β”€ 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 the ready-to-use 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 and forms style;
  • Typography and spacing.

Colors #

CodyHouse templates come with five different color themes:

  • Base color theme (default)
  • dark-1 color theme (applied using the data-theme="dark-1" attribute)
  • dark-2 color theme (applied using the data-theme="dark-2" attribute)
  • light-1 color theme (applied using the data-theme="light-1" attribute)
  • light-2 color theme (applied using the data-theme="light-2" attribute)

All color themes and color variables are defined in the πŸ“assets/css/custom-style/_colors.scss file.

You can find more info on how to define color themes and color variables on the Colors documentation page.

⚠️Note: if you are using the Colors Global editor to create your custom color palette, make sure you define the five color themes listed above.

Buttons #

All buttons style is defined in the πŸ“assets/css/custom-style/_buttons.scss file. The .btn class is the one used to give the defaut style to all buttons. Four different variations are available:

  • .btn--primary
  • .btn--subtle
  • .btn--accent
  • .btn--contrast

You can find more info on how to customize your buttons on the Buttons documentation page.

⚠️Note: if you are using the Buttons Global editor to create your buttons custom style, make sure to define all the four button variations listed above.

Typography #

CodyHouse templates use Google Fonts imported as <link> in the <head> of each HTML file.

All typography style is defined inside the πŸ“assets/css/custom-style/_typography.scss file.

You can find more info on how to customize the typography scale and change font-family on the Typography documentation page. You can find a complete list of typography utility classes on the Utility Classes documentation page.

Spacing #

In CodyHouse templates, spacing is controlled using a list of CSS custom properies (--space-{size}). You can use the πŸ“assets/css/custom-style/_spacing.scss file to modify the default scale variables.

You can find a complete list of the spacing variables and how to define your custom spacing scale on the Spacing documentation page. Those spacing variables are used to define all margin and padding utility classes.

Forms #

Forms style is defined inside the πŸ“assets/css/custom-style/_forms.scss file. You can find more info on customizing your form elements on the Forms documentation page.

Components #

CodyHouse templates are built using a selected group of CodyHouse components. Inside the πŸ“assets/css/components and πŸ“assets/js/components folders, you can find a SCSS/JS file for each of the used components.

If you want to read more about each component (e.g., customization options), go to the component info page. The link to each info page is:

https://codyhouse.co/ds/components/info/{component-name}

Where the {component-name} variable is the name of the component you can find at the top of its SCSS 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 only the components included in the template, but you can include any of the Free Components you can find in our UI Framework gallery. If you are a CodyHouse Pro user, you can include any of our Free and Pro components.

More info on how to import new components can be found 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 CodyHouse templates, we use SVG icons included as inline icons. But you can switch to a different integration option.

⭐️ 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 #

CodyHouse templates are 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 in CSS to target that JavaScript is enabled and apply additional style accordingly. 

Supported Browsers #

CodyHouse templates support 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