Components
The components are building blocks that you can combine to create web pages. To view all the components, go to the gallery page.
For each component, you'll find a:
- Live Demo - to preview the component and copy the source code (example)
- Info page - that explains how to use the component (example)
The link to the 'info page' is on the component's demo page.
How to import #
Each component consists of an HTML, CSS, and JS file. To ensure the component works properly, you need to import these three files.
For example, let's import the morphing navigation component.
In the CSS of the component, the number '2' before the component name is an index indicating the order in which the components must be imported. Components with index 1 should be imported before those with index 2, and components with index 2 should be imported before those with index 3, and so on.
If two components have the same index, it doesn't matter which one you import first.
/* --------------------------------
File#: _2_morphing-navigation
...
-------------------------------- */If you're using SASS, you can create a style.scss file in your project and import the component CSS using the @use rule:
@use 'components/_1_collapse' as *; // ← dependency
@use 'components/_1_anim-menu-btn' as *; // ← dependency
@use 'components/_2_morphing-navigation' as *;The morphing navigation has two dependencies, so we import them first. A dependency is a component used by another component.
The JavaScript for the component should be imported before the closing </body> tag in your HTML file. Just like with CSS, the import order will depend on the component's index.
...
<script src="assets/js/components/_1_collapse.js"></script>
<script src="assets/js/components/_1_anim-menu-btn.js"></script>
<script src="assets/js/components/_2_morphing-navigation.js"></script>
</body>If you're importing many components, consider bundling the JS files into a single script to import.
Finally you can copy/paste the HTML of the component in your project!
Dependencies #
Some components need other components (i.e., dependencies) to work properly. When a dependency is required, you'll be notified on the component's page. Make sure to import the dependencies in your code before importing the component's code.
CSS Frameworks #
The components are available in 3 versions:
If you're using the components with CodyFrame and you're importing the framework as node module, don't forget to update the link to the config file in each component SCSS:
@use 'config' as *;
// --- 👆 update this path if you're importing CodyFrame as npm module
// e.g., '../../../node_modules/codyframe/main/scss/config'Vue and React #
Since the components are built using vanilla JavaScript, they work with JavaScript frameworks too:
