Skip to content

Commit 79afa06

Browse files
extrabrightextrabright
committed
added setup examples
1 parent 5e5a94e commit 79afa06

File tree

12 files changed

+354
-0
lines changed

12 files changed

+354
-0
lines changed

‎examples/parcel/.sassrc.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
"includePaths": ["node_modules"]
3+
}

‎examples/parcel/package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "parcel",
3+
"description": "Compile Webpixels assets using Parcel.",
4+
"version": "0.0.0",
5+
"private": true,
6+
"source": "src/index.html",
7+
"browserslist": "> 0.5%, last 2 versions, not dead",
8+
"scripts": {
9+
"start": "parcel serve src/index.html --public-url / --dist-dir dist",
10+
"watch": "parcel watch",
11+
"build": "parcel build",
12+
"test": "echo \"Error: no test specified\" && exit 1"
13+
},
14+
"dependencies": {
15+
"@popperjs/core": "^2.11.6",
16+
"@webpixels/css": "^2.0.0-beta.13",
17+
"bootstrap": "^5.3.2"
18+
},
19+
"devDependencies": {
20+
"@parcel/transformer-sass": "^2.7.0",
21+
"parcel": "^2.7.0"
22+
}
23+
}

‎examples/parcel/src/index.html‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Webpixels w/ Parcel</title>
8+
9+
<!-- Styles -->
10+
<link rel="stylesheet" href="scss/main.scss">
11+
12+
<!-- Bootstrap Icons -->
13+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
14+
15+
<!-- JavaScript -->
16+
<script type="module" src="js/main.js"></script>
17+
</head>
18+
19+
<body>
20+
<div class="container-xxl">
21+
<div class="col-md-9 px-3 mx-auto">
22+
<div class="text-center mt-20 mb-16">
23+
<h1 class="display-3 ls-tight">
24+
Bootstrap Starter
25+
</h1>
26+
<p class="text-lg mt-5 px-lg-32">
27+
Minimal starter template for websites using Webpixels and Parcel.
28+
</p>
29+
<div class="mx-sm-n2 mt-7">
30+
<a href="https://github.com/webpixels/css/tree/master/examples/parcel" class="btn btn-primary" target="_blank">
31+
<i class="bi bi-github me-2"></i>
32+
<span>See on Github</span>
33+
</a>
34+
</div>
35+
</div>
36+
<div class="row g-6 g-lg-6">
37+
<div class="col-12 col-md-6">
38+
<div class="position-relative rounded-4 bg-body-tertiary border shadow-soft-1 shadow-4-hover">
39+
<div class="p-5 p-md-5 p-xl-10">
40+
<section>
41+
<header>
42+
<h1 class="h3 ls-tight mb-4">
43+
Hand-crafted Components
44+
</h1>
45+
</header>
46+
<p class="text-muted mb-5">
47+
Buttons, cards, tables, modal dialogs — we got it all. A complete toolkit for crafting attractive and responsive web applications with ease.
48+
</p>
49+
<footer>
50+
<a href="https://webpixels.io/library/components?ref=examples-parcel" class="fw-semibold link-primary stretched-link">
51+
<span class="me-2">Explore components</span>
52+
<i class="bi bi-arrow-right"></i>
53+
</a>
54+
</footer>
55+
</section>
56+
</div>
57+
</div>
58+
</div>
59+
<div class="col-12 col-md-6">
60+
<div class="position-relative rounded-4 bg-body-tertiary border shadow-soft-1 shadow-4-hover">
61+
<div class="p-5 p-md-5 p-xl-10">
62+
<section>
63+
<header>
64+
<h1 class="h3 ls-tight mb-4">
65+
Beautiful Forms
66+
</h1>
67+
</header>
68+
<p class="text-muted mb-5">
69+
User-friendly and time-saving, these pre-built forms ensure a seamless experience for developers, enhancing your project's usability.
70+
</p>
71+
<footer>
72+
<a href="https://webpixels.io/library/forms?ref=examples-parcel" class="fw-semibold link-primary stretched-link">
73+
<span class="me-2">Explore forms</span>
74+
<i class="bi bi-arrow-right"></i>
75+
</a>
76+
</footer>
77+
</section>
78+
</div>
79+
</div>
80+
</div>
81+
<div class="col-12 col-md-6">
82+
<div class="position-relative rounded-4 bg-body-tertiary border shadow-soft-1 shadow-4-hover">
83+
<div class="p-5 p-md-5 p-xl-10">
84+
<section>
85+
<header>
86+
<h1 class="h3 ls-tight mb-4">
87+
Marketing Sections
88+
</h1>
89+
</header>
90+
<p class="text-muted mb-5">
91+
Heroes, feature-rich sections, and newsletter sign-up forms for architecting visually stunning marketing websites hassle-free.
92+
</p>
93+
<footer>
94+
<a href="https://webpixels.io/library/sections?ref=examples-parcel" class="fw-semibold link-primary stretched-link">
95+
<span class="me-2">Explore sections</span>
96+
<i class="bi bi-arrow-right"></i>
97+
</a>
98+
</footer>
99+
</section>
100+
</div>
101+
</div>
102+
</div>
103+
<div class="col-12 col-md-6">
104+
<div class="position-relative rounded-4 bg-body-tertiary border shadow-soft-1 shadow-4-hover">
105+
<div class="p-5 p-md-5 p-xl-10">
106+
<section>
107+
<header>
108+
<h1 class="h3 ls-tight mb-4">
109+
Designer-made Pages
110+
</h1>
111+
</header>
112+
<p class="text-muted mb-5">
113+
Elevate your web projects with these designer-made pages, saving you time and effort in crafting impressive websites.
114+
</p>
115+
<footer>
116+
<a href="https://webpixels.io/library/pages?ref=examples-parcel" class="fw-semibold link-primary stretched-link">
117+
<span class="me-2">Explore pages</span>
118+
<i class="bi bi-arrow-right"></i>
119+
</a>
120+
</footer>
121+
</section>
122+
</div>
123+
</div>
124+
</div>
125+
</div>
126+
127+
<p class="text-muted text-sm fw-semibold text-center my-12">
128+
Made with <i class="bi bi-heart-fill text-danger mx-1"></i> by <a href="https://webpixels.io?ref=examples-parcel">Webpixels</a>
129+
</p>
130+
</div>
131+
</div>
132+
</body>
133+
134+
</html>

