@perfectthings/ui v9.4.18
PerfectThings/UI
A set of simple, but perfect, UI components, written in Svelte (the only front-end framework worth learning).
Github pages site with docs
Install & Setup
Firstly, install the module as a dev dependency:
npm i -D @perfectthings/ui
Importing the CSS
You need to import the docs/ui.css
into your bundle.
There are many ways to do that. I specifically didn't use any css-to-js imports as these restrict the tools & the setup you may want to have.
The easiest way is probably to add a postinstall
script into your package.json
that will just copy the file into your dist
folder:
...
"postinstall": "cp node_modules/@perfectthings/ui/docs/ui.css ./dist/ui.css"
...
From there - you can just add it directly to the index.html
.
Svelte components
Just import
them from the module, as normal:
import { Button } from '@perfectthings/ui';
Usage with SvelteKit
Available from v6.4.0..
1. Configs
Because this is a purely front-end framework and requires browser to work, it will not work with SSR so you need to disable it. Create a file: src/routes/+layout.js
and add this:
export const ssr = false;
2. CSS
If you're using SvelteKit, you need to add the ui.css
file to the static
folder, and then either import it into your global.css
file or add it to the head
section of your app.html
file:
<head>
...
<link rel="stylesheet" href="%sveltekit.assets%/ui.css" />
</head>
3. Svelte components
Once that's done, you can import the components as normal.
Development
You need node & npm (obviously). Run these:
git clone git@github.com:perfect-things/ui.git perfectthings-ui
cd perfectthings-ui
npm i && npm start
A browser window should open with the demo of the components.
Resources
- Human Interface Guidelines from Apple
- Icons from Tabler Icons
- Prime Light font from Fontfabric
Support
6 days ago
23 days ago
24 days ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
8 months ago
7 months ago
8 months ago
7 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
7 months ago
7 months ago
7 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
7 months ago
8 months ago
8 months ago
8 months ago
12 months ago
12 months ago
11 months ago
12 months ago
11 months ago
12 months ago
12 months ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
12 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago