I've got a modal that is used to show a group of pictures for real estate listings. Works great on the list if it's used after the initial page load. If the user runs another search via ajax the list is replaced by the new results. At that point the modal no longer works and it just opens a new page when the link is clicked on one of the listings. This appears to happen because the new list no longer has the modal event handler attached. How do I get RBP to attach to the links after an ajax call like this?

This issue serves as a location to discuss the feature and testing matrix for v4 of Responsive. Anything agreed below will be added here.

CSS/Sass

• [x] Browser Support. IE9 up.
• [x] Additional breakpoints. #48
• [x] Aria based selectors. http://slides.com/heydon/getting-nowhere-with-css-best-practices#/36
• [x] REMs and EMs for fonts
• [x] BlockGrid

JavaScript

• [x] Unit tests
• [ ] Nav Widget.

UMD support? Inherited widgets?

Hi, Love this framework by the way, great alternative to TwitterBS & Foundation, without the bloat :)

Just one question, the minimum breakpoint for the grid is set to Up to 48em (768px at 16px/1em) using col-xs-XX for example, is there any chance we could get 1 or 2 more BPs before this for smaller devices?

For example, for devices smaller than 768px in width i.e smaller tablets or landscape smartphones (iPhone5 for example), I may want to keep a 2 column layout and only go to a single column layout when the device width is 320px, whereas at the moment, it's a single column layout for ALL devices up to 768px.

Maybe set another BP at Up to 37.5em (600px at 16px/1em) to catch landscape iPhones & vertical small tablets, and again at Up to 30em (480px at 16px/1em) to catch all mobile devices – maybe using classes of col-xxs-XX and col-mob-XX?

I hope that all makes sense. Just feel that having a few extra options below 768px would be helpful :)

PS. If i've missed something in the docs that achieves the above, I apologise in advance.

https://www.npmjs.com/package/responsive doesn't exist (or is my search fu bad?)

Would make it easier to use with webpack / sass-loader

Great project btw :)

Hi!

I have one, probably simple question. Unfortunately I can't figure it out ;)

What is the command to close the modal with jquery (called from a target page)? The action should be pretty much the same as clicking the 'x' symbol.

And an example :) There are to pages: INDEX.php CONTENT.php

Index has a link that opens content in a modal.

How to close the modal

• without using esc or ‘x’
• using $(document).ready() and $(object).click() function?

I'll be really grateful for help!

It would be great if there was a possibility to prevent the browser from loading all carousel images on first pass of the document. This could be done by referencing the url of the image only in "data-src" attribute to prevent the request on the server and delay the loading of images.

Carousel markup would look like this:

<div id="carousel-2" class="carousel" data-carousel-mode="fade" data-carousel-interval="5000">
    <!-- Carousel Indicators-->
    <ol>
        <li data-carousel-target="#carousel-2" data-carousel-slide-to="0" class="active"></li>
        <li data-carousel-target="#carousel-2" data-carousel-slide-to="1"></li>
        <li data-carousel-target="#carousel-2" data-carousel-slide-to="2"></li>
    </ol>
    <!-- Carousel Items-->
    <figure class="carousel-active">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src"../test-assets/img/hydrangeas.jpg" alt="hydrangeas">
        <figcaption>
            <h4>First Thumbnail label</h4>
            <p>Lorem ipsum dolor sit amet, consectetur ...</p>
        </figcaption>
    </figure>
    <figure>
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src"../test-assets/img/chrysanthemum.jpg" alt="chrysanthemum">
        <figcaption>
            <h4>Second Thumbnail label</h4>
            <p>Lorem ipsum dolor sit amet, consectetur ...</p>
        </figcaption>
    </figure>
    <figure>
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src" alt="desert">
        <figcaption>
            <h4>Third Thumbnail label</h4>
            <p>Lorem ipsum dolor sit amet, consectetur ...</p>
        </figcaption>
    </figure>
    <!-- Carousel Controls-->
    <a class="left carousel-control" href="#carousel-2" data-carousel-slide="prev"><</a>
    <a class="right carousel-control" href="#carousel-2" data-carousel-slide="next">></a>
</div>

This enhancement would make ResponsiveBP carousel superior to other carousel scripts which don't support lazy loading and bloat the page size.

Sometimes if you hide and show modal window. Modal windows stops working until page restart.

Also if you run code to show modal while modal is shown, the modal window won't disappear.

When loading manually how can I get the modal title to be taken from the link? It doesn't pick up the attribute data-modal-title if I provide it. In my case since the modal is showing photo's for a single property I'd like to display the MLS number and price for example in the title when the modal opens.

Have just switched over from a Bootstrap project to a private project I want to use ResponsiveBP in. I'm finding I'm having to write far more HTML with ResponsiveBP because it appears to require a discrete definition of col-xxx-xxx for each size of a section. So to have a column be 10 wide from xxs to up s then switch to 5 wide at m and above, I'm having to write "col-xxs10 col-xs-10 col-s-10 col-m-5 col-l-5" instead of simply "col-xxs10 col-m-5" which I think is more logical (thinking of mobile first) and certainly less bloat code-wise. Not to mention bandwidth and dev time. Could it be implemented or is it too hard/not in keeping with project aims?

I really like this little boilerplate, it beats the 'cater for everything' approach of the other larger ones, but I spotted this earlier in the lightbox examples:

<a href="//bbc.co.uk" data-lightbox-title="BBC" 
   data-lightbox-description="<p>sample text or the footer.</p>" 
   data-lightbox-iframe-scroll="true">
    Launch external overlay
</a>

Unfortunately, this is invalid markup for anyone using xhtml5. It won't validate, and any application that uses XML to produce html5 markup would throw a fatal error with this.

Would there be any other way to tackle this?

Hi everyone, I'm having this issue when installing latest version with bower:

bower install responsive --save
bower html5shiv#3.7.1     ENORESTARGET No tag found that was able to satisfy 3.7.1

Additional error details:
Available versions: 3.7.0, 3.6.2, 3.6.1

Do you guys know how to avoid this dependency issue ?

Removes is-svg. It's no longer used after updating ancestor dependency postcss-svgo. These dependencies need to be updated together.

Removes is-svg

Updates postcss-svgo from 4.0.2 to 4.0.3

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps minimatch from 3.0.4 to 3.0.8.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Is there a way to setup responsive bp's colors to be an inverted dark mode set of colors easily or would it require major updates to the source and rebuilding the css?

In Google Chrome: If I add data-modal-mobile-target="..." to grouped images, with the first call, (on a mobile device) it opens the lightbox. Then pressing the arrow, it shows the mobile target (so just the picture). In Firefox it works as expected ans opens just the image and then one has to go back.

Also in Chrome I get a warning in the console: [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. I think its related, but my javascript knowledge is limited and I was not successful fixing it...

This package doesn't have a default file set. You can set it via jsdelivr, browser, or main field in package.json

Not sure what's involved with this but i guess if you can create a default file set you can have automatic CDN with jsDelivr

The modal plugin will need to be ported to use es6.

Tasks

• [ ] Drop jQuery and use DUM.js + fetch API
• [ ] Rewrite as class
• [ ] Update accesssibility functionality to match current standards
• [ ] Update QUnit tests