Development Tools

These items are not intended to be viewed by users and should only show up in development mode. Adding this should have a wrapper that checks an environment variable. Depending on what technology you are using will determine how you incorporate this.

Bootstrap Extensions only provides styling for these elements! It does not automatically determine if you are in development or production mode.

Getting Started

Sass

@import "node_modules/@ngblaylock/bootstrap-extensions/src/scss/_dev-tools.scss";

/*

Default Sass Variables:

$bse-prefix: "bse-" !default;
$dev: $red !default;
$dev-secondary: shade-color($dev, 50%) !default;
$dev-note-text: "Dev Note" !default;
$dev-toolbar-height: $spacer !default;

*/

CDN

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@ngblaylock/bootstrap-extensions@0.1.1/dist/css/dev-tools.min.css"
/>

Usage

Development Note

Development notes are intended to only show up in development mode and it should be hidden in production. These are great for reminders, to-dos and anything else you don't want the end user to see but might be helpful to see while developing.

This is a development note.

The title can be modified if you would like something other than "Dev Note."

<div class="dev-note">
  This is a development note.
</div>

<div
  class="dev-note"
  style="--bse-dev-note-title: 'Custom Text'"
>
  The title can be modified if you would like something other than "Dev Note."
</div>

Dev Toolbar

The development toolbar serves two purposes. The first as a quick indicator that the site you are on is a development site, and not production. The second is a way to house links to other development processes.

Bootstrap Extensions ships with basic development toolbar as well as a collapse wrapper. When you hover over the collapse wrapper, or if an element is in focus it will expand to show the links. You can modify this to fit the needs of your dev site. Using utility classes can help with placement, such as keeping it sticky to the top of your window.

<!-- This example contains basic dev-toolbar styles without the collapse wrapper -->
<div class="dev-toolbar">
  <div class="dev-toolbar-body">
    Development
    <span class="flex-fill"></span>
    <div class="hstack gap-2">
      <a
        href="#"
        class="link-light"
        >GitHub</a
      >
      <a
        href="#"
        class="link-light"
        >Firebase</a
      >
      <a
        href="#"
        class="btn btn-sm btn-light"
        >UI Kit</a
      >
    </div>
  </div>
</div>

<br />

<!-- This example expands on hover -->
<div class="dev-toolbar-collapse-container">
  <div class="dev-toolbar-collapse">
    <div class="dev-toolbar">
      <div class="dev-toolbar-body">
        Development
        <span class="flex-fill"></span>
        <div class="hstack gap-2">
          <a
            href="#"
            class="link-light"
            >GitHub</a
          >
          <a
            href="#"
            class="link-light"
            >Firebase</a
          >
          <a
            href="#"
            class="btn btn-sm btn-light"
            >UI Kit</a
          >
        </div>
      </div>
    </div>
  </div>
</div>

Media Query Helper

A media query helper is a small indicator located in the bottom-right corner of the webpage, showing the current screen size breakpoint. This is especially useful when working with responsive classes, such as columns, as it helps you quickly determine which breakpoint you're at. Depending on your project, you can either set it up to toggle on and off or keep it visible at all times while in development mode.

Try resizing the screen to see the media query helper update with the current breakpoint size in the bottom-right corner.

<div class="dev-mq-helper"></div>

Development Favicon

Dev favicons are a practical concept, not a feature directly offered by Bootstrap Extensions. They serve as a visual cue in your browser tab, helping you quickly identify whether you're on your development or production site. This is especially useful if you have both the development and production versions open.

To implement this, you'll need to set up conditional logic to load different favicons. For example, you might use a red green favicon for your dev site and the standard favicon for production.

Regular Favicon

Development Favicon

CSS Variables

--bse-dev
--bse-dev-rgb
--bse-dev-secondary
--bse-dev-secondary-rgb