@infonomic/uikit 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +38 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
# UI Kit Prototype
|
|
2
|
+
|
|
3
|
+
A UI kit prototype that relies on CSS Modules for component styling, while playing nicely with front-end frameworks that use [Tailwind CSS](https://tailwindcss.com/).
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
We created this repo because while we appreciate Tailwind CSS for front-end development of PoC and smaller applications, we don't feel it belongs in a component library. Tailwind CSS as a ['programmatic' atomic CSS system](https://css-tricks.com/lets-define-exactly-atomic-css/#aa-programmatic) - is brilliant at what it does in preventing CSS rot and gradual CSS bloat - as well as making it clear how a layout or front-end component has been styled. It's also the ulitmate expression of what [Thierry Koblentz](https://www.smashingmagazine.com/author/thierry-koblentz/) was talking about in his 2103 article, [Challenging CSS Best Practices](https://www.smashingmagazine.com/2013/10/challenging-css-best-practices-atomic-approach/).
|
|
8
|
+
|
|
9
|
+
It just doesn't belong in UI kits and libraries.
|
|
10
|
+
|
|
11
|
+
## Design Goals
|
|
12
|
+
|
|
13
|
+
We built this with the following goals in mind:
|
|
14
|
+
|
|
15
|
+
1. We'd like a structure and style system that will work with any framework -[React](https://react.dev/), [Vue.js](https://vuejs.org/), [Solid](https://www.solidjs.com/), [Svelte](https://svelte.dev/) etc.
|
|
16
|
+
2. We'd like to be able to easily target various front-end meta frameworks, from [Astro](https://astro.build/), to [Next.js](https://nextjs.org/) to [React Router v7](https://reactrouter.com/) (formerly Remix) - and even plain old HTML/CSS.
|
|
17
|
+
3. We'd like a good developer experience (DX), allowing us to develop our components in the 'kit' via tests and Storybook, as well as in a monorepo within the front-end target framework itself (Next.js, Vue etc.).
|
|
18
|
+
4. We'd like our components' styles to be easily overridable - whether via 'style' attributes, Tailwind, regular CSS classnames and stylesheets, or any other style system being used by the front-end. We'd especially like to be able to override a component's styles without having to use CSS !important.
|
|
19
|
+
|
|
20
|
+
## Getting Started
|
|
21
|
+
|
|
22
|
+
Install packages and build once...
|
|
23
|
+
|
|
24
|
+
`pnpm install && pnpm build`
|
|
25
|
+
|
|
26
|
+
To start the Next.js 15 and Astro apps in dev mode...
|
|
27
|
+
|
|
28
|
+
`pnpm dev`
|
|
29
|
+
|
|
30
|
+
To start Storybook for the ui kit.
|
|
31
|
+
|
|
32
|
+
`cd packages/uikt`
|
|
33
|
+
|
|
34
|
+
`pnpm storybook`
|
|
35
|
+
|
|
36
|
+
## Note
|
|
37
|
+
|
|
38
|
+
UI kit vars / colors have been registered with Tailwind in Next.js
|
package/package.json
CHANGED