Installation - Manual

Install Inkline for an application created using any other bundler or framework.

Installation

1 Create a project

Create a new application using a Front End Development Tool that supports modern javascript (or typescript) such as:

2 Create Configuration File

a. Using the Inkline CLI

Run the following command to generate an inkline.config.ts file.

npx inkline init --manual

b. Manually

Create an inkline.config.ts or inkline.config.js file in the root of your project and add the following:

import { defineConfig } from '@inkline/config';

export default defineConfig({
    theme: {
        default: {
            color: {
                primary: '#178ab0'
            }
        }
    }
});
2 Install Inkline and dependencies

Install and save Inkline as a production dependency.

npm install --save @inkline/inkline

Install and save Inkline's development dependencies.

Inkline uses Sass to pre-process and compile its SCSS files. Depending on the build tool you're using, you might need to install additional loaders to handle .scss files.

npm install --save-dev @inkline/plugin @inkline/config sass
3 Generate variables

Run the following command to generate .scss files containing Sass variables from your Inkline config:

npx inkline generate scss -o src/css/variables

Optionally, add the command as a script to your package.json file and re-run it every time your config changes.

4 Configure your project

Open your src/main.js or src/main.ts file and configure your application to use Inkline.

import { createApp } from 'vue';
import App from './App.vue';

import './css/variables/index.scss?inline';

import { Inkline, components } from '@inkline/inkline';
import '@inkline/inkline/css/index.scss?inline';
import '@inkline/inkline/css/utilities.scss?inline';

const app = createApp(App);

app.use(Inkline, {
    components
});
    
app.mount('#app');
5 Enjoy using Inkline

Awesome work! You can now start using all the features that Inkline has to offer.