lba.gitea/bsbreakpointviswaliser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add files

Browse Source
This commit is contained in:
lucas bamberg 2023-02-19 00:30:32 +01:00
parent 96dac8cde5
commit acabc10ceb
3 changed files with 27 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
bsBpVisualiser.js Normal file
View File

@ -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);
}
}

10
bsBreakpointView.html Normal file
View File

@ -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 -->

11
bsBreakpointVisualiser.css Normal file
View File

@ -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;
}