@ikas/component-cli 1.4.0-beta.82 → 1.4.0-beta.83

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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/templates/add/section.css +11 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ikas/component-cli",
3
- "version": "1.4.0-beta.82",
3
+ "version": "1.4.0-beta.83",
4
4
  "description": "CLI for developing ikas code components",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
package/templates/add/section.css CHANGED
@@ -15,3 +15,14 @@
15
15
  font-weight: 700;
16
16
  color: #111827;
17
17
  }
18
+
19
+ /*
20
+ * Responsive: use the theme's breakpoints in CSS. CSS media queries can't use
21
+ * var(), so write the min-width/max-width yourself and use `bp(<breakpointId>)`
22
+ * for the value — it resolves to the breakpoint's `<width>px` at render time
23
+ * against the store's live width. Get <breakpointId> from
24
+ * `npx ikas-component list-theme-globals` (breakpoints[].id) — use the id, not the name.
25
+ *
26
+ * @media (max-width: bp(_AbC123)) { .{{KEBAB_NAME}} { padding: 32px 16px; } }
27
+ * @media (min-width: bp(_AbC123)) { .{{KEBAB_NAME}}-inner { display: flex; gap: 24px; } }
28
+ */