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
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-appOnce 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 -- --openand 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 :
```bash 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:
```bash # 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.
```javascript / projectroot/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'NODEENV'/g, () =>
import.meta.env.MODE,
/"process.env.NODEENV"/g, () => import.meta.env.MODE,
/process.env'(w+)'/g, (, match) => JSON.stringify(process.envmatch),
/process.env.(w+)/g, (, match) => JSON.stringify(process.envmatch)
}),kit: { // hydrate the
element in src/app.html
target: '#svelte'
}
};
export default config; ```
Create a
```html
```
All components are exported directly from package root scope, e.g:
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.```html
```
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
