trevanhetzel/barekit

A bare minimum responsive framework

Hi, I'm Trevan and I need to update my profile. 👋

barekit's Issues

<li> in tab are not displayed

<li> in tab content are not displayed.
Not surprising, since there is a tab-panel li { display: none;} rule to manage the closed tabs.

Test code

<ul class="tabs">
    <li class="tab-trigger--open"><a href="#">Tab title 1</a></li>
    <li><a href="#">Tab title 2</a></li>
    <li><a href="#">Tab title 3</a></li>
</ul>

<ul class="tabs-panels">
    <li class="tab-panel--open">Tab content 1</li>
    <li>Tab <ul><li>I will NOT be displayed</li></ul>content 2</li>
    <li>Tab content 3</li>
</ul>

Make a loop for grid Sass & Stylus

Contributing - Editorconfig File

Suggesting the inclusion of an .editorconfig to help with contributing to Barekit. http://editorconfig.org/

Bootstrap's .editorconfig may be a good starting point: https://github.com/twbs/bootstrap/blob/master/.editorconfig

NPM Package

Would it be possible to publish barekit as a NPM package as well?

Box-shadow on form elements

I added a box-shadow (and outline: none) to all form elements to ensure that they matched the custom box shadows used on the custom radios and checkboxes (so they were "accessible" via tabbing). Now I'm thinking that's a bad idea because they're hard to overwrite.

Off-canvas issues

1. Tapping (using a touch device) outside the off-canvas does not close it. Tapping on the trigger closes it, but not anywhere else. Clicking (using a desktop browser) outside the off-canvas DOES close it, so must be a click event issue with the JS.
2. Need to hide the off-canvas when you're out of the small breakpoint
3. Off-canvas should be 100% height of the page, not the window. Currently, content that doesn't fit in the height of the window gets cut off.

Toggle additions

1. Add active class to trigger when open
2. Provide option to close toggled element on click "off" (anywhere but in the element itself)

Fast Access to Breakpoints?

Maybe it's a dumb question... but does barekit include a baked-in method to target/select content for medium, and large breakpoints in scss? or is this something I need to write myself? I'm still a framework/scss noob and it's just not obvious to me. Is this even the place to be asking such questions? Probably not...

Mixins and variables aren't accessible in Rails project

Using Rails 4.1.4 and the asset pipeline and @import'ing BareKit, mixins and variables aren't accessible in other @import'ed files.

Can currently only have one off-canvas

sm- classes

Using too generic of selectors like .sm- is kind of bringing up trouble. For instance, I just tried to use .md-text-left to left justify something at the small breakpoint. But that then triggered the box model and float properties on that element that was intended to be inline.

Checkbox is off center in Chrome v36

The custom checkbox has the check mark off center on the demo page.

Some elements display over active modal popup

When the modal is active, some content overlays. Found in Chrome and Firefox (mac os)

`<a>` in accordion content triggers the open/close

A HTML link <a> in a accordion content will trigger the collapse of the accordion.

Test code

<dl class="accordion" data-options='{ "multiExpand": true }'>
    <dt><a href="#">Accordion title 1</a></dt>
    <dd>Accordion content 1</dd>

    <dt><a href="#">Accordion title 2</a></dt>
    <dd>Accordion <a href="http://www.example.com">I won't go you anywhere...</a>content 2</dd>

    <dt><a href="#">Accordion title 3</a></dt>
    <dd>Accordion content 3</dd>
</dl>

Inserting modules after page load

First of all, let me say that this library is completely brilliant!

I've been playing around with it a bit and I think I've run into a small, but easily fixable limitation.

If I insert new markup to create modules into the DOM after it has initially loaded, they don't work. For example:

$('body').append('<a href="#" class="toggle-trigger" data-options=\'{ "toggle": "toggle-example" }\'>Toggle</a>');
$('body').append(' <div class="toggle" id="toggle-example">Hello!</div>');

would not instantiate the JavaScript for a "toggle."

This would be an issue with any templates that are rendered on the client-side.

Here are two solutions I've thought of:

Watch the DOM via $.delegate()

This solution wouldn't require any changes from the consumer's standpoint, but it could end up being a lot to manage for the browser.

Taking the toggle module as an example, you could use delegate() to listen for changes even to elements that are not in the DOM at the time of execution.

jQuery(function ($) {

    var Toggle = function () {
        this.init();
    };

    Toggle.prototype.init = function () {
        var self = this;

        $('body').delegate('.toggle-trigger', 'click', function (e) {
            var $this = $(this),
                options = $this.data('options');

            e.preventDefault();

            self.doToggle($this, options);
        });
    };

    Toggle.prototype.doToggle = function ($this, options) {
        var $target = $('#' + options.toggle);

        $target.toggleClass('toggle-shown');
    };

    new Toggle();

});

Personally, I would recommend another solution:

Extend the modules as jQuery plugins

If each module was available as a jQuery plugin in addition to the execution at runtime that is currently being provided, it could be instantiated even after the code is loaded.

The update would be fairly trivial. Taking the toggle module as an example, it would just mean changing a couple of lines:

