Introducing new components and functionality to EvoToolkit on a project by project basis is relatively straightforward.
When creating new parts within your ITCSS layers, it's largely just a matter of creating the files in the correct directory, and then adding their imports to your SCSS manifest files: -
It's recommended that you use the template from
scss/components/_sample.scss as a base for your component, as this includes all the bespoke EvoToolkit structure and functionality shared by other parts.
When editing existing parts, one option is to just copy their existing
scss file from
node_modules/evotoolkit/src/scss, place it in your own corresponding layer directory, make your changes and then update the
import path in the relevant
Though this isn't recommended, as if you update your EvoToolkit dependency in the future, bug fixes or changes won't make it through to your edited version. The recommended way to edit existing EvoToolkit content is to create what's called an extend.
This is simply a new file with an extend prefix:-
extend.my-component.scss, placed in the correct ITCSS directory, and containing only the changes you're introducing. This means you aren't blocking updates, and still having your changes in effect.
With all this taken into account, within a typical EvoToolkit SASS manifest, the component imports may look something like this:-
Here there's a mixture of default EvoToolkit components imported via
core.scss, extended components where changes are introduced, and brand new components bespoke to the project.
If you have a seperate manifest file for every page, as mentioned under 'New Components', creating your own
core.scss to store your imports and adding it to each manifest files, means you will only have to edit one file as new components are introduced.
You would typically attach logic to custom events in the same way you would regular events - with Event Listeners:-
If your custom behaviour can't be added via event hooks, the alternative may be to just copy the component file from
node_modules and change it to meet your needs. However, the downside is when the EvoToolkit depedency is updated, bug fixes and new features won't come into effect for that file, as you're no longer importing the latest version.
jsprefix to your target element. Why? You may not want your new logic to apply to every instance of the component in use.
const, unless you know it's going to be mutated, where you should instead use