Components
CodyHouse Components is a library of accessible, progressively enhanced, HTML, CSS, JS components that work seamlessly with the Framework
Please bear in mind that the components use CSS custom properties defined in the Framework. You can use a component without the framework, but make sure to replace all variables and mixins defined in the framework.
Supported browsers #
The components support the latest, stable releases of all major browsers. On Windows, we support IE 10-11 / Microsoft Edge. On IE 9 the components remain accessible, but the style may look different compared to the result on modern browsers.
Progressive enhancement #
The Framework 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 Components work seamlessly with the Framework. To integrate them, copy their SCSS and JS code and paste it into your project.
⚠️ On top of the SCSS and JS files, you'll find the component name. It includes an index. We suggest using that _{index}_name to import the components in the right order.
We use 1, 2, or 3 (as index), depending on whether the selected component has dependencies or not. For example:
/* --------------------------------
File#: _1_video-background
-------------------------------- */Here's a quick video that shows how to import the components: