im-the-engine

The Engine

The Engine is a design system for building responsive user interfaces with Vue.js for a number of Imagemakers platforms, systems and applications. It provides you and your team with a set of organized components, icons, tokens, utilities, tools, patterns, templates & practices that work as the foundation for your application interface development.

Churchill once said that “to change is to improve” and “to be perfect is to change often”. If we enforce too strict consistency, we will stop to innovate.

Run locally

Make sure you have the latest version of Node.js installed, I recommend using NVM

To run and view it locally run: npm i and then npm start.

Features

• A set of interconnected patterns & practices for you and your team.
• A well thought-out terminology, naming conventions, and hierarchy.
• Get an automated overview of how your design system progresses over time.
• Global design tokens in YAML format that you can use inside any component.
• Automatic generation of living, user editable documentation.
• Easily export and use your Design System as an NPM dependency in another Vue.js project.
• Create a token, an element, or a pattern, and it’s immediately available across all components.
• Pre-configured Prettier setup for auto-formatting code on both save and before commit.
• Live Reloading, Autoprefixing, SCSS, and helper functions + simple and sane defaults for SVG and Webfont usage out-of-the-box.
• Documentation and the app logic are separated, so you can have public docs while the app itself stays private.

Deploying

Docs are currently being auto deployed using Netlify.

https://the-engine.netlify.com/

Deploying components, tokens and assets to NPM for production use

1. Make sure you're logged in (and part of the imagemakers ORG) npm npm login.
2. Make sure you have Node.js and np installed: npm install --global np
3. Run np and follow the prompts, that's it, grab a ☕ or 🍕 and let np do the rest.

The Engine is built on top of Vue Design System, Vue.js, Vue Styleguidist, Vue Webpack Template & Theo.

Licensed under the GNU General Public License v3.0.