jQuery(function ($) {

    $.fn.toggleModule = function () {

        var $toggleTrigger = $(this);

        var Toggle = function () {
            this.init();
        };

        Toggle.prototype.init = function () {
            var self = this;

            $toggleTrigger.on('click', function (e) {
                var $this = $(this),
                    options = $this.data('options');

                e.preventDefault();

                self.doToggle($this, options);
            });
        };

        Toggle.prototype.doToggle = function ($this, options) {
            var $target = $('#' + options.toggle);

            $target.toggleClass('toggle-shown');
        };

        $toggleTrigger.length ? new Toggle : false;

    };

    $('.toggle-trigger').toggleModule();

});

and then you could call it later as needed using:

$('#my-element').toggleModule();

I personally think a small update like that would make using bare ninja easier to use with existing frameworks with client-side templates. If you'd like, I could even make some modifications and get in a pull request.

Usage examples navigation on small devices

The tabs navigation (and all unselected panels) seem to get display: none on small devices.
Tested with FF 31.0 on win7 and Chrome 36 on Nexus 4.

Utilize anchors for tabs

Currently, clicking a tab anchor prevents its href from being followed. We should allow hrefs to be followed so you can navigate to a URL with the hash (ex: a2labs.github.io/bare-ninja#accordion)

Columns don't float if there are other classes defined

On elements that have other classes defined besides the sm-*-type grid classes, the float property doesn't get picked up. I believe it's because I'm using this selector:

[class|=sm], [class|=md], [class|=lg]

Modal is dismissed by *any* right-click

That's pretty much it.
It triggers dismissal even if the right-click occurs in/on the modal, say if someone was going to paste some text using the contextual menu.

Two bugs in the example.html file

$('.dropdown-nav').bnDropdownNav(); is not the right plugin name

And for some reason the off canvas didn't work when lazy loaded.

Conflict with Modernizr (SMIL)

I was using a Modernizr CDN that has SMIL enabled and noticed padding on the body. Seems to be from the class*=sm selector picking up the smil class name on the html element.

Not a big issue with Modernizr, but this does mean that any class beginning with sm (or any of the other size prefixes) would inherit undesired styles. Perhaps a scoped prefix (ie: bk-) would solve this?

Modal trigger <a> with some <img> or <div> in it breaks Modal : it won't open

<a href="#" class="modal-trigger" data-options='{ "modalId": "example-modal" }'>
    <img src="http://placehold.it/50x50">
    <span>Boom !</span>
</a>

<div class="modal" id="example-modal">
    <a href="#" class="modal-close right">X</a>
    <p>This is a modal</p>
    <p>This is a modal</p>
    <p>This is a modal</p>
    <p>This is a modal</p>
</div>

Javascript error :
Uncaught TypeError: Cannot read property 'modalId' of undefined barekit.js:225

dirty fix line 225 :
$(e.target).closest('.modal-trigger').data("options").modalId
instead of
$(e.target).data("options").modalId

Accordion HTML not Accessibility Friendly

Would just like to point out using Definition Lists for an accordion is not really accessibility friendly (ADA/508), I would suggest moving to ULs or something else that a screenreader won't give special treatment for and confuse the user.

More Info on this issue:
http://snook.ca/archives/html_and_css/definition-lists-v-tables
http://www.w3.org/TR/WCAG20-TECHS/H40.html

Would be really nice to have a "sticky" component

Something similar to how the "menubar" on the (barekit) web site works...but maybe make it simple to configure by just attaching a class and a data attribute or something. Not real well thought out...just would be a really nice feature of the framework to have.

Nesting Accordion

Cant seem to nest accordions within each other. It would be nice.

Padding on columns

I'm getting tired of having to overwrite the padding on columns in places that I don't care about the box model, but only care about the width. Maybe a .grid or extra .col class is needed after all for times when you DO want the grid margins...

Mistake in barekit.css for .sm-offset-half on line

Hi, it looks like there is a mistake for the class "sm-offset-half" in barekit.css. This class is currently set with "width:4.16667%", while it should be set to "margin-left: 4.16667%".

Only one functional modal per document is currently possible

[This is against 0.5.0 via Bower, and a download of master on 09.06.2014]

In the modal module, the modalId parameter isn't strictly explained but we can infer you use it to tell Barekit what hidden div to use for the pop-up. By extension, this means you could have multiple modals in a document and use modalId to tell a given link which one to show. If I'm correct, then that's broken.

Let's modify the included example HTML file to include two modal trigger links:

<p><a href="#" class="modal-trigger" data-options='{ "modalId": "example-modal1" }'>Trigger modal 1</a></p>
<div class="modal" id="example-modal1">
    <p>This is modal 1</p>
</div>
<p><a href="#" class="modal-trigger" data-options='{ "modalId": "example-modal2" }'>Trigger modal 2</a></p>
<div class="modal" id="example-modal2">
    <p>This is modal 2</p>
</div>

In my testing, they both display modal 2.

In fact, you can leave off the data-options attribute on the first link altogether, and clicking it still displays the second modal, so it seems somewhere in the process of these links getting registered there's information getting mixed.

(In terms of behavior, the modal displayed is the last one in the markup. I've extended this to three links, for example, at which point the one that always gets displayed is #3.)

Updated a2labs boilerplate text