Bootstrap Breakpoint Helper

We love Bootstrap, it's one of the base components of the Q Framework, which is to say that it's a core part of every WordPress Application that we build.

Bootstrap Breakpoint Helper

The grid breakpoints are probably the most powerful and useful feature of Bootstrap, our developers base all layout around them, but sometimes it’s tricky to know which breakpoint is being used while debugging UI issues.

So, we created a simple Q module, which when enabled ( this one cannot be enabled on production applications, via checks for the global debug constant ) – which does a few simple things:

  • Show the current breakpoint on page load – using the handle ( xl, sm, md, lg, xl )
  • Also show the current device viewport width and height
  • On resize, track the current Bootstrap breakpoint and viewport width / height
  • On click, apply a simple css universal selector to apply borders around all elements, so that we can see how things align and – most helpfully, locate rules on elements which might cause unwanted horizontal scroll bars.

You can see a working example on CodePen and below is a simplified gist of the module class in a stand-alone html doc, taken from the Q Plugin, feel free to use and modify this script, like all software we release publicly, this is available under MIT license.

Notes:

  • Elements with the class nodebug will not have the debug borders added, thanks to the use of the :not negative selector
  • You can see the class in situ inside the Q Plugin here
  • The Bootstrap breakpoint detection script came from here
Gist List

Comments

No comments on this article yet.

Add a Comment

Your email address will not be published. Required fields are marked *

These HTML tags work: <a href=""> <code> <strong> <pre>


Connect:
OR

Our Services
Validate your ideas before diving in. Consultancy
Dig deep, audit your data, prepare for action Discovery
Get everything in shape to smooth the project path. Shaping
Let us help you realize your imagination Design
Rock-solid WordPress tools, built to last. Development
Without water, the garden will not grow. Support


Projects
Quinta de Sant’Ana, Portugal
Quinta de Sant’Ana, Portugal

Quinta de Sant'Ana overlooks the picturesque village of Gradil with its cobbled streets, white washed houses and hospitable inhabitants.


Projects: View All or
Releases
Willow
Willow

Willow is a Logic~less Template Engine built for WordPress. Willow plays nicely with ACF, is quick to learn and developer-focused.


Releases: View All or