Artist for Svelte

An opinionated and clean UI framework for SvelteKit

⚠️🚧👷‍♂️⛑️ please note that this package is still in early development stages and APIs might change in the future

Website | Documentation

Installation

The easiest way to start with Artist UI is cloning our getting-started template via degit utility

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

# create a new project in my-app
npx degit sorenabedi/artist-svelte/examples/getting-started my-app

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

and rou are all set!

Bootstrapping From Scratch

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

• Step 1 - Installing SvelteKit

  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
  
  # YARN
  yarn add -D @sorens/artist-svelte dotenv
  
  # NPM
  npm install @sorens/artist-svelte dotenv --save-dev

• Step 3 - SvelteKit Configuration

  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({
  	replace: [
  		 [/process.env['NODE_ENV']/g, () => `import.meta.env.MODE`],
  		 [/"process.env.NODE_ENV"/g, () => `import.meta.env.MODE`],
  		 [/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 global>
  	/* Artist UI global styles (required) */
  	/* Normalize css (optional) */
  	@import '../../node_modules/@sorens/artist-svelte/css/GlobalStyles.css';
  	@import '../../node_modules/@sorens/artist-svelte/css/Normalize.css';
  
  	/* 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', Vazir;
  	}
  	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>

Component Usage

All components are exported directly from package root scope, e.g:

<script lang="ts">
	import { Checkbox, Button } from '@sorens/artist-svelte';
</script>

<button variant="fill" color="primary">Accept</button>
<Checkbox color="danger" on:change="()=>console.log('changed')">some text</Checkbox>

License