Skip to content

Commit 939164d

Browse files
vanvianenvanvianen
committed
Refactor for Parcel, add Prettier and update Stylescape
Updated project to use Parcel bundler instead of Webpack, including changes to devcontainer, scripts, and documentation. Added a .prettierrc.json for code formatting. Upgraded Stylescape to v0.3.9, restructured HTML and JS for Parcel compatibility, and added a main SCSS entry point importing Stylescape.
1 parent 0be743f commit 939164d

7 files changed

Lines changed: 201 additions & 128 deletions

File tree

‎.devcontainer/devcontainer.json‎

Lines changed: 13 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,28 @@
11
{
2-
"name": "Stylescape DevContainer",
3-
"build": {
4-
"dockerfile": "Dockerfile",
5-
"context": "."
6-
},
7-
"image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:0-18",
8-
"features": {
9-
"ghcr.io/devcontainers/features/node:1": {
10-
"version": "18"
11-
}
12-
},
2+
"name": "Stylescape Parcel Example",
3+
"image": "mcr.microsoft.com/devcontainers/javascript-node:22",
4+
"features": {},
135
"customizations": {
146
"vscode": {
157
"extensions": [
168
"dbaeumer.vscode-eslint",
179
"esbenp.prettier-vscode",
18-
"ms-python.python",
19-
"ms-vscode.vscode-typescript-next",
2010
"stylelint.vscode-stylelint",
21-
"streetsidesoftware.code-spell-checker",
22-
"redhat.vscode-yaml",
23-
"PKief.material-icon-theme",
2411
"syler.sass-indented",
25-
"vscode-icons-team.vscode-icons",
26-
"jinja.html-formatter",
27-
"ritwickdey.LiveServer",
28-
"gruntfuggly.todo-tree",
29-
"svelte.svelte-vscode",
30-
"octref.vetur" // Vue.js support
12+
"bradlc.vscode-tailwindcss",
13+
"formulahendry.auto-rename-tag",
14+
"PKief.material-icon-theme"
3115
],
3216
"settings": {
3317
"editor.formatOnSave": true,
34-
"terminal.integrated.shell.linux": "/bin/bash",
35-
"files.associations": {
36-
"*.jinja": "jinja"
18+
"editor.defaultFormatter": "esbenp.prettier-vscode",
19+
"editor.codeActionsOnSave": {
20+
"source.fixAll.eslint": "explicit"
3721
}
3822
}
3923
}
4024
},
41-
"forwardPorts": [
42-
3000
43-
],
44-
"postCreateCommand": "npm install && pip3 install -r requirements.txt",
45-
"remoteUser": "vscode",
46-
"workspaceFolder": "/workspace",
47-
"mounts": [
48-
"source=${localWorkspaceFolder},target=/workspace,type=bind,consistency=cached"
49-
],
50-
"remoteEnv": {
51-
"NODE_ENV": "development"
52-
},
53-
"containerEnv": {
54-
"NODE_ENV": "development"
55-
}
56-
}
25+
"forwardPorts": [3000],
26+
"postCreateCommand": "npm install",
27+
"remoteUser": "vscode"
28+
}

‎.prettierrc.json‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"semi": true,
3+
"singleQuote": false,
4+
"tabWidth": 4,
5+
"useTabs": false,
6+
"trailingComma": "es5",
7+
"printWidth": 100,
8+
"bracketSpacing": true,
9+
"arrowParens": "always",
10+
"endOfLine": "lf",
11+
"htmlWhitespaceSensitivity": "css",
12+
"proseWrap": "preserve"
13+
}

‎README.md‎

Lines changed: 41 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,60 @@
1-
<div align="right">
1+
# Stylescape Parcel Example
22

