Skip to content

Commit 1f69a5c

Browse files
vanvianenvanvianen
committed
Revamp layout and integrate Stylescape with Webpack
Redesigned index.html with a new layout, navigation, and sidebar structure. Updated main.js to import Stylescape styles and JavaScript. Added styles.scss to import Stylescape via Sass, completing the integration of Stylescape with Webpack.
1 parent 19127a0 commit 1f69a5c

3 files changed

Lines changed: 178 additions & 56 deletions

File tree

‎src/index.html‎

Lines changed: 173 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,191 @@
11
<!doctype html>
2-
3-
<html lang="en">
4-
2+
<html lang="en" data-theme="light">
53
<head>
6-
<meta charset="utf-8">
7-
<meta name="viewport" content="width=device-width, initial-scale=1">
8-
<title>Stylescape w/ Webpack</title>
4+
<meta charset="UTF-8" />
5+
<title>Stylescape - Webpack Example</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta name="description" content="Stylescape example using Webpack bundler" />
98
</head>
109

1110
<body>
12-
<div class="">
13-
<header class="">
14-
<h1 class="">Stylescape</h1>
15-
<a href="https://github.com/stylescape/example-webpack/" target="_blank" rel="noopener">View on GitHub</a>
16-
</header>
11+
<div class="frame_main">
12+
<!-- TOP RIBBON -->
13+
<div class="frame_main__area--top">
14+
<header class="ribbon--top" role="navigation">
15+
<div class="ribbon__slot--horizontal_left">
16+
<h1 class="ribbon__title" role="heading" aria-level="1">
17+
<div class="ribbon__title__text">
18+
<a href="/">STYLESCAPE WEBPACK</a>
19+
</div>
20+
</h1>
21+
</div>
1722

18-
<h1>Build Stylescape with Webpack</h1>
23+
<div class="ribbon__slot--horizontal_center">
24+
<button
25+
aria-label="Toggle navigation"
26+
aria-expanded="false"
27+
type="button"
28+
class="menu_button ribbon__nav_button"
29+
>
30+
☰
31+
</button>
32+
</div>
1933

20-
<div class="">
21-
<p class="">You've successfully loaded the Stylescape + Webpack example! It's loaded up with <a href="https://scape.style/">Stylescape</a> and uses Webpack to compile and bundle our Sass and JavaScript.</p>
22-
<p>If this button appears blue and the link appears purple, you've done it!</p>
34+
<div class="ribbon__slot--horizontal_right">
35+
<menu class="ribbon__menu" role="menubar">
36+
<li class="ribbon__menu__item">
37+
<input type="checkbox" id="themeToggle" data-ss="theme-toggle" />
38+
</li>
39+
</menu>
40+
</div>
41+
</header>
2342
</div>
2443

25-
<button type="button" class="">Toggle offcanvas</button>
26-
<a id="" class="" href="#" role="button" title="Custom popover">Example popover</a>
27-
28-
<div class="" tabindex="-1" id="" aria-labelledby="">
29-
<div class="">
30-
<h5 class="" id="">Offcanvas</h5>
31-
<button type="button" class="" aria-label="Close"></button>
32-
</div>
33-
<div class="">
34-
<div>
35-
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
36-
</div>
37-
<div class="">
38-
<button class="" type="button" id="">
39-
Dropdown button
40-
</button>
41-
<ul class="" aria-labelledby="">
42-
<li><a class="" href="#">Action</a></li>
43-
<li><a class="" href="#">Another action</a></li>
44-
<li><a class="" href="#">Something else here</a></li>
45-
</ul>
44+
<!-- LEFT SIDEBAR -->
45+
<div class="frame_main__area--middle_left">
46+
<aside
47+
class="sidebar--left"
48+
id="sidebar_left"
49+
role="navigation"
50+
data-ss="aside"
51+
data-ss-aside-menu="sidebar_left_menu"
52+
data-ss-aside-switch="sidebar_left_switch"
53+
>
54+
<nav class="ribbon--left ribbon--inverted" aria-label="Sidebar Left Navigation"></nav>
55+
56+
<nav id="sidebar_left_menu" class="sidebar__menu" aria-label="Sidebar Left Content Navigation">
57+
<section class="sidebar__content rail" role="region">
58+
<h2>Navigation</h2>
59+
<ul>
60+
<li><a href="#intro">Introduction</a></li>
61+
<li><a href="#setup">Setup</a></li>
62+
<li><a href="#components">Components</a></li>
63+
</ul>
64+
</section>
65+
</nav>
66+
67+
<div class="sidebar__control" role="group" aria-label="Sidebar Toggle">
68+
<button
69+
class="flipper--left"
70+
id="sidebar_left_switch"
71+
aria-pressed="false"
72+
aria-label="Toggle Left Sidebar"
73+
></button>
4674
</div>
47-
</div>
75+
</aside>
4876
</div>
4977

