Skip to content

v0.6.0

Choose a tag to compare

@trevanhetzel trevanhetzel released this 15 Sep 16:39
· 56 commits to master since this release

Bug Fixes

  • Tidied up checkboxes and radios to be formatted/positioned correctly by default (d2aa4a34)
  • Fixed z-index issue with modals (62fddc1f)
  • Allow multiple modals on the same page (607af9cd)

Features

  • Support for two off-canvas elements (52a76560)
  • Added ability to input custom value to breakpoint mixin (2372edc0)
  • Added .editorconfig file. (26175e87)
  • Toggle "triggers" now get an active class (toggle-trigger-shown) added when toggled.
  • Can now specify that a toggled element be hidden when clicking anywhere else on the page (new data attr: closeOnClick) (56a12737)

Breaking Changes

  • Grid class names have changed (6b3b0dba)

Previously, BareKit was using some very generic selectors to select all elements that start with sm, md and lg and give them some box model properties (float and padding). This caused some trouble, so I decided to separate out those box model properties to their own new class: has-gutter. This way, you can still use classes like sm-6 for widths, but aren't tied down to the padding and float if you don't want to be.

So if you want to still use the "grid" (not just the width classes), a line that previously looked like this:

<div class="sm-12 md-6 lg-1" style="background: #e1e1e1">1</div>

will now need to look like this:

<div class="sm-12 md-6 lg-1 has-gutter" style="background: #e1e1e1">1</div>
  • Off-canvas class names have changed (52a76560)

In order to support two off-canvas elements instead of one, the class names needed to set up off-canvas have changed.

This:

<div class="off-canvas-contain right-align">
    <section class="off-canvas">
        I am content off-canvas.
    </section>

    <section class="off-canvas-content">
        <a href="#" class="off-canvas-trigger">Trigger</a>
        <p>I am the main content of the page that gets pushed over when the off-canvas is open. I also contain the off-canvas trigger.</p>
    </section>
</div>

Now needs to look like this:

<div class="off-canvas-contain">
    <section class="off-canvas-left">
        I am content off-canvas.
    </section>

    <section class="off-canvas-right">
        I am content off-canvas.
    </section>

    <section class="off-canvas-content">
        <a href="#" class="off-canvas-trigger-left">Left trigger</a>
        <a href="#" class="off-canvas-trigger-right">Right trigger</a>
        <p>I am the main content of the page that gets pushed over when the off-canvas is open. I also contain the off-canvas trigger.</p>
    </section>
</div>

right-align and left-align classes have been removed from the .off-canvas-contain element and -right/-left have been appended to the .off-canvas and .off-canvas-trigger elements.