Interactive SVG graphic highlighting the International Zinc Association (IZA) and its members' committment to the United Nations 17 Sustainable Development Goals (SDGs) featured on the zinc.org sustainability microsite: sustainability.zinc.org.
Add shortcode [iza_sdg] to WordPress page content.
Divi: insert shortcode inside a "code" or "full-width code" module.
Text editing and administrative interface is located under Appearance > IZA SDG in the WordPress Admin menu.
- Uses yarn, webpack and browsersync.
- Dependancies are managed with
package.json(yarn) - Builds are managed with
webpack.config.js(webpack)
- Dependancies are managed with
Source files are located in /src and are compiled to /dist by yarn scripts (see below). WARNING: Do not directly edit files in dist as they will be overwritten on the next compile!
The plugin automatically selects the CSS file for development/production.
-
Initilize Project
yarn
-
Available commands
-
Dev
starts browsersync, compiles your js and scss, creates sourcemaps and watches for file changes
yarn dev
-
Dist
generates production files (minifies css and packs media queries), generates less detailed source maps
yarn dist
-
- Use the Adobe Illustrator asset exporter to export the entire artboard. Make sure that exporting "names as ID's" is set. Run through SVGOMG with generous settings.