50-
<hr class="">
78+
<!-- MAIN CONTENT -->
79+
<div class="frame_main__area--middle_center">
80+
<main class="main_content rail" role="main">
81+
<section id="intro">
82+
<h1>Stylescape with Webpack</h1>
83+
<p>
84+
This example demonstrates using Stylescape with Webpack for bundling
85+
and optimized production builds.
86+
</p>
87+
88+
<h4>📦 Why Webpack?</h4>
89+
<ul>
90+
<li>Industry-standard bundler with extensive plugin ecosystem</li>
91+
<li>Advanced code splitting and lazy loading</li>
92+
<li>Hot Module Replacement (HMR) for development</li>
93+
<li>Full control over build configuration</li>
94+
</ul>
95+
</section>
96+
97+
<hr />
5198

52-
<h2>Graphic Languages</h2>
53-
<p>Read more detailed information.</p>
54-
<ul class="">
55-
<li><a href="https://unit.gl/">unit.gl</a></li>
56-
<li><a href="https://icon.gl/">icon.gl</a></li>
57-
<li><a href="https://hue.gl/">hue.gl</a></li>
58-
<li><a href="https://font.gl/">font.gl</a></li>
59-
<li><a href="https://page.gl/">page.gl</a></li>
60-
<li><a href="https://pack.gl/">pack.gl</a></li>
61-
<li><a href="https://move.gl/">move.gl</a></li>
62-
</ul>
99+
<section id="setup">
100+
<h2>Setup</h2>
63101

64-
<hr class="">
102+
<h3>1. Install dependencies</h3>
103+
<pre><code>npm install stylescape
104+
npm install -D webpack webpack-cli webpack-dev-server
105+
npm install -D sass sass-loader css-loader style-loader
106+
npm install -D html-webpack-plugin postcss-loader autoprefixer</code></pre>
65107

66-
<p class="">Created and open sourced by the Stylescape team. Licensed MIT.</p>
108+
<h3>2. Import in your Sass</h3>
109+
<pre><code>// src/scss/styles.scss
110+
@use "stylescape";</code></pre>
111+
112+
<h3>3. Import in your JavaScript</h3>
113+
<pre><code>// src/js/main.js
114+
import "../scss/styles.scss";
115+
import "stylescape";</code></pre>
116+
117+
<h3>4. Run development server</h3>
118+
<pre><code>npm run start</code></pre>
119+
</section>
120+
121+
<hr />
122+
123+
<section id="components">
124+
<h2>Components</h2>
125+
126+
<h3>Accordion</h3>
127+
<div data-ss="accordion">
128+
<details>
129+
<summary>What is Webpack?</summary>
130+
<p>Webpack is a powerful static module bundler for modern JavaScript applications.</p>
131+
</details>
132+
<details>
133+
<summary>Does it support Sass?</summary>
134+
<p>Yes! With sass-loader, css-loader, and style-loader, Webpack compiles and bundles Sass seamlessly.</p>
135+
</details>
136+
<details>
137+
<summary>What about optimization?</summary>
138+
<p>Webpack offers tree-shaking, code splitting, and minification for optimized production builds.</p>
139+
</details>
140+
</div>
141+
142+
<h3>Buttons</h3>
143+
<div class="button_group">
144+
<button class="button">Default Button</button>
145+
<button class="button button--primary">Primary Button</button>
146+
</div>
147+
</section>
148+
</main>
149+
</div>
150+
151+
<!-- RIGHT SIDEBAR -->
152+
<div class="frame_main__area--middle_right rail">
153+
<aside
154+
class="sidebar--right"
155+
id="sidebar_right"
156+
role="navigation"
157+
data-ss="aside"
158+
data-ss-aside-menu="sidebar_right_menu"
159+
data-ss-aside-switch="sidebar_right_switch"
160+
>
161+
<nav id="sidebar_right_menu" class="sidebar__menu" aria-label="Sidebar Right Content Navigation">
162+
<section class="sidebar__content rail" role="region">
163+
<h2>Resources</h2>
164+
<ul>
165+
<li><a href="https://github.com/stylescape/stylescape">GitHub</a></li>
166+
<li><a href="https://www.scape.style/">Documentation</a></li>
167+
<li><a href="https://webpack.js.org/">Webpack Docs</a></li>
168+
</ul>
169+
</section>
170+
</nav>
171+
172+
<div class="sidebar__control" role="group" aria-label="Sidebar Toggle">
173+
<button
174+
class="flipper--right"
175+
id="sidebar_right_switch"
176+
aria-pressed="false"
177+
aria-label="Toggle Right Sidebar"
178+
></button>
179+
</div>
180+
</aside>
181+
</div>
182+
183+
<!-- BOTTOM -->
184+
<div class="frame_main__area--bottom">
185+
<footer class="ribbon--bottom">
186+
<p>Stylescape Webpack Example | <a href="https://github.com/stylescape/example-webpack">View on GitHub</a></p>
187+
</footer>
188+
</div>
67189
</div>
68190
</body>
69191
</html>

‎src/js/main.js‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
// Import our custom CSS
2-
import "../scss/main.scss";
1+
// Import Stylescape styles
2+
import "../scss/styles.scss";
33

4-
// Import only the Stylescape components we need
5-
6-
// Create an example
4+
// Import Stylescape JavaScript
5+
import "stylescape";

‎src/scss/styles.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@use "stylescape";

0 commit comments

Comments
 (0)