hexandcube/readme.md

## readme.md

      
    Raw
  

              readme.md
            
          
    Bulma screen debug by Hexandcube


Put screendebug.scss in the same directory as your Bulma.sass file,
Import screendebug in your bulma.sass file using `@import "screendebug"
Add a div with id="screendebug" as a first  child, and wrap the rest of the page in a seperate div

<body>
  <div id="screendebug"></div>
  <div class="pagewrapper"></div>
    {{ Content }}
  </div>
</body>
Demo


## screendebug.scss
// Bulma screen debugger by Hexandcube - displays the current breakpoint in the bottom-left corner of the screen
// Requires <div id="screendebug"></div> that is a direct child of <body>,
// and a sibling of the main page container.
// Example structure:
// <body>
//    <div id="screendebug"></div>
//    <div id="pageContainer">
//       {{ page content }}
//    </div>

#screendebug::after {
    z-index: 500;
    content: "Mobile";
    position: fixed;
    background: black;
    color: white;
    padding: 3px 6px;
    left: 0;
    bottom: 0;
}

@media (min-width: $tablet) {
    #screendebug::after {
        content: "Tablet";
    }
}

@media (min-width: $desktop) {
    #screendebug::after {
        content: "Desktop";
    }
}

@media (min-width: $widescreen) {
    #screendebug::after {
        content: "Widescreen";
    }
}

@media (min-width: $fullhd) {
    #screendebug::after {
        content: "FullHD";
    }
}
	// Bulma screen debugger by Hexandcube - displays the current breakpoint in the bottom-left corner of the screen
	// Requires <div id="screendebug"></div> that is a direct child of <body>,
	// and a sibling of the main page container.
	// Example structure:
	// <body>
	// <div id="screendebug"></div>
	// <div id="pageContainer">
	// {{ page content }}
	// </div>

	#screendebug::after {
	z-index: 500;
	content: "Mobile";
	position: fixed;
	background: black;
	color: white;
	padding: 3px 6px;
	left: 0;
	bottom: 0;
	}

	@media (min-width: $tablet) {
	#screendebug::after {
	content: "Tablet";
	}
	}

	@media (min-width: $desktop) {
	#screendebug::after {
	content: "Desktop";
	}
	}

	@media (min-width: $widescreen) {
	#screendebug::after {
	content: "Widescreen";
	}
	}

	@media (min-width: $fullhd) {
	#screendebug::after {
	content: "FullHD";
	}
	}