Installation - Generic

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 Install Inkline and dependencies

Install and save Inkline as a project dependency.

npm install --save @inkline/inkline

Inkline uses Sass to pre-process and compile its CSS files. You will need to install it as a development dependency in order to compile the stylesheets.

Depending on the build tool you’re using, you might need to install additional loaders to handle .scss files.

npm install --save-dev sass

3 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 { Inkline, components } from '@inkline/inkline';
import '@inkline/inkline/inkline.scss';

import "./main.scss";

const app = createApp(App);

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

4 Configure your design

Next, create a new file called src/main.scss and import Inkline. Learn more about the Design System.

@import '@inkline/inkline/css/variables';
@import '@inkline/inkline/css/mixins';

:root {
    --color--primary--h: 195deg;
    --color--primary--s: 77%;
    --color--primary--l: 39%;
}

5 Enjoy using Inkline

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