‎examples/parcel/src/js/main.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// Import all of Bootstrap's JS
2+
import * as bootstrap from 'bootstrap'

‎examples/parcel/src/scss/_variables.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// $primary: #f00;

‎examples/parcel/src/scss/main.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// Import the default variables and function
2+
@import "bootstrap/scss/functions";
3+
4+
// Your theme's variables
5+
@import "./variables";
6+
7+
// Webpixels CSS (includes Bootstrap)
8+
@import "@webpixels/css";
9+
10+
// Import extras (optional)
11+
// @import "@webpixels/css/article";
12+
// @import "@webpixels/css/section-step";

‎examples/vite/package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "vite",
3+
"description": "Include @webpixels/css UI components and individual Bootstrap 5 plugins with Vite.",
4+
"version": "0.0.0",
5+
"private": true,
6+
"stackblitz": {
7+
"startCommand": "npm start"
8+
},
9+
"scripts": {
10+
"start": "vite",
11+
"test": "echo \"Error: no test specified\" && exit 1"
12+
},
13+
"devDependencies": {
14+
"autoprefixer": "^10.4.12",
15+
"sass": "^1.55.0",
16+
"vite": "^3.0.9"
17+
},
18+
"dependencies": {
19+
"@popperjs/core": "^2.11.6",
20+
"@webpixels/css": "^2.0.0-beta.13",
21+
"bootstrap": "^5.3.2"
22+
}
23+
}

‎examples/vite/src/index.html‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Bootstrap w/ Vite</title>
8+
<link rel="stylesheet" href="scss/main.scss">
9+
<script type="module" src="./js/main.js"></script>
10+
</head>
11+
12+
<body>
13+
<div class="container-xxl">
14+
<div class="col-md-9 px-3 mx-auto">
15+
<div class="text-center mt-20 mb-16">
16+
<h1 class="display-3 ls-tight">
17+
Bootstrap Starter
18+
</h1>
19+
<p class="text-lg mt-5 px-lg-32">
20+
Minimal starter template for websites using Webpixels and Parcel.
21+
</p>
22+
<div class="mx-sm-n2 mt-7">
23+
<a href="https://github.com/webpixels/css/tree/master/examples/parcel" class="btn btn-primary" target="_blank">
24+
<i class="bi bi-github me-2"></i>
25+
<span>See on Github</span>
26+
</a>
27+
</div>
28+
</div>
29+
<div class="row g-6 g-lg-6">
30+
<div class="col-12 col-md-6">
31+
<div class="position-relative rounded-4 bg-body-tertiary border shadow-soft-1 shadow-4-hover">
32+
<div class="p-5 p-md-5 p-xl-10">
33+
<section>
34+
<header>
35+
<h1 class="h3 ls-tight mb-4">
36+
Hand-crafted Components
37+
</h1>
38+
</header>
39+
<p class="text-muted mb-5">
40+
Buttons, cards, tables, modal dialogs — we got it all. A complete toolkit for crafting attractive and responsive web applications with ease.
41+
</p>
42+
<footer>
43+
<a href="https://webpixels.io/library/components?ref=examples-parcel" class="fw-semibold link-primary stretched-link">
44+
<span class="me-2">Explore components</span>
45+
<i class="bi bi-arrow-right"></i>
46+
</a>
47+
</footer>
48+
</section>
49+
</div>
50+
</div>
51+
</div>
52+
<div class="col-12 col-md-6">
53+
<div class="position-relative rounded-4 bg-body-tertiary border shadow-soft-1 shadow-4-hover">
54+
<div class="p-5 p-md-5 p-xl-10">
55+
<section>
56+
<header>
57+
<h1 class="h3 ls-tight mb-4">
58+
Beautiful Forms
59+
</h1>
60+
</header>
61+
<p class="text-muted mb-5">
62+
User-friendly and time-saving, these pre-built forms ensure a seamless experience for developers, enhancing your project's usability.
63+
</p>
64+
<footer>
65+
<a href="https://webpixels.io/library/forms?ref=examples-parcel" class="fw-semibold link-primary stretched-link">
66+
<span class="me-2">Explore forms</span>
67+
<i class="bi bi-arrow-right"></i>
68+
</a>
69+
</footer>
70+
</section>
71+
</div>
72+
</div>
73+
</div>
74+
<div class="col-12 col-md-6">
75+
<div class="position-relative rounded-4 bg-body-tertiary border shadow-soft-1 shadow-4-hover">
76+
<div class="p-5 p-md-5 p-xl-10">
77+
<section>
78+
<header>
79+
<h1 class="h3 ls-tight mb-4">
80+
Marketing Sections
81+
</h1>
82+
</header>
83+
<p class="text-muted mb-5">
84+
Heroes, feature-rich sections, and newsletter sign-up forms for architecting visually stunning marketing websites hassle-free.
85+
</p>
86+
<footer>
87+
<a href="https://webpixels.io/library/sections?ref=examples-parcel" class="fw-semibold link-primary stretched-link">
88+
<span class="me-2">Explore sections</span>
89+
<i class="bi bi-arrow-right"></i>
90+
</a>
91+
</footer>
92+
</section>
93+
</div>
94+
</div>
95+
</div>
96+
<div class="col-12 col-md-6">
97+
<div class="position-relative rounded-4 bg-body-tertiary border shadow-soft-1 shadow-4-hover">
98+
<div class="p-5 p-md-5 p-xl-10">
99+
<section>
100+
<header>
101+
<h1 class="h3 ls-tight mb-4">
102+
Designer-made Pages
103+
</h1>
104+
</header>
105+
<p class="text-muted mb-5">
106+
Elevate your web projects with these designer-made pages, saving you time and effort in crafting impressive websites.
107+
</p>
108+
<footer>
109+
<a href="https://webpixels.io/library/pages?ref=examples-parcel" class="fw-semibold link-primary stretched-link">
110+
<span class="me-2">Explore pages</span>
111+
<i class="bi bi-arrow-right"></i>
112+
</a>
113+
</footer>
114+
</section>
115+
</div>
116+
</div>
117+
</div>
118+
</div>
119+
120+
<p class="text-muted text-sm fw-semibold text-center my-12">
121+
Made with <i class="bi bi-heart-fill text-danger mx-1"></i> by <a href="https://webpixels.io?ref=examples-parcel">Webpixels</a>
122+
</p>
123+
</div>
124+
</div>
125+
</body>
126+
127+
</html>

‎examples/vite/src/js/main.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// Import our custom CSS
2+
import '../scss/main.scss'
3+
4+
// Import all of Bootstrap's JS
5+
import * as bootstrap from 'bootstrap'

‎examples/vite/src/scss/_variables.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// $primary: #f00;

0 commit comments

Comments
 (0)