Installation

Quickly install and configure mytril for your svelte project.

Create your project

Start by creating a new SvelteKit project if you don’t have one set up already. The most common approach is outlined in the Getting Started with SvelteKit introduction.

# terminal
npm create svelte@latest my-app
cd my-app
npm install
npm run dev

Requirement

• Svelte v4
• Node v18 or more
• Vite.js v4.5 or more

Install Mytril

Install mytril and mytril-tools (not required) within your project. Mytril has no external dependencies in order to facilitate its integration and limit potential version conflicts

# terminal
npm install -D mytril
npm install -D mytril-tools

Add Mytril on your vite configuration.

Add mytril plugin vite on your vite.config.(js|ts) file.

// vite.config.(js|ts)
import { mytril } from 'mytril/vite';

export default defineConfig({
	plugins: [sveltekit(), mytril()]
});

Add the Mytril to your CSS

Create a ./src/app.css file and add the mytril/styles.

/** app.css */
@import 'mytril/styles';

Import the CSS file

Create a ./src/routes/+layout.svelte file and import the newly created app.css file.

<script>
	// +layout.svelte
	import '../app.css';
</script>

<slot />

Start your build process

Run your build process with npm run dev.

# terminal
npm run dev

Start using Mytril in your project

Start using Mytril components, utility classes, and themes to create your interface and content.

work in progress

<script>
	// +page.svelte
	import { Btn } from 'mytril';
</script>

<Btn class="custom-class ma-2 px-3">Click on this button</Btn>

<style>.custom-class{color:var(--c-theme-1)}</style>