Description
This plugin creates a tool for the bottom left of your screen which reveals the current breakpoint, APP_ENV and a grid column overlay with toggle.
Setup
The required $structure map (Setup). And the following HTML:
<div class="dev-tools" data-env="local">
<button class="dev-tools-toggle" onClick="this.nextElementSibling.hidden = !this.nextElementSibling.hidden;"></button>
<div class="dev-tools-grid" hidden></div>
</div>Notes
Why have the data-env attribute? We'd recommend you integrate this because its too easy to get confused between your local environment, staging environment, and QA environment and this label helps. For production you'll want to not include the DevTools markup.