@misterzik/create-kiss 1.0.0 → 1.0.2
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/LICENSE +21 -21
- package/README.md +53 -53
- package/bin/create-kiss.js +90 -90
- package/package.json +47 -47
- package/template/dist/assets/fonts/.gitkeep +0 -0
- package/template/dist/assets/images/iphone-screen.png +0 -0
- package/template/dist/assets/images/logo.png +0 -0
- package/template/dist/assets/images/simon-lee-earth.jpg +0 -0
- package/template/dist/assets/images/wavy.svg +7 -0
- package/template/dist/bundle.js +2 -0
- package/template/dist/bundle.js.map +1 -0
- package/template/dist/css/app.css +3 -0
- package/template/dist/css/app.css.map +1 -0
- package/template/dist/index.html +4 -0
- package/template/node_modules/.package-lock.json +6800 -6779
- package/template/node_modules/@babel/parser/bin/babel-parser.js +0 -0
- package/template/node_modules/@parcel/watcher-linux-x64-glibc/README.md +1 -0
- package/template/node_modules/@parcel/watcher-linux-x64-glibc/package.json +33 -0
- package/template/node_modules/@parcel/watcher-linux-x64-glibc/watcher.node +0 -0
- package/template/node_modules/@parcel/watcher-linux-x64-musl/LICENSE +21 -0
- package/template/node_modules/@parcel/watcher-linux-x64-musl/README.md +1 -0
- package/template/node_modules/@parcel/{watcher-win32-x64 → watcher-linux-x64-musl}/package.json +5 -2
- package/template/node_modules/@parcel/watcher-linux-x64-musl/watcher.node +0 -0
- package/template/node_modules/@types/html-minifier-terser/LICENSE +0 -0
- package/template/node_modules/@types/html-minifier-terser/README.md +0 -0
- package/template/node_modules/@types/html-minifier-terser/index.d.ts +0 -0
- package/template/node_modules/@types/html-minifier-terser/package.json +0 -0
- package/template/node_modules/@types/retry/LICENSE +0 -0
- package/template/node_modules/@types/retry/README.md +0 -0
- package/template/node_modules/@types/retry/index.d.ts +0 -0
- package/template/node_modules/@types/retry/package.json +0 -0
- package/template/node_modules/acorn/bin/acorn +0 -0
- package/template/node_modules/animate.css/animate.min.css +0 -0
- package/template/node_modules/ansi-html-community/bin/ansi-html +0 -0
- package/template/node_modules/baseline-browser-mapping/dist/cli.js +0 -0
- package/template/node_modules/browserslist/cli.js +0 -0
- package/template/node_modules/core-js-compat/data.json +0 -0
- package/template/node_modules/core-js-compat/entries.json +0 -0
- package/template/node_modules/core-js-compat/external.json +0 -0
- package/template/node_modules/core-js-compat/modules-by-versions.json +0 -0
- package/template/node_modules/core-js-compat/modules.json +0 -0
- package/template/node_modules/css-loader/node_modules/semver/bin/semver.js +0 -0
- package/template/node_modules/cssesc/bin/cssesc +0 -0
- package/template/node_modules/detect-libc/bin/detect-libc.js +0 -0
- package/template/node_modules/envinfo/dist/cli.js +0 -0
- package/template/node_modules/esrecurse/package.json +0 -0
- package/template/node_modules/flat/cli.js +0 -0
- package/template/node_modules/he/bin/he +0 -0
- package/template/node_modules/hpack.js/bin/benchmark +0 -0
- package/template/node_modules/html-minifier-terser/cli.js +0 -0
- package/template/node_modules/import-local/fixtures/cli.js +0 -0
- package/template/node_modules/is-docker/cli.js +0 -0
- package/template/node_modules/is-inside-container/cli.js +0 -0
- package/template/node_modules/jsesc/bin/jsesc +0 -0
- package/template/node_modules/json5/lib/cli.js +0 -0
- package/template/node_modules/micromatch/LICENSE +0 -0
- package/template/node_modules/mime/cli.js +0 -0
- package/template/node_modules/mime/src/build.js +0 -0
- package/template/node_modules/multicast-dns/cli.js +0 -0
- package/template/node_modules/nanoid/bin/nanoid.cjs +0 -0
- package/template/node_modules/node-addon-api/tools/conversion.js +0 -0
- package/template/node_modules/open/xdg-open +0 -0
- package/template/node_modules/regenerate-unicode-properties/index.js +0 -0
- package/template/node_modules/regjsparser/bin/parser +0 -0
- package/template/node_modules/resolve/bin/resolve +0 -0
- package/template/node_modules/sass/sass.js +0 -0
- package/template/node_modules/semver/bin/semver.js +0 -0
- package/template/node_modules/shell-quote/print.py +0 -0
- package/template/node_modules/terser/bin/terser +0 -0
- package/template/node_modules/terser/bin/uglifyjs +0 -0
- package/template/node_modules/unicode-canonical-property-names-ecmascript/index.js +0 -0
- package/template/node_modules/unicode-match-property-ecmascript/index.js +0 -0
- package/template/node_modules/unicode-match-property-value-ecmascript/index.js +0 -0
- package/template/node_modules/unicode-property-aliases-ecmascript/index.js +0 -0
- package/template/node_modules/update-browserslist-db/cli.js +0 -0
- package/template/node_modules/uuid/dist/bin/uuid +0 -0
- package/template/node_modules/webpack/bin/webpack.js +0 -0
- package/template/node_modules/webpack-cli/bin/cli.js +0 -0
- package/template/node_modules/webpack-dev-server/bin/webpack-dev-server.js +0 -0
- package/template/node_modules/which/bin/node-which +0 -0
- package/template/package-lock.json +7069 -7069
- package/template/package.json +37 -37
- package/template/src/assets/images/wavy.svg +6 -6
- package/template/src/index.html +287 -287
- package/template/src/js/app.js +62 -62
- package/template/src/scss/app.scss +583 -583
- package/template/webpack.config.js +116 -116
- package/template/node_modules/.bin/acorn +0 -16
- package/template/node_modules/.bin/acorn.cmd +0 -17
- package/template/node_modules/.bin/acorn.ps1 +0 -28
- package/template/node_modules/.bin/ansi-html +0 -16
- package/template/node_modules/.bin/ansi-html.cmd +0 -17
- package/template/node_modules/.bin/ansi-html.ps1 +0 -28
- package/template/node_modules/.bin/baseline-browser-mapping +0 -16
- package/template/node_modules/.bin/baseline-browser-mapping.cmd +0 -17
- package/template/node_modules/.bin/baseline-browser-mapping.ps1 +0 -28
- package/template/node_modules/.bin/browserslist +0 -16
- package/template/node_modules/.bin/browserslist.cmd +0 -17
- package/template/node_modules/.bin/browserslist.ps1 +0 -28
- package/template/node_modules/.bin/cssesc +0 -16
- package/template/node_modules/.bin/cssesc.cmd +0 -17
- package/template/node_modules/.bin/cssesc.ps1 +0 -28
- package/template/node_modules/.bin/detect-libc +0 -16
- package/template/node_modules/.bin/detect-libc.cmd +0 -17
- package/template/node_modules/.bin/detect-libc.ps1 +0 -28
- package/template/node_modules/.bin/envinfo +0 -16
- package/template/node_modules/.bin/envinfo.cmd +0 -17
- package/template/node_modules/.bin/envinfo.ps1 +0 -28
- package/template/node_modules/.bin/flat +0 -16
- package/template/node_modules/.bin/flat.cmd +0 -17
- package/template/node_modules/.bin/flat.ps1 +0 -28
- package/template/node_modules/.bin/he +0 -16
- package/template/node_modules/.bin/he.cmd +0 -17
- package/template/node_modules/.bin/he.ps1 +0 -28
- package/template/node_modules/.bin/html-minifier-terser +0 -16
- package/template/node_modules/.bin/html-minifier-terser.cmd +0 -17
- package/template/node_modules/.bin/html-minifier-terser.ps1 +0 -28
- package/template/node_modules/.bin/import-local-fixture +0 -16
- package/template/node_modules/.bin/import-local-fixture.cmd +0 -17
- package/template/node_modules/.bin/import-local-fixture.ps1 +0 -28
- package/template/node_modules/.bin/is-docker +0 -16
- package/template/node_modules/.bin/is-docker.cmd +0 -17
- package/template/node_modules/.bin/is-docker.ps1 +0 -28
- package/template/node_modules/.bin/is-inside-container +0 -16
- package/template/node_modules/.bin/is-inside-container.cmd +0 -17
- package/template/node_modules/.bin/is-inside-container.ps1 +0 -28
- package/template/node_modules/.bin/jsesc +0 -16
- package/template/node_modules/.bin/jsesc.cmd +0 -17
- package/template/node_modules/.bin/jsesc.ps1 +0 -28
- package/template/node_modules/.bin/json5 +0 -16
- package/template/node_modules/.bin/json5.cmd +0 -17
- package/template/node_modules/.bin/json5.ps1 +0 -28
- package/template/node_modules/.bin/mime +0 -16
- package/template/node_modules/.bin/mime.cmd +0 -17
- package/template/node_modules/.bin/mime.ps1 +0 -28
- package/template/node_modules/.bin/multicast-dns +0 -16
- package/template/node_modules/.bin/multicast-dns.cmd +0 -17
- package/template/node_modules/.bin/multicast-dns.ps1 +0 -28
- package/template/node_modules/.bin/nanoid +0 -16
- package/template/node_modules/.bin/nanoid.cmd +0 -17
- package/template/node_modules/.bin/nanoid.ps1 +0 -28
- package/template/node_modules/.bin/node-which +0 -16
- package/template/node_modules/.bin/node-which.cmd +0 -17
- package/template/node_modules/.bin/node-which.ps1 +0 -28
- package/template/node_modules/.bin/parser +0 -16
- package/template/node_modules/.bin/parser.cmd +0 -17
- package/template/node_modules/.bin/parser.ps1 +0 -28
- package/template/node_modules/.bin/regjsparser +0 -16
- package/template/node_modules/.bin/regjsparser.cmd +0 -17
- package/template/node_modules/.bin/regjsparser.ps1 +0 -28
- package/template/node_modules/.bin/resolve +0 -16
- package/template/node_modules/.bin/resolve.cmd +0 -17
- package/template/node_modules/.bin/resolve.ps1 +0 -28
- package/template/node_modules/.bin/sass +0 -16
- package/template/node_modules/.bin/sass.cmd +0 -17
- package/template/node_modules/.bin/sass.ps1 +0 -28
- package/template/node_modules/.bin/semver +0 -16
- package/template/node_modules/.bin/semver.cmd +0 -17
- package/template/node_modules/.bin/semver.ps1 +0 -28
- package/template/node_modules/.bin/terser +0 -16
- package/template/node_modules/.bin/terser.cmd +0 -17
- package/template/node_modules/.bin/terser.ps1 +0 -28
- package/template/node_modules/.bin/update-browserslist-db +0 -16
- package/template/node_modules/.bin/update-browserslist-db.cmd +0 -17
- package/template/node_modules/.bin/update-browserslist-db.ps1 +0 -28
- package/template/node_modules/.bin/uuid +0 -16
- package/template/node_modules/.bin/uuid.cmd +0 -17
- package/template/node_modules/.bin/uuid.ps1 +0 -28
- package/template/node_modules/.bin/webpack +0 -16
- package/template/node_modules/.bin/webpack-cli +0 -16
- package/template/node_modules/.bin/webpack-cli.cmd +0 -17
- package/template/node_modules/.bin/webpack-cli.ps1 +0 -28
- package/template/node_modules/.bin/webpack-dev-server +0 -16
- package/template/node_modules/.bin/webpack-dev-server.cmd +0 -17
- package/template/node_modules/.bin/webpack-dev-server.ps1 +0 -28
- package/template/node_modules/.bin/webpack.cmd +0 -17
- package/template/node_modules/.bin/webpack.ps1 +0 -28
- package/template/node_modules/@parcel/watcher-win32-x64/README.md +0 -1
- package/template/node_modules/@parcel/watcher-win32-x64/watcher.node +0 -0
- package/template/node_modules/css-loader/node_modules/.bin/semver +0 -16
- package/template/node_modules/css-loader/node_modules/.bin/semver.cmd +0 -17
- package/template/node_modules/css-loader/node_modules/.bin/semver.ps1 +0 -28
- package/template/src/assets/images/Thumbs.db +0 -0
- /package/template/node_modules/@parcel/{watcher-win32-x64 → watcher-linux-x64-glibc}/LICENSE +0 -0
package/template/src/index.html
CHANGED
|
@@ -1,287 +1,287 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
-
|
|
8
|
-
<title>K.I.S.S – Keepin' It Simply Stupid Starter</title>
|
|
9
|
-
<meta
|
|
10
|
-
name="description"
|
|
11
|
-
content="K.I.S.S is a Webpack + Sass starter that scaffolds bold marketing pages in seconds. Ship handcrafted landers without wrestling with boilerplate."
|
|
12
|
-
/>
|
|
13
|
-
<meta
|
|
14
|
-
name="keywords"
|
|
15
|
-
content="landing page starter, webpack sass template, marketing scaffold, create-kiss CLI"
|
|
16
|
-
/>
|
|
17
|
-
|
|
18
|
-
<!-- Social sharing -->
|
|
19
|
-
<meta
|
|
20
|
-
property="og:title"
|
|
21
|
-
content="K.I.S.S – Lightning-fast landing pages"
|
|
22
|
-
/>
|
|
23
|
-
<meta
|
|
24
|
-
property="og:description"
|
|
25
|
-
content="Spin up a complete landing page with one command using create-kiss."
|
|
26
|
-
/>
|
|
27
|
-
<meta property="og:type" content="website" />
|
|
28
|
-
<meta property="og:image" content="assets/images/logo.png" />
|
|
29
|
-
|
|
30
|
-
<!-- Typography -->
|
|
31
|
-
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
32
|
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
33
|
-
<link
|
|
34
|
-
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap"
|
|
35
|
-
rel="stylesheet"
|
|
36
|
-
/>
|
|
37
|
-
|
|
38
|
-
<link rel="stylesheet" href="css/app.css" />
|
|
39
|
-
</head>
|
|
40
|
-
|
|
41
|
-
<body class="kiss-site">
|
|
42
|
-
<header class="hero" id="top">
|
|
43
|
-
<nav class="navbar">
|
|
44
|
-
<div class="container navbar-inner">
|
|
45
|
-
<a class="navbar-brand" href="#top">
|
|
46
|
-
<img
|
|
47
|
-
src="assets/images/logo.png"
|
|
48
|
-
alt="K.I.S.S logo"
|
|
49
|
-
class="logo"
|
|
50
|
-
width="56"
|
|
51
|
-
height="56"
|
|
52
|
-
style="height: 38px"
|
|
53
|
-
/>
|
|
54
|
-
<span class="brand-copy">K.I.S.S Library</span>
|
|
55
|
-
</a>
|
|
56
|
-
|
|
57
|
-
<button
|
|
58
|
-
class="nav-toggle"
|
|
59
|
-
data-nav-toggle
|
|
60
|
-
aria-expanded="false"
|
|
61
|
-
aria-controls="primary-nav"
|
|
62
|
-
>
|
|
63
|
-
<span class="sr-only">Toggle navigation</span>
|
|
64
|
-
<span></span>
|
|
65
|
-
<span></span>
|
|
66
|
-
<span></span>
|
|
67
|
-
</button>
|
|
68
|
-
|
|
69
|
-
<ul id="primary-nav" class="nav-links">
|
|
70
|
-
<li><a href="#features">Features</a></li>
|
|
71
|
-
<li><a href="#templates">Template</a></li>
|
|
72
|
-
<li><a href="#workflow">Workflow</a></li>
|
|
73
|
-
<li>
|
|
74
|
-
<a class="btn btn-outline-light" href="#cta">Get K.I.S.S</a>
|
|
75
|
-
</li>
|
|
76
|
-
</ul>
|
|
77
|
-
</div>
|
|
78
|
-
</nav>
|
|
79
|
-
|
|
80
|
-
<div class="container hero-grid">
|
|
81
|
-
<div class="hero-copy">
|
|
82
|
-
<p class="eyebrow">Keepin' It Simply Stupid</p>
|
|
83
|
-
<h1>Ship bold marketing pages in minutes — not weekends.</h1>
|
|
84
|
-
<p>
|
|
85
|
-
The <strong>create-kiss</strong> CLI copies a polished Webpack +
|
|
86
|
-
Sass starter into your project, so you focus on storytelling while
|
|
87
|
-
the stack stays tidy.
|
|
88
|
-
</p>
|
|
89
|
-
<div class="hero-cta">
|
|
90
|
-
<code>npx @misterzik/create-kiss launch-day</code>
|
|
91
|
-
<a class="btn btn-primary" href="#templates">See what's included</a>
|
|
92
|
-
</div>
|
|
93
|
-
<ul class="hero-meta">
|
|
94
|
-
<li>Multi-page ready</li>
|
|
95
|
-
<li>SCSS + asset pipeline</li>
|
|
96
|
-
<li>Motion-ready sections</li>
|
|
97
|
-
</ul>
|
|
98
|
-
</div>
|
|
99
|
-
<div class="hero-visual">
|
|
100
|
-
<div class="hero-card">
|
|
101
|
-
<img src="assets/images/iphone-screen.png" alt="Landing preview" />
|
|
102
|
-
<div class="hero-card__badge">
|
|
103
|
-
<span class="badge-pill">Scaffolded in 12s</span>
|
|
104
|
-
</div>
|
|
105
|
-
</div>
|
|
106
|
-
<img
|
|
107
|
-
src="assets/images/wavy.svg"
|
|
108
|
-
alt=""
|
|
109
|
-
class="hero-wave"
|
|
110
|
-
aria-hidden="true"
|
|
111
|
-
/>
|
|
112
|
-
</div>
|
|
113
|
-
</div>
|
|
114
|
-
</header>
|
|
115
|
-
|
|
116
|
-
<main>
|
|
117
|
-
<section id="features" class="section-light">
|
|
118
|
-
<div class="container">
|
|
119
|
-
<div class="section-header text-center">
|
|
120
|
-
<p class="eyebrow">Why teams pick K.I.S.S</p>
|
|
121
|
-
<h2>Opinionated defaults, zero dead weight.</h2>
|
|
122
|
-
<p>
|
|
123
|
-
Everything inside <code>src/</code> is yours to tweak, while the
|
|
124
|
-
tooling stays battle-tested and boring.
|
|
125
|
-
</p>
|
|
126
|
-
</div>
|
|
127
|
-
<div class="feature-grid">
|
|
128
|
-
<article class="feature-card">
|
|
129
|
-
<h3>Designer-first layout kit</h3>
|
|
130
|
-
<p>
|
|
131
|
-
Polished hero, feature, testimonial, and pricing sections built
|
|
132
|
-
with clean SCSS partials so you can restyle instantly.
|
|
133
|
-
</p>
|
|
134
|
-
</article>
|
|
135
|
-
<article class="feature-card">
|
|
136
|
-
<h3>Modern stack defaults</h3>
|
|
137
|
-
<p>
|
|
138
|
-
Webpack 5, Babel, image/font pipelines, hot reload, and
|
|
139
|
-
tree-shaken bundles configured out of the box.
|
|
140
|
-
</p>
|
|
141
|
-
</article>
|
|
142
|
-
<article class="feature-card">
|
|
143
|
-
<h3>CLI ergonomics</h3>
|
|
144
|
-
<p>
|
|
145
|
-
Friendly prompts, name normalization, and guard rails prevent
|
|
146
|
-
overwriting existing work while keeping setup as easy as one
|
|
147
|
-
command.
|
|
148
|
-
</p>
|
|
149
|
-
</article>
|
|
150
|
-
</div>
|
|
151
|
-
</div>
|
|
152
|
-
</section>
|
|
153
|
-
|
|
154
|
-
<section id="templates" class="section-dark">
|
|
155
|
-
<div class="container template-layout">
|
|
156
|
-
<div class="template-visual">
|
|
157
|
-
<img
|
|
158
|
-
src="assets/images/simon-lee-earth.jpg"
|
|
159
|
-
alt="Template preview"
|
|
160
|
-
style="border-radius: 26px;"
|
|
161
|
-
/>
|
|
162
|
-
</div>
|
|
163
|
-
<div>
|
|
164
|
-
<p class="eyebrow text-accent">Inside the template</p>
|
|
165
|
-
<h2>Your entire narrative inside <code>src/</code>.</h2>
|
|
166
|
-
<ul class="template-list">
|
|
167
|
-
<li>
|
|
168
|
-
<strong>/src/index.html</strong> – hero, feature grid, trust
|
|
169
|
-
indicators.
|
|
170
|
-
</li>
|
|
171
|
-
<li>
|
|
172
|
-
<strong>/src/pages/</strong> – optional extra pages wired to
|
|
173
|
-
HtmlWebpack.
|
|
174
|
-
</li>
|
|
175
|
-
<li>
|
|
176
|
-
<strong>/src/scss/</strong> – tokens, mixins, and layout
|
|
177
|
-
partials with meaningful naming.
|
|
178
|
-
</li>
|
|
179
|
-
<li>
|
|
180
|
-
<strong>/src/js/app.js</strong> – animation hooks, sample
|
|
181
|
-
interactions, and space for your scripts.
|
|
182
|
-
</li>
|
|
183
|
-
</ul>
|
|
184
|
-
<a class="btn btn-outline-light" href="#cta">Generate my copy</a>
|
|
185
|
-
</div>
|
|
186
|
-
</div>
|
|
187
|
-
</section>
|
|
188
|
-
|
|
189
|
-
<section id="workflow" class="section-light">
|
|
190
|
-
<div class="container">
|
|
191
|
-
<div class="section-header text-center">
|
|
192
|
-
<p class="eyebrow">3-step developer flow</p>
|
|
193
|
-
<h2>From zero to landing page faster than brewing coffee.</h2>
|
|
194
|
-
</div>
|
|
195
|
-
<div class="workflow-steps">
|
|
196
|
-
<article class="workflow-step">
|
|
197
|
-
<span class="step-number">01</span>
|
|
198
|
-
<h3>Scaffold</h3>
|
|
199
|
-
<p>
|
|
200
|
-
Run the CLI, name your project, and let K.I.S.S copy the entire
|
|
201
|
-
template.
|
|
202
|
-
</p>
|
|
203
|
-
</article>
|
|
204
|
-
<article class="workflow-step">
|
|
205
|
-
<span class="step-number">02</span>
|
|
206
|
-
<h3>Create</h3>
|
|
207
|
-
<p>
|
|
208
|
-
Edit the HTML/SCSS sections that matter. Typography, palettes,
|
|
209
|
-
and imagery are all yours.
|
|
210
|
-
</p>
|
|
211
|
-
</article>
|
|
212
|
-
<article class="workflow-step">
|
|
213
|
-
<span class="step-number">03</span>
|
|
214
|
-
<h3>Ship</h3>
|
|
215
|
-
<p>
|
|
216
|
-
<code>npm run build</code> outputs an optimized bundle ready for
|
|
217
|
-
any static host or CDN with zero additional config.
|
|
218
|
-
</p>
|
|
219
|
-
</article>
|
|
220
|
-
</div>
|
|
221
|
-
</div>
|
|
222
|
-
</section>
|
|
223
|
-
|
|
224
|
-
<section class="section-dark testimonial">
|
|
225
|
-
<div class="container testimonial-grid">
|
|
226
|
-
<div>
|
|
227
|
-
<blockquote>
|
|
228
|
-
“Every marketing experiment deserves great visuals, not
|
|
229
|
-
boilerplate wrestling. K.I.S.S let our team draft three landing
|
|
230
|
-
pages in a single afternoon.”
|
|
231
|
-
</blockquote>
|
|
232
|
-
<p class="author">— Vimedev Agency</p>
|
|
233
|
-
</div>
|
|
234
|
-
<div class="terminal-card">
|
|
235
|
-
<div class="terminal-dots">
|
|
236
|
-
<span></span><span></span><span></span>
|
|
237
|
-
</div>
|
|
238
|
-
<pre><code>npx @misterzik/create-kiss spring-campaign
|
|
239
|
-
cd spring-campaign
|
|
240
|
-
npm install
|
|
241
|
-
npm run start</code></pre>
|
|
242
|
-
<p class="terminal-note">Hot reload + Sass pipeline ready.</p>
|
|
243
|
-
</div>
|
|
244
|
-
</div>
|
|
245
|
-
</section>
|
|
246
|
-
|
|
247
|
-
<section id="cta" class="section-light final-cta text-center">
|
|
248
|
-
<div class="container">
|
|
249
|
-
<p class="eyebrow">Ready to keep it simple?</p>
|
|
250
|
-
<h2>Spin up your next landing page with K.I.S.S today.</h2>
|
|
251
|
-
<p>
|
|
252
|
-
Stop rebuilding the same grid every launch. Scaffold once, remix
|
|
253
|
-
endlessly, and keep the creative energy on the experience.
|
|
254
|
-
</p>
|
|
255
|
-
<code class="cta-command">npx @misterzik/create-kiss your-brand</code>
|
|
256
|
-
<div class="cta-buttons">
|
|
257
|
-
<a
|
|
258
|
-
class="btn btn-primary"
|
|
259
|
-
href="https://www.npmjs.com/package/@misterzik/create-kiss"
|
|
260
|
-
>
|
|
261
|
-
View on npm
|
|
262
|
-
</a>
|
|
263
|
-
<a class="btn btn-outline-dark" href="docs/DEVELOPER.md"
|
|
264
|
-
>Contributor docs</a
|
|
265
|
-
>
|
|
266
|
-
</div>
|
|
267
|
-
</div>
|
|
268
|
-
</section>
|
|
269
|
-
</main>
|
|
270
|
-
|
|
271
|
-
<footer class="kiss-footer">
|
|
272
|
-
<div class="container footer-layout">
|
|
273
|
-
<p>
|
|
274
|
-
© <span id="year"></span> K.I.S.S Starter · Crafted by Keepin' It
|
|
275
|
-
Simply Stupid
|
|
276
|
-
</p>
|
|
277
|
-
<p>
|
|
278
|
-
<a href="https://github.com/misterzik" target="_blank" rel="noopener"
|
|
279
|
-
>GitHub</a
|
|
280
|
-
>
|
|
281
|
-
<span class="divider">·</span>
|
|
282
|
-
<a href="mailto:hello@kiss.dev">Contact</a>
|
|
283
|
-
</p>
|
|
284
|
-
</div>
|
|
285
|
-
</footer>
|
|
286
|
-
</body>
|
|
287
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
+
|
|
8
|
+
<title>K.I.S.S – Keepin' It Simply Stupid Starter</title>
|
|
9
|
+
<meta
|
|
10
|
+
name="description"
|
|
11
|
+
content="K.I.S.S is a Webpack + Sass starter that scaffolds bold marketing pages in seconds. Ship handcrafted landers without wrestling with boilerplate."
|
|
12
|
+
/>
|
|
13
|
+
<meta
|
|
14
|
+
name="keywords"
|
|
15
|
+
content="landing page starter, webpack sass template, marketing scaffold, create-kiss CLI"
|
|
16
|
+
/>
|
|
17
|
+
|
|
18
|
+
<!-- Social sharing -->
|
|
19
|
+
<meta
|
|
20
|
+
property="og:title"
|
|
21
|
+
content="K.I.S.S – Lightning-fast landing pages"
|
|
22
|
+
/>
|
|
23
|
+
<meta
|
|
24
|
+
property="og:description"
|
|
25
|
+
content="Spin up a complete landing page with one command using create-kiss."
|
|
26
|
+
/>
|
|
27
|
+
<meta property="og:type" content="website" />
|
|
28
|
+
<meta property="og:image" content="assets/images/logo.png" />
|
|
29
|
+
|
|
30
|
+
<!-- Typography -->
|
|
31
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
32
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
33
|
+
<link
|
|
34
|
+
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap"
|
|
35
|
+
rel="stylesheet"
|
|
36
|
+
/>
|
|
37
|
+
|
|
38
|
+
<link rel="stylesheet" href="css/app.css" />
|
|
39
|
+
</head>
|
|
40
|
+
|
|
41
|
+
<body class="kiss-site">
|
|
42
|
+
<header class="hero" id="top">
|
|
43
|
+
<nav class="navbar">
|
|
44
|
+
<div class="container navbar-inner">
|
|
45
|
+
<a class="navbar-brand" href="#top">
|
|
46
|
+
<img
|
|
47
|
+
src="assets/images/logo.png"
|
|
48
|
+
alt="K.I.S.S logo"
|
|
49
|
+
class="logo"
|
|
50
|
+
width="56"
|
|
51
|
+
height="56"
|
|
52
|
+
style="height: 38px"
|
|
53
|
+
/>
|
|
54
|
+
<span class="brand-copy">K.I.S.S Library</span>
|
|
55
|
+
</a>
|
|
56
|
+
|
|
57
|
+
<button
|
|
58
|
+
class="nav-toggle"
|
|
59
|
+
data-nav-toggle
|
|
60
|
+
aria-expanded="false"
|
|
61
|
+
aria-controls="primary-nav"
|
|
62
|
+
>
|
|
63
|
+
<span class="sr-only">Toggle navigation</span>
|
|
64
|
+
<span></span>
|
|
65
|
+
<span></span>
|
|
66
|
+
<span></span>
|
|
67
|
+
</button>
|
|
68
|
+
|
|
69
|
+
<ul id="primary-nav" class="nav-links">
|
|
70
|
+
<li><a href="#features">Features</a></li>
|
|
71
|
+
<li><a href="#templates">Template</a></li>
|
|
72
|
+
<li><a href="#workflow">Workflow</a></li>
|
|
73
|
+
<li>
|
|
74
|
+
<a class="btn btn-outline-light" href="#cta">Get K.I.S.S</a>
|
|
75
|
+
</li>
|
|
76
|
+
</ul>
|
|
77
|
+
</div>
|
|
78
|
+
</nav>
|
|
79
|
+
|
|
80
|
+
<div class="container hero-grid">
|
|
81
|
+
<div class="hero-copy">
|
|
82
|
+
<p class="eyebrow">Keepin' It Simply Stupid</p>
|
|
83
|
+
<h1>Ship bold marketing pages in minutes — not weekends.</h1>
|
|
84
|
+
<p>
|
|
85
|
+
The <strong>create-kiss</strong> CLI copies a polished Webpack +
|
|
86
|
+
Sass starter into your project, so you focus on storytelling while
|
|
87
|
+
the stack stays tidy.
|
|
88
|
+
</p>
|
|
89
|
+
<div class="hero-cta">
|
|
90
|
+
<code>npx @misterzik/create-kiss launch-day</code>
|
|
91
|
+
<a class="btn btn-primary" href="#templates">See what's included</a>
|
|
92
|
+
</div>
|
|
93
|
+
<ul class="hero-meta">
|
|
94
|
+
<li>Multi-page ready</li>
|
|
95
|
+
<li>SCSS + asset pipeline</li>
|
|
96
|
+
<li>Motion-ready sections</li>
|
|
97
|
+
</ul>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="hero-visual">
|
|
100
|
+
<div class="hero-card">
|
|
101
|
+
<img src="assets/images/iphone-screen.png" alt="Landing preview" />
|
|
102
|
+
<div class="hero-card__badge">
|
|
103
|
+
<span class="badge-pill">Scaffolded in 12s</span>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
<img
|
|
107
|
+
src="assets/images/wavy.svg"
|
|
108
|
+
alt=""
|
|
109
|
+
class="hero-wave"
|
|
110
|
+
aria-hidden="true"
|
|
111
|
+
/>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
</header>
|
|
115
|
+
|
|
116
|
+
<main>
|
|
117
|
+
<section id="features" class="section-light">
|
|
118
|
+
<div class="container">
|
|
119
|
+
<div class="section-header text-center">
|
|
120
|
+
<p class="eyebrow">Why teams pick K.I.S.S</p>
|
|
121
|
+
<h2>Opinionated defaults, zero dead weight.</h2>
|
|
122
|
+
<p>
|
|
123
|
+
Everything inside <code>src/</code> is yours to tweak, while the
|
|
124
|
+
tooling stays battle-tested and boring.
|
|
125
|
+
</p>
|
|
126
|
+
</div>
|
|
127
|
+
<div class="feature-grid">
|
|
128
|
+
<article class="feature-card">
|
|
129
|
+
<h3>Designer-first layout kit</h3>
|
|
130
|
+
<p>
|
|
131
|
+
Polished hero, feature, testimonial, and pricing sections built
|
|
132
|
+
with clean SCSS partials so you can restyle instantly.
|
|
133
|
+
</p>
|
|
134
|
+
</article>
|
|
135
|
+
<article class="feature-card">
|
|
136
|
+
<h3>Modern stack defaults</h3>
|
|
137
|
+
<p>
|
|
138
|
+
Webpack 5, Babel, image/font pipelines, hot reload, and
|
|
139
|
+
tree-shaken bundles configured out of the box.
|
|
140
|
+
</p>
|
|
141
|
+
</article>
|
|
142
|
+
<article class="feature-card">
|
|
143
|
+
<h3>CLI ergonomics</h3>
|
|
144
|
+
<p>
|
|
145
|
+
Friendly prompts, name normalization, and guard rails prevent
|
|
146
|
+
overwriting existing work while keeping setup as easy as one
|
|
147
|
+
command.
|
|
148
|
+
</p>
|
|
149
|
+
</article>
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
</section>
|
|
153
|
+
|
|
154
|
+
<section id="templates" class="section-dark">
|
|
155
|
+
<div class="container template-layout">
|
|
156
|
+
<div class="template-visual">
|
|
157
|
+
<img
|
|
158
|
+
src="assets/images/simon-lee-earth.jpg"
|
|
159
|
+
alt="Template preview"
|
|
160
|
+
style="border-radius: 26px;"
|
|
161
|
+
/>
|
|
162
|
+
</div>
|
|
163
|
+
<div>
|
|
164
|
+
<p class="eyebrow text-accent">Inside the template</p>
|
|
165
|
+
<h2>Your entire narrative inside <code>src/</code>.</h2>
|
|
166
|
+
<ul class="template-list">
|
|
167
|
+
<li>
|
|
168
|
+
<strong>/src/index.html</strong> – hero, feature grid, trust
|
|
169
|
+
indicators.
|
|
170
|
+
</li>
|
|
171
|
+
<li>
|
|
172
|
+
<strong>/src/pages/</strong> – optional extra pages wired to
|
|
173
|
+
HtmlWebpack.
|
|
174
|
+
</li>
|
|
175
|
+
<li>
|
|
176
|
+
<strong>/src/scss/</strong> – tokens, mixins, and layout
|
|
177
|
+
partials with meaningful naming.
|
|
178
|
+
</li>
|
|
179
|
+
<li>
|
|
180
|
+
<strong>/src/js/app.js</strong> – animation hooks, sample
|
|
181
|
+
interactions, and space for your scripts.
|
|
182
|
+
</li>
|
|
183
|
+
</ul>
|
|
184
|
+
<a class="btn btn-outline-light" href="#cta">Generate my copy</a>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
</section>
|
|
188
|
+
|
|
189
|
+
<section id="workflow" class="section-light">
|
|
190
|
+
<div class="container">
|
|
191
|
+
<div class="section-header text-center">
|
|
192
|
+
<p class="eyebrow">3-step developer flow</p>
|
|
193
|
+
<h2>From zero to landing page faster than brewing coffee.</h2>
|
|
194
|
+
</div>
|
|
195
|
+
<div class="workflow-steps">
|
|
196
|
+
<article class="workflow-step">
|
|
197
|
+
<span class="step-number">01</span>
|
|
198
|
+
<h3>Scaffold</h3>
|
|
199
|
+
<p>
|
|
200
|
+
Run the CLI, name your project, and let K.I.S.S copy the entire
|
|
201
|
+
template.
|
|
202
|
+
</p>
|
|
203
|
+
</article>
|
|
204
|
+
<article class="workflow-step">
|
|
205
|
+
<span class="step-number">02</span>
|
|
206
|
+
<h3>Create</h3>
|
|
207
|
+
<p>
|
|
208
|
+
Edit the HTML/SCSS sections that matter. Typography, palettes,
|
|
209
|
+
and imagery are all yours.
|
|
210
|
+
</p>
|
|
211
|
+
</article>
|
|
212
|
+
<article class="workflow-step">
|
|
213
|
+
<span class="step-number">03</span>
|
|
214
|
+
<h3>Ship</h3>
|
|
215
|
+
<p>
|
|
216
|
+
<code>npm run build</code> outputs an optimized bundle ready for
|
|
217
|
+
any static host or CDN with zero additional config.
|
|
218
|
+
</p>
|
|
219
|
+
</article>
|
|
220
|
+
</div>
|
|
221
|
+
</div>
|
|
222
|
+
</section>
|
|
223
|
+
|
|
224
|
+
<section class="section-dark testimonial">
|
|
225
|
+
<div class="container testimonial-grid">
|
|
226
|
+
<div>
|
|
227
|
+
<blockquote>
|
|
228
|
+
“Every marketing experiment deserves great visuals, not
|
|
229
|
+
boilerplate wrestling. K.I.S.S let our team draft three landing
|
|
230
|
+
pages in a single afternoon.”
|
|
231
|
+
</blockquote>
|
|
232
|
+
<p class="author">— Vimedev Agency</p>
|
|
233
|
+
</div>
|
|
234
|
+
<div class="terminal-card">
|
|
235
|
+
<div class="terminal-dots">
|
|
236
|
+
<span></span><span></span><span></span>
|
|
237
|
+
</div>
|
|
238
|
+
<pre><code>npx @misterzik/create-kiss spring-campaign
|
|
239
|
+
cd spring-campaign
|
|
240
|
+
npm install
|
|
241
|
+
npm run start</code></pre>
|
|
242
|
+
<p class="terminal-note">Hot reload + Sass pipeline ready.</p>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
</section>
|
|
246
|
+
|
|
247
|
+
<section id="cta" class="section-light final-cta text-center">
|
|
248
|
+
<div class="container">
|
|
249
|
+
<p class="eyebrow">Ready to keep it simple?</p>
|
|
250
|
+
<h2>Spin up your next landing page with K.I.S.S today.</h2>
|
|
251
|
+
<p>
|
|
252
|
+
Stop rebuilding the same grid every launch. Scaffold once, remix
|
|
253
|
+
endlessly, and keep the creative energy on the experience.
|
|
254
|
+
</p>
|
|
255
|
+
<code class="cta-command">npx @misterzik/create-kiss your-brand</code>
|
|
256
|
+
<div class="cta-buttons">
|
|
257
|
+
<a
|
|
258
|
+
class="btn btn-primary"
|
|
259
|
+
href="https://www.npmjs.com/package/@misterzik/create-kiss"
|
|
260
|
+
>
|
|
261
|
+
View on npm
|
|
262
|
+
</a>
|
|
263
|
+
<a class="btn btn-outline-dark" href="docs/DEVELOPER.md"
|
|
264
|
+
>Contributor docs</a
|
|
265
|
+
>
|
|
266
|
+
</div>
|
|
267
|
+
</div>
|
|
268
|
+
</section>
|
|
269
|
+
</main>
|
|
270
|
+
|
|
271
|
+
<footer class="kiss-footer">
|
|
272
|
+
<div class="container footer-layout">
|
|
273
|
+
<p>
|
|
274
|
+
© <span id="year"></span> K.I.S.S Starter · Crafted by Keepin' It
|
|
275
|
+
Simply Stupid
|
|
276
|
+
</p>
|
|
277
|
+
<p>
|
|
278
|
+
<a href="https://github.com/misterzik" target="_blank" rel="noopener"
|
|
279
|
+
>GitHub</a
|
|
280
|
+
>
|
|
281
|
+
<span class="divider">·</span>
|
|
282
|
+
<a href="mailto:hello@kiss.dev">Contact</a>
|
|
283
|
+
</p>
|
|
284
|
+
</div>
|
|
285
|
+
</footer>
|
|
286
|
+
</body>
|
|
287
|
+
</html>
|