3-
[![GitHub License](https://img.shields.io/github/license/stylescape/example-parcel?style=flat-square&logo=readthedocs&logoColor=FFFFFF&label=&labelColor=%23041B26&color=%23041B26&link=LICENSE)](https://github.com/stylescape/example-webpack/blob/main/LICENSE)
4-
[![devContainer](https://img.shields.io/badge/devContainer-23041B26?style=flat-square&logo=Docker&logoColor=%23FFFFFF&labelColor=%23041B26&color=%23041B26)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/stylescape/example-webpack)
3+
This example demonstrates how to integrate [Stylescape](https://github.com/stylescape/stylescape) with [Parcel](https://parceljs.org/), a zero-configuration web application bundler.
54

6-
</div>
5+
## About Stylescape
76

8-
<p align="center">
9-
<img src="https://raw.githubusercontent.com/stylescape/brand/master/src/logo/logo-transparant.png" width="20%" alt="Stylescape Logo">
10-
</p>
11-
<h1 align="center" style='border-bottom: none;'>Stylescape + Parcel</h1>
12-
<h3 align="center">Example Project</h3>
7+
Stylescape is a comprehensive design system and CSS framework that provides a complete toolkit for building modern, accessible, and responsive web interfaces. It includes layout systems, interactive components, and utility classes.
138

14-
---
9+
## Installation
1510

16-
Include [Stylescape](https://scape.style)'s source Sass and individual JavaScript plugins with [Parcel](https://parceljs.org).
11+
```sh
12+
git clone https://github.com/stylescape/example-parcel.git
13+
cd example-parcel
14+
npm install
15+
```
1716

18-
---
17+
## Usage
1918

20-
## Quickstart
19+
### Development Server
2120

2221
```sh
23-
git clone https://github.com/stylescape/example-parcel.git
24-
npm install
2522
npm start
2623
```
2724

28-
---
25+
This starts the Parcel development server with hot module replacement.
26+
27+
### Production Build
28+
29+
```sh
30+
npm run build
31+
```
32+
33+
Builds optimized assets for production.
2934

30-
## Colophon
35+
## Project Structure
36+
37+
```
38+
example-parcel/
39+
├── src/
40+
│ ├── index.html # Main HTML entry point
41+
│ ├── js/ # JavaScript source files
42+
│ └── scss/ # Sass stylesheets
43+
└── package.json # Dependencies and scripts
44+
```
3145

32-
Made with ❤️ by **[Scape Agency](https://www.scape.agency)**
46+
## Features Demonstrated
3347

34-
### Contributing
48+
- Importing Stylescape via npm
49+
- Zero-config Sass compilation
50+
- Automatic JavaScript bundling
51+
- Fast development server with HMR
3552

36-
Contributions are welcome! Please fork the repository and submit a pull request with your changes.
53+
## Learn More
3754

38-
### License
55+
- [Stylescape Documentation](https://github.com/stylescape/stylescape)
56+
- [Parcel Documentation](https://parceljs.org/)
3957

40-
This project is licensed under the MIT license. See the [LICENSE](LICENSE) file for details.
58+
## License
4159

42-
---
60+
MIT

‎package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"name": "stylescape_parcel",
3-
"description": "Include Stylescape's source Sass and individual JavaScript plugins with Parcel.",
2+
"name": "stylescape-example-parcel",
3+
"description": "Stylescape example using Parcel bundler",
44
"version": "0.0.1",
55
"private": true,
66
"repository": "https://github.com/stylescape/example-parcel",
@@ -9,12 +9,12 @@
99
"startCommand": "npm start"
1010
},
1111
"scripts": {
12-
"start": "parcel serve src/index.html --public-url / --dist-dir dist",
13-
"build": "parcel build src/index.html --public-url / --dist-dir dist",
14-
"test": "npm run build"
12+
"dev": "parcel src/index.html",
13+
"start": "parcel src/index.html",
14+
"build": "parcel build src/index.html"
1515
},
1616
"dependencies": {
17-
"stylescape": "^0.3.1"
17+
"stylescape": "^0.3.9"
1818
},
1919
"devDependencies": {
2020
"@parcel/transformer-sass": "2.16.3",

‎src/index.html‎

Lines changed: 125 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,141 @@
11
<!doctype html>
2+
<html lang="en" data-theme="light">
23

3-
<html lang="en">
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Stylescape w/ Parcel</title>
8+
</head>
49

5-
<head>
6-
<meta charset="utf-8">
7-
<meta name="viewport" content="width=device-width, initial-scale=1">
8-
<link rel="stylesheet" href="scss/main.scss">
9-
<script type="module" src="js/main.js"></script>
10-
<title>Stylescape w/ Webpack</title>
11-
</head>
10+
<body>
11+
<div class="frame_main">
1212

13-
<body>
14-
<div class="">
15-
<header class="">
16-
<h1 class="">Stylescape</h1>
17-
<a href="https://github.com/stylescape/example-webpack/" target="_blank" rel="noopener">View on GitHub</a>
13+
<!-- Top Area - Header Ribbon -->
14+
<div class="frame_main__area--top">
15+
<header class="ribbon--top">
16+
<div class="ribbon__slot--horizontal_left">
17+
<a href="https://github.com/stylescape/example-parcel/" target="_blank" rel="noopener">GitHub</a>
18+
</div>
19+
<div class="ribbon__slot--horizontal_center">
20+
<h1 class="ribbon__title">Stylescape + Parcel</h1>
21+
</div>
22+
<div class="ribbon__slot--horizontal_right">
23+
<label>
24+
<input type="checkbox" data-ss="theme-toggle">
25+
Dark Mode
26+
</label>
27+
</div>
1828
</header>
29+
</div>
1930

20-
<h1>Build Stylescape with Webpack</h1>
31+
<!-- Left Sidebar -->
32+
<div class="frame_main__area--middle_left">
33+
<aside class="sidebar--left" data-ss="aside" data-ss-aside-menu data-ss-aside-switch>
34+
<button class="flipper--left" type="button">Toggle Left</button>
35+
<nav>
36+
<ul>
37+
<li><a href="#introduction">Introduction</a></li>
38+
<li><a href="#features">Features</a></li>
39+
<li><a href="#accordion">Accordion</a></li>
40+
</ul>
41+
</nav>
42+
</aside>
43+
</div>
2144

22-
<div class="">
23-
<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>
24-
<p>If this button appears blue and the link appears purple, you've done it!</p>
25-
</div>
45+
<!-- Main Content Area -->
46+
<div class="frame_main__area--middle_center">
47+
<main>
48+
<section id="introduction">
49+
<h2>Build Stylescape with Parcel</h2>
50+
<p>
51+
You've successfully loaded the Stylescape + Parcel example!
52+
This project demonstrates how to integrate <a href="https://scape.style/">Stylescape</a>
53+
with Parcel bundler to compile and bundle Sass and JavaScript.
54+
</p>
55+
</section>
2656

27-
<button type="button" class="">Toggle offcanvas</button>
28-
<a id="" class="" href="#" role="button" title="Custom popover">Example popover</a>
57+
<section id="features">
58+
<h2>Features</h2>
59+
<ul>
60+
<li>Parcel bundler with zero configuration</li>
61+
<li>Sass compilation via @parcel/transformer-sass</li>
62+
<li>Stylescape components and utilities</li>
63+
<li>Hot module replacement for development</li>
64+
</ul>
65+
</section>
2966

30-
<div class="" tabindex="-1" id="" aria-labelledby="">
31-
<div class="">
32-
<h5 class="" id="">Offcanvas</h5>
33-
<button type="button" class="" aria-label="Close"></button>
34-
</div>
35-
<div class="">
36-
<div>
37-
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
38-
</div>
39-
<div class="">
40-
<button class="" type="button" id="">
41-
Dropdown button
42-
</button>
43-
<ul class="" aria-labelledby="">
44-
<li><a class="" href="#">Action</a></li>
45-
<li><a class="" href="#">Another action</a></li>
46-
<li><a class="" href="#">Something else here</a></li>
47-
</ul>
67+
<section id="accordion">
68+
<h2>Accordion Example</h2>
69+
<div data-ss="accordion">
70+
<details>
71+
<summary>What is Stylescape?</summary>
72+
<p>
73+
Stylescape is a modern CSS framework that provides a comprehensive
74+
set of components, utilities, and design tokens for building
75+
beautiful web interfaces.
76+
</p>
77+
</details>
78+
<details>
79+
<summary>Why use Parcel?</summary>
80+
<p>
81+
Parcel is a zero-configuration web application bundler that
82+
automatically handles Sass compilation, JavaScript bundling,
83+
and asset optimization out of the box.
84+
</p>
85+
</details>
86+
<details>
87+
<summary>How to get started?</summary>
88+
<p>
89+
Simply run <code>npm install</code> to install dependencies,
90+
then <code>npm start</code> to launch the development server
91+
with hot reloading.
92+
</p>
93+
</details>
4894
</div>
49-
</div>
50-
</div>
95+
</section>
5196

52-
<hr class="">
97+
<hr>
5398

54-
<h2>Graphic Languages</h2>
55-
<p>Read more detailed information.</p>
56-
<ul class="">
57-
<li><a href="https://unit.gl/">unit.gl</a></li>
58-
<li><a href="https://icon.gl/">icon.gl</a></li>
59-
<li><a href="https://hue.gl/">hue.gl</a></li>
60-
<li><a href="https://font.gl/">font.gl</a></li>
61-
<li><a href="https://page.gl/">page.gl</a></li>
62-
<li><a href="https://pack.gl/">pack.gl</a></li>
63-
<li><a href="https://move.gl/">move.gl</a></li>
64-
</ul>
99+
<section>
100+
<h2>Graphic Languages</h2>
101+
<p>Explore the Stylescape ecosystem:</p>
102+
<ul>
103+
<li><a href="https://unit.gl/">unit.gl</a></li>
104+
<li><a href="https://icon.gl/">icon.gl</a></li>
105+
<li><a href="https://hue.gl/">hue.gl</a></li>
106+
<li><a href="https://font.gl/">font.gl</a></li>
107+
<li><a href="https://page.gl/">page.gl</a></li>
108+
<li><a href="https://pack.gl/">pack.gl</a></li>
109+
<li><a href="https://move.gl/">move.gl</a></li>
110+
</ul>
111+
</section>
112+
</main>
113+
</div>
65114

66-
<hr class="">
115+
<!-- Right Sidebar -->
116+
<div class="frame_main__area--middle_right">
117+
<aside class="sidebar--right" data-ss="aside" data-ss-aside-menu data-ss-aside-switch>
118+
<button class="flipper--right" type="button">Toggle Right</button>
119+
<div>
120+
<h3>Resources</h3>
121+
<ul>
122+
<li><a href="https://scape.style/">Documentation</a></li>
123+
<li><a href="https://github.com/stylescape/">GitHub</a></li>
124+
</ul>
125+
</div>
126+
</aside>
127+
</div>
67128

68-
<p class="">Created and open sourced by the Stylescape team. Licensed MIT.</p>
129+
<!-- Bottom Area - Footer Ribbon -->
130+
<div class="frame_main__area--bottom">
131+
<footer class="ribbon--bottom">
132+
<p>Created and open sourced by the Stylescape team. Licensed MIT.</p>
133+
</footer>
69134
</div>
70-
</body>
135+
136+
</div>
137+
138+
<script type="module" src="js/main.js"></script>
139+
</body>
140+
71141
</html>

‎src/js/main.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
1-
// Import only the Stylescape components we need
2-
3-
// Create an example
1+
import "../scss/styles.scss";
2+
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)