Skip to content

Instantly share code, notes, and snippets.

@manuhabitela
Last active December 2, 2015 07:52
Show Gist options
  • Save manuhabitela/122905f66682fb3c4927 to your computer and use it in GitHub Desktop.
Save manuhabitela/122905f66682fb3c4927 to your computer and use it in GitHub Desktop.
Bookmarklet showing current bootstrap breakpoint at the top left of the page

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

(function(){
var script = document.createElement("script");
script.src = "https://rawgit.com/Leimi/122905f66682fb3c4927/raw/source.js";
document.getElementsByTagName("head")[0].appendChild(script);
})();
@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";
}
}
;(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();
});
})();
@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');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment