Bookmarklet showing current bootstrap breakpoint at the top left of the page

readme.md

Ajoutez le bookmarklet via cette page - GitHub ne permet pas d'en faire sur leurs pages....

bootstrap-breakpoint-indicator-bookmarklet.js

(function(){
	var script = document.createElement("script");
	script.src = "https://rawgit.com/Leimi/122905f66682fb3c4927/raw/source.js";
	document.getElementsByTagName("head")[0].appendChild(script);
})();

compiled.css

@charset "UTF-8";
.leimi-bootstrap-breakpoint-helper {
  position: fixed;
  z-index: 1337000;
  border-radius: 2px;
  font-weight: bold;
  top: 15px;
  left: 15px;
  padding: 0 5px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
  background: green;
  border: 1px solid darkgreen;
  color: white;
}
@media screen and (min-width: 1200px) {
  .leimi-bootstrap-breakpoint-helper:before {
    content: "lg ≥1200px";
  }
}
@media screen and (max-width: 1199px) {
  .leimi-bootstrap-breakpoint-helper:before {
    content: "md ≥992px";
  }
}
@media screen and (max-width: 993px) {
  .leimi-bootstrap-breakpoint-helper:before {
    content: "sm ≥768px";
  }
}
@media screen and (max-width: 768px) {
  .leimi-bootstrap-breakpoint-helper:before {
    content: "xs <768px";
  }
}

source.js

;(function(){
	$('head').append('<link rel="stylesheet" href="https://rawgit.com/Leimi/122905f66682fb3c4927/raw/compiled.css" type="text/css" />');
	$('body').append('<div class="leimi-bootstrap-breakpoint-helper" title="Clique et je disparaîtrai... :\'( :\'( :\'("></div>');
	$('body').on('click', '.leimi-bootstrap-breakpoint-helper', function(e) {
			e.preventDefault();
			$('.leimi-bootstrap-breakpoint-helper').remove();
	});
})();

source.scss

@mixin less-than($dawidth) {
  @media screen and(max-width: $dawidth) {
    @content;
  }
}

@mixin content($text) {
  &:before {
    content: $text;
  }
}

@mixin content-when-less-than($dawidth, $datext) {
  @include less-than($dawidth) {
    @include content($datext);
  }
}

.leimi-bootstrap-breakpoint-helper {
  position: fixed;
  z-index: 1337000;
  border-radius: 2px;
  font-weight: bold;
  top: 15px;
  left: 15px;
  padding: 0 5px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
  background: green;
  border: 1px solid darkgreen;
  color: white;
  @media screen and(min-width: 1200px) {
    @include content('lg ≥1200px');
  }
  @include content-when-less-than(1199px, 'md ≥992px');
  @include content-when-less-than(993px, 'sm ≥768px');
  @include content-when-less-than(768px, 'xs <768px');
}