Playing with Bootstrap Studio 6

SS13HUB · Sep 30, 2022 · c694529 · c694529
1 parent 0bb4dc7
commit c694529
Show file tree

Hide file tree

Showing 38 changed files with 511 additions and 3 deletions.
diff --git a/data/BYOND_logo_280px.png b/data/BYOND_logo_280px.png
diff --git a/data/Electron_logo_1200px.png b/data/Electron_logo_1200px.png
diff --git a/main.js b/main.js
@@ -17,7 +17,9 @@ function createWindow () {
   });
 
   // and load the index.html of the app.
-  mainWindow.loadFile('src/frontend/index.html');
+  //mainWindow.loadFile('src/frontend/index.html');
+  mainWindow.loadFile('src/playground/bootstrap/Getting_Started/index.html');
+  //mainWindow.loadFile('src/playground/bootstrap/OpenBYOND_launcher/index.html');
 
   // Open the DevTools.
   mainWindow.webContents.openDevTools();

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "electron": "^20.1.3"
   },
   "dependencies": {
-    "dotenv": "^16.0.2"
+    "dotenv": "^16.0.2",
+    "jquery": "^3.6.1"
   }
 }
diff --git a/src/playground/bootstrap/Getting_Started/assets/bootstrap/css/bootstrap.min.css b/src/playground/bootstrap/Getting_Started/assets/bootstrap/css/bootstrap.min.css
diff --git a/src/playground/bootstrap/Getting_Started/assets/bootstrap/js/bootstrap.min.js b/src/playground/bootstrap/Getting_Started/assets/bootstrap/js/bootstrap.min.js
diff --git a/src/playground/bootstrap/Getting_Started/assets/css/styles.css b/src/playground/bootstrap/Getting_Started/assets/css/styles.css
@@ -0,0 +1,68 @@
+/* Page styles */
+
+body {
+  background-color: #f3f3f3;
+}
+
+/* Header */
+
+header img {
+  max-width: 120px;
+}
+
+header h1 {
+  font-weight: bold;
+  font-size: 28px;
+}
+
+/* Content */
+
+.main {
+  max-width: 720px;
+  padding: 18px 20px;
+}
+
+@media (min-width: 576px) {
+  .main {
+    padding: 36px 42px;
+  }
+}
+
+.content h2 {
+  font-size: 22px;
+  font-weight: bold;
+  margin: 40px 0 24px;
+}
+
+.content h2 span:before {
+  content: '#';
+  font-weight: normal;
+}
+
+.content h2 span {
+  color: var(--primary);
+}
+
+.content figure {
+  display: block;
+  text-align: center;
+  margin: 20px 0;
+}
+
+.content figcaption {
+  font-size: 12px;
+  padding-top: 5px;
+}
+
+.content div.dropdown {
+  margin: 40px auto;
+  width: 132px;
+}
+
+.content blockquote p {
+  font-size: 14px;
+  padding: 15px 20px;
+  border-left: 3px solid #edecf2;
+  background-color: #f9f9fb;
+}
+
diff --git a/src/playground/bootstrap/Getting_Started/assets/img/app.jpg b/src/playground/bootstrap/Getting_Started/assets/img/app.jpg
diff --git a/src/playground/bootstrap/Getting_Started/assets/img/component breadcrumbs.png b/src/playground/bootstrap/Getting_Started/assets/img/component breadcrumbs.png
diff --git a/src/playground/bootstrap/Getting_Started/assets/img/components panel.png b/src/playground/bootstrap/Getting_Started/assets/img/components panel.png
diff --git a/src/playground/bootstrap/Getting_Started/assets/img/logo.svg b/src/playground/bootstrap/Getting_Started/assets/img/logo.svg
diff --git a/src/playground/bootstrap/Getting_Started/assets/img/move button.png b/src/playground/bootstrap/Getting_Started/assets/img/move button.png
diff --git a/src/playground/bootstrap/Getting_Started/assets/img/overview panel.png b/src/playground/bootstrap/Getting_Started/assets/img/overview panel.png
diff --git a/src/playground/bootstrap/Getting_Started/assets/img/pencil button.png b/src/playground/bootstrap/Getting_Started/assets/img/pencil button.png
diff --git a/src/playground/bootstrap/Getting_Started/assets/img/selected.png b/src/playground/bootstrap/Getting_Started/assets/img/selected.png
diff --git a/src/playground/bootstrap/Getting_Started/assets/img/settings panel.png b/src/playground/bootstrap/Getting_Started/assets/img/settings panel.png
diff --git a/src/playground/bootstrap/Getting_Started/assets/img/up button.png b/src/playground/bootstrap/Getting_Started/assets/img/up button.png
diff --git a/src/playground/bootstrap/Getting_Started/assets/js/jquery.min.js b/src/playground/bootstrap/Getting_Started/assets/js/jquery.min.js
diff --git a/src/playground/bootstrap/Getting_Started/index.html b/src/playground/bootstrap/Getting_Started/index.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self'; img-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; frame-src 'self';">
+    <title>Getting Started</title>
+    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/css/styles.css">
+</head>
+
+<body>
+    <header class="p-sm-5 p-4">
+        <div class="row justify-content-center">
+            <div class="col-12 col-sm-auto text-center text-sm-right"><img src="assets/img/logo.svg" data-article-id="1234"></div>
+            <div class="col-auto text-center text-sm-left align-self-center mt-3 mt-sm-0">
+                <h1>Getting Started</h1>
+                <p class="lead">with Bootstrap Studio</p>
+            </div>
+        </div>
+    </header>
+    <div class="container bg-white border rounded border-white shadow-sm main">
+        <p class="lead">This is a quick guide that will explain the basics of designing websites with Bootstrap Studio.</p>
+        <section class="content">
+            <h2><span>1</span>&nbsp;The Application Window</h2><img class="img-fluid border rounded shadow mb-4" src="assets/img/app.jpg" alt="Application Window">
+            <p>The Bootstrap Studio window is organized around a number of functional areas:</p>
+            <ol>
+                <li><strong>Component</strong>&nbsp;panel – it consists of a <strong>Studio</strong> and <strong>Online</strong> tabs. Holds all available components which you can drag and drop onto the <strong>Stage</strong> (6) and the <strong>Overview</strong> (2).</li>
+                <li><strong>Overview</strong> panel&nbsp;– It gives you a quick overview of all components on the page.</li>
+                <li><strong>Editor</strong>&nbsp;panel – contains HTML and Styles tabs. You can click to expand it, and detach it as a separate window.</li>
+                <li><strong>Design</strong> panel&nbsp;– holds all pages, CSS, SASS, JS files and images of your design. When double clicked, pages are opened in the <strong>Stage</strong> (6) and other assets - in the <strong>Editor</strong> panel (3).</li>
+                <li><strong>Settings</strong> panel&nbsp;– consists of 3 tabs (Appearance, Options and Animation), which allow you to customize the selected component.</li>
+                <li>The <strong>Stage</strong>&nbsp;– this is where you see a preview of the page, drag and drop components and edit text.</li>
+            </ol>
+        </section>
+        <section class="content">
+            <h2><span>2</span>&nbsp;Selecting Components</h2>
+            <p>Select components by clicking them. You can tell a component is selected by the blue outline around it, and the quick action bar above: </p>
+            <figure class="figure"><img class="img-thumbnail figure-img" src="assets/img/selected.png">
+                <figcaption class="figure-caption">This is what a selected paragraph looks like.</figcaption>
+            </figure>
+            <p>With these actions you can move the item, edit its text, duplicate and hide it. Keep in mind that not all actions are available on every component. For example text editing isn't shown on images.</p>
+            <blockquote class="blockquote">
+                <p><strong>Tip:</strong>&nbsp;You can hold the&nbsp;<strong>Shift/Ctrl/Cmd</strong>&nbsp;buttons while clicking, to select multiple components at once. This lets you edit their options at the same time.</p>
+            </blockquote>
+            <p>When a component is selected, the <strong>Settings </strong>panel on the right is updated. This is the place where you can modify the styling of the component and change various options.</p>
+            <figure class="figure"><img class="img-thumbnail figure-img" src="assets/img/settings%20panel.png">
+                <figcaption class="figure-caption">The <strong>Options</strong> panel displaying settings for the paragraph.</figcaption>
+            </figure>
+            <p>There are three tabs in the Settings panel - <strong><em>Appearance</em></strong>, <strong><em>Options</em></strong> and <strong><em>Animation</em></strong>. The settings that are available in these three tabs give you a great deal of control over the design and behavior of components.</p>
+            <p>One thing to keep in mind, is that some of Bootstrap's components are actually made out of others, like this dropdown: </p>
+            <div class="dropdown"><button class="btn btn-primary btn-block dropdown-toggle shadow" aria-expanded="false" data-toggle="dropdown" type="button">Dropdown </button>
+                <div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
+            </div>
+            <p>If you attempt to select it, you will actually select the <strong>Button</strong> inside it. If you wish to see the options of the <strong>Dropdown,</strong> you need to go one component up. This is easy to do by clicking the "Up" button ( <img src="assets/img/up%20button.png"> ) on the selected component, or the entry in the breadcrumbs bar, displayed at at the top of the <strong>Settings</strong> panel: </p>
+            <figure class="figure"><img class="img-thumbnail figure-img" src="assets/img/component%20breadcrumbs.png"></figure>
+        </section>
+        <section class="content">
+            <h2><span>3</span>&nbsp;Editing Text</h2>
+            <p>Some elements like paragraphs, spans and buttons can be edited within a rich text editor. You can make text <strong>bold,</strong> <em>italic</em>, <span style="text-decoration: underline;">underlined</span>, add <a href="https://bootstrapstudio.io/" target="_blank">links</a> and <span style="text-decoration: line-through;">more</span>. </p>
+            <p>Just double click an element to edit its content, or press the pencil button ( <img src="assets/img/pencil%20button.png"> ) when the component is selected. </p>
+            <blockquote class="blockquote">
+                <p><strong>Tip:</strong> You can press the <strong>Enter</strong> key while an element is selected to start editing it, <strong>Ctrl+D/Cmd+D</strong> to duplicate and <strong>Delete</strong> to remove it. There is a&nbsp;<a href="https://bootstrapstudio.io/pages/keyboard-shortcuts" target="_blank">list of supported keyboard shortcuts</a>&nbsp;on our website.&nbsp; </p>
+            </blockquote>
+        </section>
+        <section class="content">
+            <h2><span>4</span>&nbsp;Drag and Drop</h2>
+            <p>When an element is selected, you can grab it by the move handle ( <img src="assets/img/move%20button.png"> ) to drag and drop it into other components.</p>
+            <p>Some elements like the <strong>HTML</strong> and <strong>Body</strong> are locked and can't be moved (you can recognize them by the small padlock in the <strong>Overview</strong> panel). This is done so that you don't break the page by mistake. </p>
+            <figure class="figure"><img class="img-thumbnail figure-img" src="assets/img/overview%20panel.png"></figure>
+            <p>Bootstrap Studio knows where components can be dropped and automatically adds CSS classes and other attributes that the Bootstrap Framework expects. You don't even have to think about it. </p>
+            <blockquote class="blockquote">
+                <p><strong>Tip:</strong> You can drag from the <strong>Stage</strong> and drop components on the <strong>Overview</strong> panel for greater precision. </p>
+            </blockquote>
+        </section>
+        <section class="content">
+            <h2><span>5</span> Components</h2>
+            <p>There is a large number of components available to you. You can see them in the&nbsp;<strong>Studio</strong> tab. All standard Bootstrap components are supported, and even basic HTML elements like <strong>span</strong>, <strong>div</strong>, <strong>section</strong> and more. </p>
+            <figure class="figure"><img class="img-thumbnail figure-img" src="assets/img/components%20panel.png"></figure>
+            <p>Components are organized into collapsible groups - <em>Text</em>, <em>Image</em>, <em>Forms</em> etc. You also have a special <strong>User</strong>&nbsp;group, where you can place components which you create yourself. This is a good way to extract pieces of your designs which you need often. We will cover this in the <a href="https://bootstrapstudio.io/tutorials/custom-components" target="_blank">Custom Components</a>&nbsp;tutorial. </p>
+            <p>The <strong>Online</strong> tab holds a large number of community contributed components like headers, footers, pricing tables and more, which you can search and download. When installed, they will appear in the <strong>Downloaded</strong> group.</p>
+        </section>
+        <section class="content">
+            <h2><span>6</span> Opening and Saving</h2>
+            <p>The documents that you create in Bootstrap Studio are referred to as&nbsp;<strong>Designs.</strong> You can open them and save them as files with the <strong>.bsdesign</strong> extension. </p>
+            <p>Double clicking one of these files in your file manager will open them in Bootstrap Studio. You can duplicate designs and work on multiple versions at once. </p>
+            <blockquote class="blockquote">
+                <p><strong>Tip:</strong>&nbsp;The application makes periodic backups, so you can restore your work in case of trouble. Click the <em>File &gt; Backups</em>&nbsp;menu to restore.</p>
+            </blockquote>
+        </section>
+        <section class="content">
+            <h2>You're Ready to Rock and Roll!</h2>
+            <p class="mb-4">You now know enough to create your first web page! There are quite a few powerful features that we haven't mentioned. You can learn about them by checking the tutorials on our website or by visiting the forum. Have fun! </p>
+        </section><a class="btn btn-primary shadow mr-2" role="button" href="https://bootstrapstudio.io/tutorials/">Tutorials &amp; Videos →</a><a class="btn btn-primary shadow" role="button" href="https://bootstrapstudio.io/forums/">Forum →</a>
+    </div>
+    <script>
+      // https://stackoverflow.com/a/38556376/8175291
+      window.jQuery = window.$ = require('jquery');
+    </script>
+    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
+    <script src="assets/js/jquery.min.js"></script>
+</body>
+
+</html>
diff --git a/src/playground/bootstrap/OpenBYOND_launcher/assets/bootstrap/css/bootstrap.min.css b/src/playground/bootstrap/OpenBYOND_launcher/assets/bootstrap/css/bootstrap.min.css
diff --git a/src/playground/bootstrap/OpenBYOND_launcher/assets/bootstrap/js/bootstrap.min.js b/src/playground/bootstrap/OpenBYOND_launcher/assets/bootstrap/js/bootstrap.min.js
diff --git a/src/playground/bootstrap/OpenBYOND_launcher/assets/css/Footer-Basic-icons.css b/src/playground/bootstrap/OpenBYOND_launcher/assets/css/Footer-Basic-icons.css
@@ -0,0 +1,57 @@
+.bs-icon {
+  --bs-icon-size: 0.75rem;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--bs-icon-size);
+  width: calc(var(--bs-icon-size) * 2);
+  height: calc(var(--bs-icon-size) * 2);
+  color: var(--primary);
+}
+
+.bs-icon-xs {
+  --bs-icon-size: 1rem;
+  width: calc(var(--bs-icon-size) * 1.5);
+  height: calc(var(--bs-icon-size) * 1.5);
+}
+
+.bs-icon-sm {
+  --bs-icon-size: 1rem;
+}
+
+.bs-icon-md {
+  --bs-icon-size: 1.5rem;
+}
+
+.bs-icon-lg {
+  --bs-icon-size: 2rem;
+}
+
+.bs-icon-xl {
+  --bs-icon-size: 2.5rem;
+}
+
+.bs-icon.bs-icon-primary {
+  color: var(--white);
+  background: var(--primary);
+}
+
+.bs-icon.bs-icon-primary-light {
+  color: var(--primary);
+  background: rgba(0,123,255,0.2);
+}
+
+.bs-icon.bs-icon-semi-white {
+  color: var(--primary);
+  background: rgba(255, 255, 255, .5);
+}
+
+.bs-icon.bs-icon-rounded {
+  border-radius: .5rem;
+}
+
+.bs-icon.bs-icon-circle {
+  border-radius: 50%;
+}
+
diff --git a/src/playground/bootstrap/OpenBYOND_launcher/assets/css/Pricing-Free-Paid-badges.css b/src/playground/bootstrap/OpenBYOND_launcher/assets/css/Pricing-Free-Paid-badges.css
@@ -0,0 +1,34 @@
+.bg-white-300 {
+  background: rgba(255, 255, 255, 0.3) !important;
+}
+
+.top-0 {
+  top: 0!important;
+}
+
+.end-0 {
+  right: 0!important;
+}
+
+.start-0 {
+  left: 0!important;
+}
+
+.start-50 {
+  left: 50%!important;
+}
+
+.translate-middle {
+  transform: translate(-50%,-50%)!important;
+}
+
+.rounded-bottom-left {
+  border-radius: 0;
+  border-bottom-left-radius: 0.25rem!important;
+}
+
+.rounded-bottom-right {
+  border-radius: 0;
+  border-bottom-right-radius: 0.25rem!important;
+}
+
diff --git a/src/playground/bootstrap/OpenBYOND_launcher/assets/css/Team-images.css b/src/playground/bootstrap/OpenBYOND_launcher/assets/css/Team-images.css
@@ -0,0 +1,4 @@
+.fit-cover {
+  object-fit: cover;
+}
+