There are a few different ways to get going with EvoToolkit, depending on your project.
Using EvoToolkit with a build system is the recommended way to add it to your project, as because you're dealing with the uncompiled source files directly, it gives you a lot more flexibility to tailor it towards your project needs.
If you're working on a project where you have the opportunity to implement a build system, you can leverage EvoToolkit to its full potential using the EvoToolkit Boilerplate.
To get started, download the boilerplate, cd into it, and then run npm install to install project dependencies.
This is the directory structure you'll be working with:-
dist - A directory which represents the files which you should distribute to the user. Feel free to use your own directory structure to accomodate HTML, PHP or anything else, as long as you leave the static directory and its contents intact, as SASS and JS assets will be compiled here.src - Source files for EvoToolkits SASS and JS. Here's where you'll be working with each of these respective elements.You may notice that src doesn't actually exist yet. To fix this, run npm run init, which creates the src directory and populates it with a number of subdirectories and files:-
/src
/assets
/img
/js
/components/objects/toolssample.page.js
/scss
/components
_sample.scss
/elements/generic/objects/settings
_overrides.scss
_theme-overrides.scss
sample.page.scss
When init is complete, remove the src line from the .gitignore file to sure git picks up your project source files.
Whilst having seperate SCSS and JS manifest files for each page is recommened to lower filesize and performance impact, it's not required. In some projects, it may make more sense to have one set of manifest files which are shared across all pages.
Alongside the commands already mentioned, the boilerplate comes with commands (called NPM scripts) which allow you to easily compile SASS and JS assets. Type these commands into the terminal, within the git repo:-
npm install - Installs project depedencies.npm run init - Sets up the src directory and creates a collection of template files.npm run build - Compiles project SASS and JS into dist/static.npm run build:css - Same as above, but only compiling SASS.npm run build:css:debug - Compiles SASS into unconpressed CSS, allowing for easier debugging.npm run build:js - Same as above, but only compiling JS.npm run build:svg - Concatinates all svg files in src/assets/img into one big .svg file.npm run watch - Whilst this is running, when either the SASS or JS in src/assets is edited, the build tasks will automatically run.npm run watch:css - Same as above, but only watching for SASS changes.npm run watch:js - Same as above, but only watching for JS changes.It's possible to implement a build system to compile SASS and JS source files into existing projects, by downloading and tweaking the EvoToolkit Boilerplate to fit your needs:-
package.json to your project directory.
src/assets directory to your project aswell, and then decide where you want to have the compiled files land.dist/static/fonts to this directory, and then within package.json and any files in /build, update all the paths within each script to reflect your changes.$global-font-path SCSS variable so the CSS @import rules can locate the fonts. See Configuring EvoToolkit for more info.With existing projects where it's not possible to implement any kind of build system, you can use EvoToolkit by including its compiled CSS, JavaScript and SVGs directly in your project.
You can either place this in the head element to include all of the CSS.
<link rel="stylesheet" type="text/css" href="https://toolkit.evolutionfunding.com/source/evotoolkit.3.7.2.min.css" integrity="sha512-Qfyal5taIIiR3pDYAhLlK9C1NENeBW3fMjdXVDPSoy2KXzlu9ZP2hTeaQgX2kZ2ZAKEI83LsCKNW4xBxMM+POQ==" crossorigin="anonymous" />
Or alternatively using its PHP api, you can include only the EvoToolkit CSS you need, which will result in a smaller, leaner stylesheet.
Pass the version number and any Object, Component or Utility parts in the query string like in the examples below, and the API will return all the CSS you need in a single request. When a stylesheet has been generated, the response is cached on the server to speed up future requests.
<!-- Includes Layout object and the Button component -->
<link rel="stylesheet" type="text/css" href="https://toolkit.evolutionfunding.com/source?v=3.7.2&object/layout&component/button" />
<!-- Includes Inputs component, Typography component and the Widths utilties -->
<link rel="stylesheet" type="text/css" href="https://toolkit.evolutionfunding.com/source?v=3.7.2&component/inputs&component/typography&utility/widths" />
<!-- Includes only Generic/Elements base styles. Not recommended if you're working on a system with existing styles, as these layers contain base CSS (eg: body, typography, box-sizing) which will likely create conflicts with existing styles. -->
<link rel="stylesheet" type="text/css" href="https://toolkit.evolutionfunding.com/source?v=3.7.2&core" />
Place in the head element, anywhere after the CSS snippet.
<script defer src="https://toolkit.evolutionfunding.com/source/evotoolkit.3.7.2.min.js" integrity="sha512-gYuXN1m9FQLbiChHXynTguGhX9EPet63rO78R7+5IKyH+5eoHLEw2XnviLExqPHq09YoX6a6//MtgPL7NidxEQ==" crossorigin="anonymous"></script>
Some components require SVG icons as a part of their design. These are located in a file called evotookit.svg, which will be referenced in component HTML like:
<svg><use xlink:href="/static/img/evotoolkit-059f9bb4f6.svg#icon-id" /></svg>
The only thing you will need to do for each icon is change this URL to match the external SVG resource, like so:
<svg><use xlink:href="https://toolkit.evolutionfunding.com/source/evotoolkit.3.7.2.svg#icon-id" /></svg>
This approach has a number of limitations when compared to using EvoToolkit via a build system. These include:-