Installation (With SASS)

useful Info

With SASS/SCSS preprocessor you can:

Use custom Artist UI functions and mixins (Written in SCSS)
Extend the default Artist UI color palette or even change it.

The easiest way to start an Artist UI project with SASS preprocessor is cloning our getting-started-sass template via degit utility:

# create a new project in the current directory
npx degit sorenabedi/artist-svelte/examples/getting-started-sass

# create a new project in aui-svelte directory
npx degit sorenabedi/artist-svelte/examples/getting-started-sass aui-svelte

Once you've created a project and installed dependencies with pnpm install (or yarn install or npm), start a development server:

pnpm run dev

# or start the server and open the app in a new browser tab
pnpm run dev -- --open

Bootstrapping From Scratch

Bootstrapping a project with Artist UI and svelteKit with SASS preprocessor can be done in Four simple steps:

Step 1 - Installing SvelteKit

useful Info

If you already have a SvelteKit project, then skip to Step 2. For more information about this step, please refer to the official SvelteKit Documentation

Initializing a fresh SvelteKit project :

npm init svelte@next aui-svelte
cd aui-svelte
pnpm install
pnpm run dev -- --open

Step 2 - Installing Artist UI

Installing the Artist UI package with the required dependencies:

# PNPM (recommended)
pnpm add -D @sorens/artist-svelte dotenv sass

# YARN
yarn add -D @sorens/artist-svelte dotenv sass

# NPM
npm install @sorens/artist-svelte dotenv sass --save-dev

Step 3 - SvelteKit Configuration

useful Info

Since Artist UI intends to be compatible with Webpack, dotenv package is required for svelteKit's default bundler (ViteJs), as well as configuring the svelte-preprocess to replace process.env.* and process.env[*] to prevent ViteJs from throwing errors.

Create svelte.config.js file in root directory of your project (if not already exists) with the following structures.

// project_root/svelte.config.js
import preprocess from 'svelte-preprocess';
import dotEnv from 'dotenv';

dotEnv.config();

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess({
		sass:{},
		replace: [
			[/process.env['NODE_ENV']/g, () => `"production"`],
			[/process.env['(w+)']/g, (_, match) => JSON.stringify(process.env[match])],
			[/process.env.(w+)/g, (_, match) => JSON.stringify(process.env[match])]
		]
	}),

	kit: {
		// hydrate the <div id="svelte"> element in src/app.html
		target: '#svelte'
	}
};

export default config;

Step 4 - Importing Styles

Create a __layout.svelte in src/routes folder (if not already exists) with a global style tag with lang attribute set to scss.

<!-- project_root/src/routes/__layout.svelte -->
<slot />

<style lang="scss" global>
/* Artist UI global styles (required) */
/* Normalize css styles in SCSS (optional) */
@import '../../node_modules/@sorens/artist-svelte/scss/GlobalStyles';
@import '../../node_modules/@sorens/artist-svelte/scss/modules/normalize';

/* Any other global styles that you might need, goes here. e.g: */
html,
body {
	margin: 0;
	padding: 0;
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
		Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
		'Segoe UI Symbol', 'Noto Color Emoji';
}
html {
	background-color: hsl(var(--bg-color));
	color: hsl(var(--fg-color));
	transition: color 0.3s, background-color 0.3s;
}
::-webkit-scrollbar {
	width: 5px;
	height: 5px;
	display: block;
	background: hsl(var(--bg-color));
}
::-webkit-scrollbar-thumb {
	background: hsl(var(--fg-color));
	border-radius: 5px;
}
</style>