Using Chrome to Write Faster Bootstrap Styles

Did you know that Google Chrome bookmarks aren’t just for storing links? They can actually do a whole lot more by running JavaScript. We’ve already used this technique to write our previous ‘hack’ to help us develop, which you can find here: Debugging Responsive Using Ghost CSS. This works by using the Chrome “javascript:” trigger, (same as how the Ghost CSS worked), which causes Chrome to run a JavaScript snippet on the current page instead of redirecting to a different page. We love this tip of using chrome to write faster Bootstrap CSS, and wanted share it!

What it does:

The screenshot above shows CSS Breakpoints in action, and demonstrates how a site opened at the col-md view would look. In the top left, we are shown which break point we are at, and this will automatically update as we increase or decrease the window size. Another great thing about it is if you want to quickly grab the media query, just click the text in the top left corner of the screen, and it’ll automatically be copied to your clipboard! No wasting time trying to figure out exactly which size you’re seeing, or remember the bootstrap sizes, (the classic: Was it 768px or 767px?).

How to get it:

To get this trigger, simply add a bookmark in Chrome, title it: “CSS Breakpoints” and then paste the following into the URL section (be sure to delete the link that is in there).

javascript: (function() { document.body.innerHTML += “<style>.breakpoints,.breakpoints:before {position: fixed;cursor: pointer;z-index: 9999;top: 0;left: 0;color: #fff;font-weight: 700;background: #000;font-size: 16px;padding: 5px 15px;}.breakpoints {color: transparent;display: none;}@media(max-width:767px) {.breakpoints.bm-visible-xs {display: block !important;}.breakpoints.bm-visible-xs:before {content: ‘col-xs | (max-width:767px)’;}.breakpoints.bm-visible-sm,.breakpoints.bm-visible-md,.breakpoints.bm-visible-lg {display: none;}}@media(max-width: 991px) and (min-width:768px) {.breakpoints.bm-visible-sm {display: block !important;}.breakpoints.bm-visible-sm:before {content: ‘col-sm | (max-width: 991px) and (min-width: 768)’;}.breakpoints.bm-visible-xs,.breakpoints.bm-visible-md,.breakpoints.bm-visible-lg {display: none;}}@media(max-width: 1199px) and (min-width:992px) {.breakpoints.bm-visible-md {display: block !important;}.breakpoints.bm-visible-md:before {content: ‘col-md | (max-width: 1199px) and (min-width: 992px)’;}.breakpoints.bm-visible-xs,.breakpoints.bm-visible-sm,.breakpoints.bm-visible-lg {display: none;}}@media(min-width:1200px) {.breakpoints.bm-visible-lg {display: block !important;}.breakpoints.bm-visible-lg:before {content: ‘col-lg | (min-width:1200px)’;}.breakpoints.bm-visible-xs,.breakpoints.bm-visible-sm,.breakpoints.bm-visible-md {display: none;}}</style><span class=’breakpoints bm-visible-lg’ onclick=’copyToClipboard(this)’>@media(min-width:1200px){ }</span><span class=’breakpoints bm-visible-md’ onclick=’copyToClipboard(this)’>@media(max-width: 1199px) and (min-width:992px){ }</span><span class=’breakpoints bm-visible-sm’ onclick=’copyToClipboard(this)’>@media(max-width: 991px) and (min-width:768px){ }</span><span class=’breakpoints bm-visible-xs’ onclick=’copyToClipboard(this)’>@media(max-width:767px){ }</span>”; })(); javascript: (window.copyToClipboard = function(element) { var $temp = $(“<input>”);$(“body”).append($temp);$temp.val($(element).text()).select();document.execCommand(“copy”);$temp.remove(); })();

How to use it:

Now that you’ve got that chunk of code pasted in there, you now have your new CSS Breakpoints tool ready. Click on the bookmark on any website you want, and voilà!

Need more Bootstrap tips, or want some help with a project? Send us a message, or give us a call today. We’d love to hear from you!

#developertips #fasterbootstrapstyleswithChrome #javascriptchrometrigger