From acabc10ceb971d32cc291fe5b9473b47c1c90b49 Mon Sep 17 00:00:00 2001
From: lucas bamberg <gitea.mailbx.me>
Date: Sun, 19 Feb 2023 00:30:32 +0100
Subject: [PATCH] add files

---
 bsBpVisualiser.js          |  6 ++++++
 bsBreakpointView.html      | 10 ++++++++++
 bsBreakpointVisualiser.css | 11 +++++++++++
 3 files changed, 27 insertions(+)
 create mode 100644 bsBpVisualiser.js
 create mode 100644 bsBreakpointView.html
 create mode 100644 bsBreakpointVisualiser.css

diff --git a/bsBpVisualiser.js b/bsBpVisualiser.js
new file mode 100644
index 0000000..fa820c8
--- /dev/null
+++ b/bsBpVisualiser.js
@@ -0,0 +1,6 @@
+export function bsBpVisualiser() {
+    $('.breakpointvisualiserWidth').text(window.innerWidth);    // initial visualisation
+    window.onresize = function reportWindowSize() {     //visualisation on resize window...
+        $('.breakpointvisualiserWidth').text(window.innerWidth);
+    }
+}
\ No newline at end of file
diff --git a/bsBreakpointView.html b/bsBreakpointView.html
new file mode 100644
index 0000000..f0f0545
--- /dev/null
+++ b/bsBreakpointView.html
@@ -0,0 +1,10 @@
+<!-- start bs breakpoint visualiser -->
+<div id="bsBreakpointVisualiser">
+    <div class="bg-primary d-sm-none"><br><span class="breakpointvisualiserWidth">-</span></div>
+    <div class="bg-secondary d-none d-sm-block d-md-none"><br><span class="breakpointvisualiserWidth">-</span></div>
+    <div class="bg-warning d-none d-md-block d-lg-none"><br><span class="breakpointvisualiserWidth">-</span></div>
+    <div class="bg-danger d-none d-lg-block d-xl-none"><br><span class="breakpointvisualiserWidth">-</span></div>
+    <div class="bg-dark text-white d-none d-xl-block d-xxl-none"><br><span class="breakpointvisualiserWidth">-</span></div>
+    <div class="bg-light d-none d-xxl-block"><span class="breakpointvisualiserWidth">-</span></div>
+</div>
+<!-- start bs breakpoint visualiser -->
\ No newline at end of file
diff --git a/bsBreakpointVisualiser.css b/bsBreakpointVisualiser.css
new file mode 100644
index 0000000..cdc9bac
--- /dev/null
+++ b/bsBreakpointVisualiser.css
@@ -0,0 +1,11 @@
+#bsBreakpointVisualiser {
+    position: absolute;
+    top: 5%;
+    left: 0;
+    z-index: 10000;
+    height: 100px;
+    width: 100px;
+    font-size: 20px;
+    font-weight: bolder;
+    opacity: .4;
+}
\ No newline at end of file