Components

CodyHouse Components is a library of accessible, progressively enhanced, HTML, CSS, JS components that work seamlessly with CodyFrame.

Please bear in mind the components use CSS variables, mixins and utility classes defined in CodyFrame. You can use a component without the framework, but make sure to replace all variables, mixins, and utility classes.

Browse components Suggest new components

🔍 On this page:

Progressive enhancement #

CodyFrame 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")[0].className += " js";</script>

The script is used in CSS to target that Javascript is enabled and apply additional style accordingly. If you don't include the script, part of the style of the components won't be visible.

How to import the Components #

The way you import the components depends on the set-up of your project:

Here's a quick video that shows how using our components can speed up your workflow:

Using the Component with Vue.js #

Since the components are built using vanilla JavaScript, they work with JavaScript frameworks, as well. Learn more about how to integrate the components in vue.js in this blog article:

📝 Using the CodyHouse components with Vue.js

Using the Component with React #

Learn more about how to integrate the components in vue.js in this blog article:

📝Using the CodyHouse components with React

Re-initialize Components #

If your page content is created dynamically (e.g., you use Ajax to transition between pages), you will need to manually initialize the components after their content has been injected into the DOM.

For example, if you have a carousel element, you will need to initialize it using the Carousel object:

// do this after your carousel has been injected into the DOM
var carouselEl = newContent.getElementsByClassName('js-carousel');
for(var i = 0; i < carouselEl.length; i++) {
  new Carousel({element: carouselEl[i]});
}

You will need to do that for all your page interactive elements (e.g., accordion, tabs, ...). Check out the info page of each component for more info about dynamic initialization.

If you are using Ajax to load your page content, you can also consider dynamically loading the javascript file of each new page.

For example, let's say you have a home.js file for your Home page and an about.js file for the About page. Once the new page content has been loaded, append the new javascript file to your page:

<!-- html page -->
<body>
  <!-- page content here -->
  
  <!-- dynamic JS file -->
  <script id="page-script" src="assets/js/home.js"></script>
</body>

var pageScript = document.getElementById('page-script');
if(pageScript) pageScript.remove();
// append new script
var script = document.createElement('script');
script.setAttribute('src', 'assets/js/about.js'); // the src value should change according to the page
script.setAttribute('id','page-script');
document.body.appendChild(script);