Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sorenabedi/artist-svelte
An opinionated and clean UI framework for SvelteKit
https://github.com/sorenabedi/artist-svelte
artist-design-system design-system svelte svelte-components sveltejs sveltekit ui ui-components ui-frameworks
Last synced: 4 days ago
JSON representation
An opinionated and clean UI framework for SvelteKit
- Host: GitHub
- URL: https://github.com/sorenabedi/artist-svelte
- Owner: sorenabedi
- License: gpl-3.0
- Created: 2021-09-22T11:24:34.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-10-17T10:08:23.000Z (12 months ago)
- Last Synced: 2024-09-21T22:08:04.276Z (12 days ago)
- Topics: artist-design-system, design-system, svelte, svelte-components, sveltejs, sveltekit, ui, ui-components, ui-frameworks
- Language: Svelte
- Homepage: https://artist-ui.pages.dev
- Size: 4.44 MB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 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
[](https://github.com/sorenabedi/artist-svelte/blob/master/LICENSE)
[](https://www.npmjs.com/package/@sorens/artist-svelte)
[](https://www.npmjs.com/package/@sorens/artist-svelte)
[](https://bundlephobia.com/package/@sorens/artist-svelte@latest)
[](https://frontend.code-inspector.com/public/project/29172/artist-svelte/dashboard)
[](https://frontend.code-inspector.com/public/project/29172/artist-svelte/dashboard)
[](https://codeclimate.com/github/sorenabedi/artist-svelte/maintainability)
[](https://codecov.io/gh/sorenabedi/artist-svelte)
[](https://github.com/sorenabedi/artist-svelte/actions/workflows/CI.yml)
[](https://github.com/sorenabedi/artist-svelte/actions/workflows/publish.yml)
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fsorenabedi%2Fartist-svelte?ref=badge_shield)
[Website](https://artist-ui.pages.dev) | [Documentation](https://artist-ui.pages.dev/docs)
## Installation
---
The easiest way to start with Artist UI is cloning our getting-started template via
[degit](https://www.npmjs.com/package/degit) utility
```bash
# 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:
```bash
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](https://kit.svelte.dev/docs#introduction-getting-started)
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](https://kit.svelte.dev/docs#introduction-getting-started) package is required for svelteKit's default bundler (ViteJs), as well as configuring the [svelte-preprocess](https://github.com/sveltejs/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
/ 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
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**.
```html
/* 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;
}
```
## Component Usage
---
All components are exported directly from package root scope, e.g:
```html
import { Checkbox, Button } from '@sorens/artist-svelte';
Accept
some text
```
## License
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fsorenabedi%2Fartist-svelte?ref=badge_large)