@squeditor/squeditor-framework 1.0.3 → 1.0.4
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
CHANGED
|
@@ -1,34 +1,28 @@
|
|
|
1
1
|
**Squeditor Framework** is a high-performance, developer-first framework for building lightning-fast, static websites. It combines the power of **PHP-style templating** with the modern performance of **Tailwind CSS**, the interactivity of **UIKit 3**, and the speed of **Vite**.
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
## 🚀 Key Features
|
|
3
|
+
We implement AI Agents skills to help you build your website easily in minutes. You can use AI Agents to generate well organized and clean code, components, sections, and pages and ship landing pages and saas and agency websites 10x faster.
|
|
6
4
|
|
|
7
|
-
###
|
|
8
|
-
Develop using familiar WordPress-style functions like `get_template_part()` and `get_section()`, use PHP arrays as your data layer, and leverage loops to build complex layouts. The production build "snaps" everything into pure HTML, requiring zero server-side processing.
|
|
5
|
+
### Showcase and Demo
|
|
9
6
|
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
[Main Demo](https://squeditor.com/showcase/main-demo/)
|
|
8
|
+
[All Components](https://squeditor.com/showcase/all-components/)
|
|
9
|
+
[Style Guide](https://squeditor.com/showcase/style-guide/)
|
|
10
|
+
[GSAP Animations](https://squeditor.com/showcase/gsap-animations/)
|
|
12
11
|
|
|
13
|
-
|
|
14
|
-
Fully themeable via a centralized Design Token system (`_tokens.scss`). Every component and layout utility consumes CSS Custom Properties (`--sq-*`), allowing you to swap entire visual identities or color schemas (Light/Dark) instantly across the site.
|
|
15
|
-
|
|
16
|
-
### 🌓 Built-in Light/Dark Mode
|
|
17
|
-
Native support for `sq-theme-dark` classes and Tailwind's `dark:` utilities. The framework detects schema settings from the environment (or URL) and applies them globally to the body, ensuring a seamless and premium dark mode experience.
|
|
12
|
+
[Full Documentation](https://docs.squeditor.com)
|
|
18
13
|
|
|
19
|
-
###
|
|
20
|
-
Build pages in minutes using a library of pre-built, token-aware section variants:
|
|
21
|
-
- **Hero**: Video, Split, Centered
|
|
22
|
-
- **Cards**: Grids, Horizontal, Feature lists
|
|
23
|
-
- **CTA**: Split, Banner, In-line
|
|
24
|
-
- **Global**: Responsive Header, Deep-linked Footer
|
|
14
|
+
### Key Features
|
|
25
15
|
|
|
26
|
-
|
|
27
|
-
|
|
16
|
+
- Zero-Runtime PHP Templating
|
|
17
|
+
- Selective UIKit 3 Integration
|
|
18
|
+
- Token-Based Styling Architecture
|
|
19
|
+
- Built-in Light/Dark Mode
|
|
20
|
+
- Section-Based Workflow
|
|
21
|
+
- Automatic Style Guide
|
|
28
22
|
|
|
29
23
|
---
|
|
30
24
|
|
|
31
|
-
|
|
25
|
+
### Project Architecture
|
|
32
26
|
|
|
33
27
|
```bash
|
|
34
28
|
[workspace-root]/
|
|
@@ -40,9 +34,9 @@ Every project includes an automatically generated `style-guide.php` page that re
|
|
|
40
34
|
|
|
41
35
|
---
|
|
42
36
|
|
|
43
|
-
|
|
37
|
+
### Getting Started
|
|
44
38
|
|
|
45
|
-
|
|
39
|
+
#### 1. Scaffold a New Project
|
|
46
40
|
Squeditor includes a robust CLI scaffolding tool. It generates a completely clean, minimalist project instance fully pre-configured to utilize the advanced GSAP and UIKit engines without demo bloat.
|
|
47
41
|
|
|
48
42
|
To scaffold your new project, simply run the following command in your terminal:
|
|
@@ -51,7 +45,7 @@ npx @squeditor/squeditor-framework your-project-name
|
|
|
51
45
|
```
|
|
52
46
|
*(Replace `your-project-name` with your desired folder name).*
|
|
53
47
|
|
|
54
|
-
|
|
48
|
+
#### 2. Development
|
|
55
49
|
Navigate into your newly generated project folder, install its dependencies, and start the development server:
|
|
56
50
|
```bash
|
|
57
51
|
cd your-project-name
|
|
@@ -64,7 +58,7 @@ npm run dev
|
|
|
64
58
|
> Vite will show a link to `http://127.0.0.1:5173/` in your terminal. **Do not use that link.**
|
|
65
59
|
> Instead, always visit the PHP Server address: **`http://127.0.0.1:3001`**. This is because Squeditor Framework uses PHP for template rendering, and Vite only serves the static assets.
|
|
66
60
|
|
|
67
|
-
|
|
61
|
+
#### 3. Build for Production
|
|
68
62
|
Generate the static `dist/` folder and a distributable ZIP archive:
|
|
69
63
|
```bash
|
|
70
64
|
npm run build
|
|
@@ -72,7 +66,7 @@ npm run build
|
|
|
72
66
|
|
|
73
67
|
---
|
|
74
68
|
|
|
75
|
-
|
|
69
|
+
### Technology Stack
|
|
76
70
|
|
|
77
71
|
- **Dev Engine**: PHP 8.2+ (as a templating pre-processor)
|
|
78
72
|
- **CSS Architecture**: Tailwind CSS + SCSS (Layered Overrides)
|
|
@@ -83,13 +77,13 @@ npm run build
|
|
|
83
77
|
|
|
84
78
|
---
|
|
85
79
|
|
|
86
|
-
|
|
80
|
+
### Contributing
|
|
87
81
|
|
|
88
82
|
We welcome contributions! Whether it's adding new section variants, improving the build pipeline, or refining the token system, feel free to open a PR.
|
|
89
83
|
|
|
90
84
|
---
|
|
91
85
|
|
|
92
|
-
|
|
86
|
+
### License
|
|
93
87
|
|
|
94
88
|
Squeditor Framework is released under the [MIT License](LICENSE).
|
|
95
89
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@squeditor/squeditor-framework",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "Squeditor Framework is a high-performance, developer-first framework for building lightning-fast, static websites. It combines the power of PHP-style templating with the modern performance of Tailwind CSS, the interactivity of UIKit 3, and the speed of Vite.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"publishConfig": {
|
package/php/functions.php
CHANGED
|
@@ -90,3 +90,48 @@ function parse_frontmatter(string $file): array {
|
|
|
90
90
|
}
|
|
91
91
|
return [];
|
|
92
92
|
}
|
|
93
|
+
|
|
94
|
+
/**
|
|
95
|
+
* Load an asset file's contents directly (e.g., for inline SVG).
|
|
96
|
+
*
|
|
97
|
+
* @param string $path Path relative to src/assets/, e.g., 'static/icons/vite.svg'
|
|
98
|
+
* @return string File contents or empty string if not found
|
|
99
|
+
*/
|
|
100
|
+
function get_asset(string $path): string {
|
|
101
|
+
$full_path = SRC_PATH . '/assets/' . ltrim($path, '/');
|
|
102
|
+
if (!file_exists($full_path)) {
|
|
103
|
+
trigger_error("Asset not found: {$full_path}", E_USER_WARNING);
|
|
104
|
+
return '';
|
|
105
|
+
}
|
|
106
|
+
return file_get_contents($full_path);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* Load an image file's contents directly (e.g., for inline SVG images) or return an <img> tag.
|
|
111
|
+
*
|
|
112
|
+
* @param string $filename Filename inside src/assets/static/images/, e.g., 'logo.svg'
|
|
113
|
+
* @param string $alt Alt text for the image (if returning an <img> tag)
|
|
114
|
+
* @param string $class Custom CSS class(es) to add to the <img> tag
|
|
115
|
+
* @param bool $inline Whether to return raw file contents (e.g. inline SVG). Default false.
|
|
116
|
+
* @return string Image tag or file contents, or empty string if not found
|
|
117
|
+
*/
|
|
118
|
+
function get_image(string $filename, string $alt = '', string $class = '', bool $inline = false): string {
|
|
119
|
+
$full_path = SRC_PATH . '/assets/static/images/' . ltrim($filename, '/');
|
|
120
|
+
if (!file_exists($full_path)) {
|
|
121
|
+
trigger_error("Image not found: {$full_path}", E_USER_WARNING);
|
|
122
|
+
return '';
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
if ($inline) {
|
|
126
|
+
return file_get_contents($full_path);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
// We assume images are served from /assets/static/images/ relative to document root
|
|
130
|
+
// This path might need to be adjusted based on the server setup, but for now
|
|
131
|
+
// it returns a relative web path.
|
|
132
|
+
$web_path = '/assets/static/images/' . ltrim($filename, '/');
|
|
133
|
+
|
|
134
|
+
$class_attr = $class !== '' ? sprintf(' class="%s"', htmlspecialchars($class)) : '';
|
|
135
|
+
|
|
136
|
+
return sprintf('<img src="%s" alt="%s"%s>', htmlspecialchars($web_path), htmlspecialchars($alt), $class_attr);
|
|
137
|
+
}
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
font-size: var(--sq-btn-font-size);
|
|
11
11
|
font-weight: var(--sq-btn-font-weight);
|
|
12
12
|
|
|
13
|
-
@apply inline-flex items-center justify-center gap-2 py-0 px-4 transition-
|
|
13
|
+
@apply inline-flex items-center justify-center gap-2 py-0 px-4 transition-all duration-200 cursor-pointer outline-none no-underline;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
.btn-sm {
|
|
@@ -18,8 +18,13 @@
|
|
|
18
18
|
height: 2rem;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
+
.btn-md {
|
|
22
|
+
@apply text-base px-4;
|
|
23
|
+
height: 2.5rem;
|
|
24
|
+
}
|
|
25
|
+
|
|
21
26
|
.btn-lg {
|
|
22
|
-
@apply text-
|
|
27
|
+
@apply text-base px-6;
|
|
23
28
|
height: 3rem;
|
|
24
29
|
}
|
|
25
30
|
|
|
@@ -125,6 +130,106 @@
|
|
|
125
130
|
}
|
|
126
131
|
}
|
|
127
132
|
|
|
133
|
+
// ---------------------------------------------------------
|
|
134
|
+
// Container + Expand Container
|
|
135
|
+
// ---------------------------------------------------------
|
|
136
|
+
@layer components {
|
|
137
|
+
.container {
|
|
138
|
+
width: 100%;
|
|
139
|
+
|
|
140
|
+
@screen sm { max-width: 540px; }
|
|
141
|
+
@screen md { max-width: 720px; }
|
|
142
|
+
@screen lg { max-width: 960px; }
|
|
143
|
+
@screen xl { max-width: 1140px; }
|
|
144
|
+
@screen 2xl { max-width: 1280px; }
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* Base breakout — expands equally both sides */
|
|
148
|
+
.expand-container {
|
|
149
|
+
--scroll-width: var(--body-scroll-width, 17px);
|
|
150
|
+
--expand-size: calc((100vw - var(--scroll-width) - 100%) / -2);
|
|
151
|
+
margin-right: var(--expand-size);
|
|
152
|
+
margin-left: var(--expand-size);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.expand-container-end {
|
|
156
|
+
--scroll-width: var(--body-scroll-width, 17px);
|
|
157
|
+
/* Use width increase instead of negative margin */
|
|
158
|
+
--expand-size: calc((100vw - var(--scroll-width) - 100%) / 2);
|
|
159
|
+
width: calc(100% + var(--expand-size));
|
|
160
|
+
overflow: visible; /* let image overflow naturally */
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.expand-container-start {
|
|
164
|
+
--scroll-width: var(--body-scroll-width, 17px);
|
|
165
|
+
--expand-size: calc((100vw - var(--scroll-width) - 100%) / 2);
|
|
166
|
+
width: calc(100% + var(--expand-size));
|
|
167
|
+
margin-left: calc(var(--expand-size) * -1);
|
|
168
|
+
overflow: visible;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
// ---------------------------------------------------------
|
|
174
|
+
// Form icon group
|
|
175
|
+
// ---------------------------------------------------------
|
|
176
|
+
@layer components {
|
|
177
|
+
|
|
178
|
+
/* Base */
|
|
179
|
+
.form-icon-group {
|
|
180
|
+
position: relative;
|
|
181
|
+
display: flex;
|
|
182
|
+
flex-wrap: wrap;
|
|
183
|
+
align-items: stretch;
|
|
184
|
+
width: 100%;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.form-icon-group .form-icon {
|
|
188
|
+
display: inline-flex;
|
|
189
|
+
align-items: center;
|
|
190
|
+
justify-content: center;
|
|
191
|
+
position: absolute;
|
|
192
|
+
height: 100%;
|
|
193
|
+
background: transparent;
|
|
194
|
+
border: 0;
|
|
195
|
+
outline: 0;
|
|
196
|
+
text-decoration: none;
|
|
197
|
+
user-select: none;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/* Icon widths based on input size */
|
|
201
|
+
.form-icon-group .form-control + .form-icon { width: 3rem !important; }
|
|
202
|
+
.form-icon-group .form-control.form-control-lg + .form-icon { width: 3.5rem !important; }
|
|
203
|
+
.form-icon-group .form-control.form-control-sm + .form-icon { width: 2.5rem !important; }
|
|
204
|
+
.form-icon-group .form-control.form-control-xs + .form-icon { width: 2rem !important; }
|
|
205
|
+
|
|
206
|
+
/* Icon on the LEFT (default) */
|
|
207
|
+
.form-icon-group:not(.form-icon-flip) .form-control { padding-left: 2.75rem !important; }
|
|
208
|
+
.form-icon-group:not(.form-icon-flip) .form-control.form-control-lg { padding-left: 3.25rem !important; }
|
|
209
|
+
.form-icon-group:not(.form-icon-flip) .form-control.form-control-sm { padding-left: 2.25rem !important; }
|
|
210
|
+
.form-icon-group:not(.form-icon-flip) .form-control.form-control-xs { padding-left: 1.75rem !important; }
|
|
211
|
+
|
|
212
|
+
/* RTL — icon on the LEFT */
|
|
213
|
+
[dir="rtl"] .form-icon-group:not(.form-icon-flip) .form-control { padding-left: 1rem !important; padding-right: 2.75rem !important; }
|
|
214
|
+
[dir="rtl"] .form-icon-group:not(.form-icon-flip) .form-control.form-control-lg { padding-left: 1rem !important; padding-right: 3.25rem !important; }
|
|
215
|
+
[dir="rtl"] .form-icon-group:not(.form-icon-flip) .form-control.form-control-sm { padding-left: 1rem !important; padding-right: 2.25rem !important; }
|
|
216
|
+
[dir="rtl"] .form-icon-group:not(.form-icon-flip) .form-control.form-control-xs { padding-left: 1rem !important; padding-right: 1.75rem !important; }
|
|
217
|
+
|
|
218
|
+
/* Icon on the RIGHT (flip) */
|
|
219
|
+
.form-icon-group.form-icon-flip .form-icon { right: 0; }
|
|
220
|
+
.form-icon-group.form-icon-flip .form-control { padding-right: 2.75rem !important; }
|
|
221
|
+
.form-icon-group.form-icon-flip .form-control.form-control-lg { padding-right: 3.25rem !important; }
|
|
222
|
+
.form-icon-group.form-icon-flip .form-control.form-control-sm { padding-right: 2.25rem !important; }
|
|
223
|
+
.form-icon-group.form-icon-flip .form-control.form-control-xs { padding-right: 1.75rem !important; }
|
|
224
|
+
|
|
225
|
+
/* RTL — icon on the RIGHT (flip) */
|
|
226
|
+
[dir="rtl"] .form-icon-group.form-icon-flip .form-control { padding-right: 1rem !important; padding-left: 2.75rem !important; }
|
|
227
|
+
[dir="rtl"] .form-icon-group.form-icon-flip .form-control.form-control-lg { padding-right: 1rem !important; padding-left: 3.25rem !important; }
|
|
228
|
+
[dir="rtl"] .form-icon-group.form-icon-flip .form-control.form-control-sm { padding-right: 1rem !important; padding-left: 2.25rem !important; }
|
|
229
|
+
[dir="rtl"] .form-icon-group.form-icon-flip .form-control.form-control-xs { padding-right: 1rem !important; padding-left: 1.75rem !important; }
|
|
230
|
+
|
|
231
|
+
}
|
|
232
|
+
|
|
128
233
|
// ---------------------------------------------------------
|
|
129
234
|
// Page Transitions
|
|
130
235
|
// ---------------------------------------------------------
|
|
@@ -7,6 +7,17 @@ module.exports = {
|
|
|
7
7
|
],
|
|
8
8
|
theme: {
|
|
9
9
|
extend: {
|
|
10
|
+
screens: {
|
|
11
|
+
'sm': '459px',
|
|
12
|
+
'md': '768px',
|
|
13
|
+
'lg': '992px',
|
|
14
|
+
'xl': '1200px',
|
|
15
|
+
'2xl': '1400px',
|
|
16
|
+
},
|
|
17
|
+
container: {
|
|
18
|
+
center: true,
|
|
19
|
+
padding: '1rem', // 16px each side = 32px gutter (--bs-gutter-x)
|
|
20
|
+
},
|
|
10
21
|
colors: {
|
|
11
22
|
primary: 'var(--sq-color-primary)',
|
|
12
23
|
secondary: 'var(--sq-color-secondary)',
|
|
@@ -20,7 +31,24 @@ module.exports = {
|
|
|
20
31
|
serif: ['var(--sq-font-serif)'],
|
|
21
32
|
mono: ['var(--sq-font-mono)'],
|
|
22
33
|
},
|
|
34
|
+
fontSize: {
|
|
35
|
+
// Display sizes
|
|
36
|
+
'display-1': ['8rem', { lineHeight: '1', letterSpacing: '-0.32rem' }],
|
|
37
|
+
'display-2': ['6rem', { lineHeight: '1', letterSpacing: '-0.24rem' }],
|
|
38
|
+
'display-3': ['5rem', { lineHeight: '1', letterSpacing: '-0.2rem' }],
|
|
39
|
+
'display-4': ['4.5rem', { lineHeight: '1', letterSpacing: '-0.18rem' }],
|
|
40
|
+
'display-5': ['4rem', { lineHeight: '1', letterSpacing: '-0.16rem' }],
|
|
41
|
+
'display-6': ['3.5rem', { lineHeight: '1', letterSpacing: '-0.14rem' }],
|
|
42
|
+
|
|
43
|
+
// Heading sizes
|
|
44
|
+
'h1': ['3rem', { lineHeight: '1.1', letterSpacing: '-0.12rem' }],
|
|
45
|
+
'h2': ['2.5rem', { lineHeight: '1.1', letterSpacing: '-0.08rem' }],
|
|
46
|
+
'h3': ['2rem', { lineHeight: '1.1', letterSpacing: '-0.07rem' }],
|
|
47
|
+
'h4': ['1.5rem', { lineHeight: '1.2', letterSpacing: '-0.06rem' }],
|
|
48
|
+
'h5': ['1.25rem', { lineHeight: '1.2', letterSpacing: '-0.05rem' }],
|
|
49
|
+
'h6': ['1rem', { lineHeight: '1.2', letterSpacing: '-0.004rem' }],
|
|
50
|
+
},
|
|
23
51
|
},
|
|
24
52
|
},
|
|
25
53
|
plugins: [],
|
|
26
|
-
}
|
|
54
|
+
}
|