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:
- Vite.js (recommended)
- Webpack.js
- Astro.build
- Rollup.js
- Parcel.js
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.