najwer23morsels 0.8.9 → 0.8.11
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 +17 -17
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
The najwer23morsels npm package
|
|
1
|
+
The najwer23morsels npm package offers React user interface components designed for flexible and customizable styling. It supports styling through configurable parameters passed as React props, allowing you to easily adjust the appearance of components within your React code. Additionally, you can apply custom CSS classes for more granular control.
|
|
2
|
+
|
|
3
|
+
This design system leverages native CSS features, primarily global CSS variables, to enable comprehensive customization of component styles. Instead of relying on external styling libraries, you can override these CSS variables or add your own CSS rules to control the look and feel. This approach ensures that styling remains straightforward, maintainable, and fully compatible with standard web technologies.
|
|
4
|
+
|
|
5
|
+
By following native CSS conventions, the package provides a flexible and efficient way to adapt the design system to different branding requirements or design preferences while keeping the styling logic clear and easy to manage. Using React props for styling alongside CSS variable overrides offers a powerful combination for both dynamic and static style customization.
|
|
6
|
+
|
|
2
7
|
|
|
3
|
-
|
|
4
8
|
|
|
5
9
|
# najwer23morsels
|
|
6
10
|
|
|
7
|
-
[](https://najwer23.github.io/najwer23morsels) [](https://github.com/najwer23/najwer23morsels) [](https://www.npmjs.com/search?q=najwer23morsels)
|
|
11
|
+
[](https://najwer23.github.io/najwer23morsels) [](https://github.com/najwer23/najwer23morsels) [](https://www.npmjs.com/search?q=najwer23morsels) [](https://www.npmjs.com/package/najwer23morsels)
|
|
8
12
|
|
|
9
13
|
1. Reusable UI Components
|
|
10
14
|
2. Documentation and Guidelines
|
|
@@ -13,8 +17,6 @@ The najwer23morsels npm package allows you to style React UI components using na
|
|
|
13
17
|
5. Tree shaking
|
|
14
18
|
6. Your own custom CSS classes
|
|
15
19
|
|
|
16
|
-
# Install
|
|
17
|
-
|
|
18
20
|
```js
|
|
19
21
|
yarn add najwer23morsels --dev
|
|
20
22
|
```
|
|
@@ -23,8 +25,6 @@ yarn add najwer23morsels --dev
|
|
|
23
25
|
npm install najwer23morsels --save-dev
|
|
24
26
|
```
|
|
25
27
|
|
|
26
|
-
# Example
|
|
27
|
-
|
|
28
28
|
```typescript
|
|
29
29
|
import { TextBox } from "najwer23morsels/lib/textbox";
|
|
30
30
|
|
|
@@ -37,9 +37,7 @@ export const Example = () => {
|
|
|
37
37
|
}
|
|
38
38
|
```
|
|
39
39
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
```CSS
|
|
40
|
+
```css
|
|
43
41
|
:root {
|
|
44
42
|
/* Main */
|
|
45
43
|
--n23mFontFamily: --fontFamily, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica,
|
|
@@ -60,11 +58,13 @@ export const Example = () => {
|
|
|
60
58
|
}
|
|
61
59
|
```
|
|
62
60
|
|
|
63
|
-
|
|
61
|
+
[](https://najwer23.github.io/)
|
|
62
|
+
[](https://najwer23.github.io/resume/)
|
|
63
|
+
[](https://twitter.com/najwer23)
|
|
64
|
+
[](https://www.linkedin.com/in/najwer23)
|
|
65
|
+
[](https://leetcode.com/najwer23/)
|
|
66
|
+
[](https://www.npmjs.com/~najwer23)
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
|
|
64
70
|
|
|
65
|
-
[](https://najwer23.github.io/)
|
|
66
|
-
[](https://najwer23.github.io/resume/)
|
|
67
|
-
[](https://twitter.com/najwer23)
|
|
68
|
-
[](https://www.linkedin.com/in/najwer23)
|
|
69
|
-
[](https://leetcode.com/najwer23/)
|
|
70
|
-
[](https://www.npmjs.com/~najwer23)
|