@micazoyolli/foundation 0.3.0 → 0.3.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 +35 -57
- package/package.json +7 -3
package/README.md
CHANGED
|
@@ -1,8 +1,17 @@
|
|
|
1
1
|
# @micazoyolli/foundation
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@micazoyolli/foundation)
|
|
4
|
+
[](./LICENSE)
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
Fundamentos frontend no visuales para construir repos independientes con una base tecnica consistente.
|
|
7
|
+
|
|
8
|
+
Foundation centraliza mecanicas pequenas que se repiten entre proyectos: tokens SCSS base, mixins responsive, helpers TypeScript, primitivas DOM de accesibilidad y utilidades SEO/build. No incluye React, componentes visuales, tokens de marca, layouts ni metadata especifica.
|
|
9
|
+
|
|
10
|
+
## Documentacion
|
|
11
|
+
|
|
12
|
+
La documentacion completa esta en:
|
|
13
|
+
|
|
14
|
+
[https://foundation.nadia.dev](https://foundation.nadia.dev)
|
|
6
15
|
|
|
7
16
|
## Instalacion
|
|
8
17
|
|
|
@@ -10,82 +19,51 @@ Fundamentos compartidos no visuales para los proyectos de Micazoyolli.
|
|
|
10
19
|
yarn add @micazoyolli/foundation
|
|
11
20
|
```
|
|
12
21
|
|
|
13
|
-
##
|
|
14
|
-
|
|
15
|
-
TypeScript:
|
|
22
|
+
## TypeScript
|
|
16
23
|
|
|
17
24
|
```ts
|
|
18
25
|
import { cx, getCanonicalUrl } from '@micazoyolli/foundation';
|
|
26
|
+
|
|
27
|
+
const className = cx('card', isActive && 'card--active');
|
|
28
|
+
const canonical = getCanonicalUrl('https://example.com', '/contacto');
|
|
19
29
|
```
|
|
20
30
|
|
|
21
|
-
SCSS
|
|
31
|
+
## SCSS
|
|
22
32
|
|
|
23
33
|
```scss
|
|
24
34
|
@use '@micazoyolli/foundation/scss' as foundation;
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
## Documentacion
|
|
28
35
|
|
|
29
|
-
|
|
36
|
+
.section {
|
|
37
|
+
padding-block: foundation.$space-6;
|
|
30
38
|
|
|
31
|
-
|
|
32
|
-
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
- [Breakpoints](./docs/scss/breakpoints.md)
|
|
37
|
-
- [Spacing](./docs/scss/spacing.md)
|
|
38
|
-
- [Motion](./docs/scss/motion.md)
|
|
39
|
-
- [Mixins](./docs/scss/mixins.md)
|
|
40
|
-
|
|
41
|
-
### TypeScript
|
|
42
|
-
|
|
43
|
-
- [DOM y accesibilidad](./docs/typescript/dom.md)
|
|
44
|
-
- [SEO y build](./docs/typescript/seo.md)
|
|
45
|
-
- [Utils](./docs/typescript/utils.md)
|
|
46
|
-
|
|
47
|
-
### Proyecto
|
|
48
|
-
|
|
49
|
-
- [Changelog](./docs/changelog.md)
|
|
50
|
-
- [Roadmap](./docs/roadmap.md)
|
|
39
|
+
@include foundation.down(foundation.$breakpoint-md) {
|
|
40
|
+
padding-block: foundation.$space-4;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
```
|
|
51
44
|
|
|
52
|
-
##
|
|
45
|
+
## Caracteristicas
|
|
53
46
|
|
|
54
|
-
- Tokens SCSS base
|
|
47
|
+
- Tokens SCSS base: spacing, radius, z-index, motion y breakpoints.
|
|
55
48
|
- Mixins SCSS para responsive y reduced motion.
|
|
56
|
-
- `cx`
|
|
57
|
-
-
|
|
58
|
-
-
|
|
59
|
-
- Helpers
|
|
60
|
-
-
|
|
49
|
+
- `cx` y guards TypeScript pequenos.
|
|
50
|
+
- Helpers DOM para metadata client-side.
|
|
51
|
+
- Primitivas de accesibilidad para focus, Escape, scroll lock y media protegida.
|
|
52
|
+
- Helpers SEO/build para canonical, sitemap, HTML estatico y escaping.
|
|
53
|
+
- Sin dependencias runtime pesadas y sin React.
|
|
61
54
|
|
|
62
|
-
##
|
|
55
|
+
## Compatibilidad
|
|
63
56
|
|
|
64
|
-
|
|
65
|
-
- Botones, cards, layouts o grids visuales.
|
|
66
|
-
- Tokens finales de marca, color o tipografia.
|
|
67
|
-
- Metadata especifica de proyectos.
|
|
68
|
-
- Logica de negocio.
|
|
69
|
-
- Dependencias UI pesadas.
|
|
57
|
+
Foundation puede usarse con React, Next.js, Vue, Angular, Astro, Vite y scripts Node segun el tipo de helper. Los helpers DOM deben ejecutarse solo en navegador.
|
|
70
58
|
|
|
71
59
|
## Scripts
|
|
72
60
|
|
|
73
61
|
```bash
|
|
74
|
-
yarn install
|
|
75
62
|
yarn build
|
|
76
|
-
yarn
|
|
77
|
-
yarn
|
|
63
|
+
yarn test
|
|
64
|
+
yarn docs:build
|
|
78
65
|
```
|
|
79
66
|
|
|
80
|
-
##
|
|
81
|
-
|
|
82
|
-
- TeInvitaASu Invitaciones
|
|
83
|
-
- TeInvitaASu.Party
|
|
84
|
-
- Micazoyolli
|
|
85
|
-
- Estilo Natura
|
|
86
|
-
- OhMamaMXX
|
|
87
|
-
- WTFashion
|
|
88
|
-
|
|
89
|
-
## Autora
|
|
67
|
+
## Autoria
|
|
90
68
|
|
|
91
69
|
Una creacion de [`<micazoyolli />`](https://nadia.dev)
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micazoyolli/foundation",
|
|
3
|
-
"version": "0.3.
|
|
4
|
-
"description": "Fundamentos
|
|
3
|
+
"version": "0.3.1",
|
|
4
|
+
"description": "Fundamentos frontend no visuales para el ecosistema tecnico de Nad.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/index.js",
|
|
@@ -25,11 +25,15 @@
|
|
|
25
25
|
"build": "tsc -p tsconfig.json && yarn copy-scss",
|
|
26
26
|
"clean": "rm -rf dist",
|
|
27
27
|
"copy-scss": "rsync -av --include='*/' --include='*.scss' --exclude='*' src/scss/ dist/scss/",
|
|
28
|
+
"docs:build": "vitepress build docs",
|
|
29
|
+
"docs:dev": "vitepress dev docs --host 0.0.0.0",
|
|
30
|
+
"docs:preview": "vitepress preview docs --host 0.0.0.0",
|
|
28
31
|
"prepack": "yarn build",
|
|
29
32
|
"test": "yarn build && node --test tests/*.test.mjs"
|
|
30
33
|
},
|
|
31
34
|
"devDependencies": {
|
|
32
|
-
"typescript": "6.0.3"
|
|
35
|
+
"typescript": "6.0.3",
|
|
36
|
+
"vitepress": "^1.6.4"
|
|
33
37
|
},
|
|
34
38
|
"packageManager": "yarn@1.22.22"
|
|
35
39
|
}
|