You can also include EvoTookit CSS & JS directly through
Place in the head element.
<link rel="stylesheet" type="text/css" href="https://toolkit.evolutionfunding.com/source/evotoolkit.2.3.0.min.css" />
Place just before the closing body tag.
Some components require SVG icons as a part of their design, so we need to make these available in our HTML. Copy the below snippet into your page, placing it just after the opening
This is the root
svg element which contains our icon system. When a component requires an icon, its
symbol will be included so it's just a matter of copying it into the
svg and then everything should just work.
For more information on this approach, see here and then here.
This approach has a number of limitations when compared to using EvoToolkit via a build system. These include:-
- The compiled versions represent the full EvoToolkit CSS & JS codebase, so you will be pulling in a lot of code you may not even need, which will lead to larger file sizes. In contrast, with a build system, much of EvoToolkit is disabled by default; encouraging an "enable as required" approach to keep the codebase lean.
- In CSS, it's more difficult to handle the cascade and selector specificity, as you no longer have the ITCSS architecture to guide how project CSS should be structured.
- In JS, you can no longer leverage shared functionality, nor can you easily tweak component logic.