Templates - Tailwind

• Folder Structure
• Style Customizations
• Components
• Icons
• Supported Browsers

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

Folder Structure #

Here's the template structure:

├── assets/
├── dist/
├── src/
└── tailwind.config.js

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

src/
  ├── css/
  │    └── input.css
  │       
  ├── js/
  │    └── components.js 
  │   
  ├── index.html
  └── /* all .html files */

The src/css/input.css file contains the custom style of the template (e.g., color definitions, buttons, form elements) and the CSS code for each of the components used to build the template.

The src/js/components.js file contains the JS code for each of the components used to build the template.

The dist/output.css is the production-ready CSS file.

Style Customizations #

The src/css/input.css is where all the template bespoke style is stored:

• Colors + Color Themes;
• Buttons + Forms style;
• Custom Typography.

Components #

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

Inside the src/css/input.css and src/js/components.js fles, you will find the CSS/JS code 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 the CSS/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

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

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. In the src/css/input.css file, import the font-face and set the font-family property inside the .icon class:

@font-face {
  font-family: 'codyhouse';
  src: url('../fonts/codyhouse.eot');
  src: url('../fonts/codyhouse.eot') format('embedded-opentype'),
    url('../fonts/codyhouse.woff2') format('woff2'),
    url('../fonts/codyhouse.woff') format('woff'),
    url('../fonts/codyhouse.ttf') format('truetype'),
    url('../fonts/codyhouse.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: 'codyhouse';
}

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>

Supported Browsers #

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