responsivebp / responsive Goto Github PK

View Code? Open in Web Editor NEW

867.0 47.0 141.0 35.6 MB

:iphone: A super lightweight HTML, Sass, CSS, and JavaScript framework for building responsive websites

Home Page: http://responsivebp.com

License: MIT License

CSS 0.25% JavaScript 33.99% HTML 46.75% SCSS 19.02%

javascript sass css rwd accessibility html5 responsive-grid

responsive's Introduction

Responsive Boilerplate

A powerful, accessible, developer friendly, framework for building responsive websites

Responsive Boilerplate is the developers' framework.

Other frameworks are too design opinionated and heavy. They're great for prototyping but every time you start a real, front-facing, project with them you have to overwrite lots of designer styles that do nothing to add to the functionality of the website. That costs developers time and money.

Responsive Boilerplate has been built with that in mind. It is the result of thousands of hours of real, client driven web development and testing; specifically developed to be as lightweight as possible to prevent the need to undo styles set by the framework itself and allow developers to write efficient code and lower costs.

Responsive Boilerplate is tiny. The combined output CSS and JavaScript is only 20.3kb minified and gzipped but there is a lot of functionality built into the framework with touch, right-to-left language, and accessibility support.

Browser support covers all evergreen browsers.

Downloading Responsive Boilerplate

Several options are available for downloading Responsive:

Download the latest release.
Download the latest release source.
Clone the repo: git clone https://github.com/ResponsiveBP/Responsive.git.
Install with NPM: npm install responsive-bp.

Documentation

Responsives' documentation, included in the gh-pages repo. It is built with Jekyll and publicly hosted on GitHub Pages at http://responsivebp.com. The docs may also be run locally.

If necessary, install Jekyll (requires v2.5.2).

If you are running Windows please read this unofficial guide to get Jekyll up and running without problems.

From the root /Responsive directory, run jekyll serve in the command line.

Open http://localhost:4000 in your browser to view the compiled docs.

Learn more about using Jekyll by reading its documentation.

Contributing

Contribution is most welcome, that's the whole idea! Together as a community we can build a boilerplate for building responsive sites that will ensure that high standards can be delivered across all devices.

Please adhere to existing JavaScript and Sass styles though when submitting code and ensure that you test thoroughly on multiple devices.

Please take a moment to review the guidelines for contributing.

Building the Sass and JavaScript

The build process for Responsive is powered by Webpack. To build Responsive you will need to first install the required plugins using the following commands from the root /Responsive directory:

npm install to install the necessary build dependencies based on the contents of the package.json file.

If you are adding new functionality to the build process use:

npm install {your_new_build_dependency} --save-dev

There are three types of build available:

npm run build Compiles the framework to the dist folder.
npm run dev For development purposes. Compiles the framework to the dist folder and watches for further changes

Authors

James South @james_m_south and the Responsive contributors.

Community

Follow @responsivebp on Twitter. Discuss Responsive on Gitter.

Copyright and license

responsive's People

Contributors

Stargazers

Watchers

Forkers

meettya pgchamberlin stuartnz tartanmarco iaindarkflare keithparent marszu andrzej-poniatowski vova84 maccadb7 couryshen stefankunze nixsiow borisschandert smuliii malibu2792 domelon ramongebben dclapperton josedigital carlaspets joeromero ezekielriva seco ngedmundas fnd adrienne roygold1 9kopb reliablewebapp tecumsehmaverick gitter-badger kipusoep fox-rck rolive0712 unlimitedfocus paulnett naepalm panarai perrylee aallanrd dondya gs-labs claushingebjerg billwaddyjr steroberts89 baa-archieve thiagoalessandro iamronan pkdevbox pramodkumarkarn safajuy joenophoto dirkeinecke halad prayagverma shakti0786 dari4sho kazu2012 arebe tlincoln3 ink888 jilykate a233894432 ehipasika michalskypl tystatic precisioncoding lsrdg onceclick bright-sparks fataelislami calchulus dampee davidc4991vvc gsdu8g9 kode-kitchen jeffkuletz31 harendranathvegi9 shazwazza stemar boscardin hansel2908 mrednev defenderhhhh jerry-goodboy etchuk chrisemoulton lottepitcher hemiaoyang evelasquez-4 marcia47 nishigaba soccerwiz juanv2018 pinocoock lupin4 poojathakare17 etlapa williamwon

responsive's Issues

Heights of some input types don't match height of input[type="text"]

At least on Mac OS X Chrome v36.0.1985.125 anyway.
Demo: http://jsfiddle.net/oLropqbd/

One modal example has non-matching source code

The actual live HTML for the "External target with iframe header and footer" demo on http://responsivebp.com/javascript/modal/ is:

<a href="//www.microsoft.com" data-modal-title="Microsoft"
   data-modal-description="<p>sample text or the footer.</p>" data-modal-iframe-scroll="false">
   Launch external overlay
</a>

The syntax-highlighted code block for the demo is:

<a href="//www.microsoft.com" data-modal-title="Microsoft" 
   data-modal-description=" data-modal-iframe-scroll="false"<p>sample text or the footer.</p>">
   Launch external overlay
</a>

.ir not working

As I understand it from the docs adding .ir to an element will hide any text inside it. I added .ir to a h1 and it hasn't done anything.

Perhaps I'm doing something wrong? If so the docs might need to be updated to clarify.

Left margin not removed on adjacent 12-column elements

Using v2.5.3

When two adjacent 12-column elements exist in a row, the left margin isn't removed on the second one.

This issue exists for the following column sizes:

col-s-12
col-m-12
col-l-12

Here is the HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Your site description." />
    <title>Your page title</title>

    <script src="responsive.ie10mobilefix.min.js"></script>
    <link href="responsive.css" rel="stylesheet" />

    <!--[if lt IE 9 &!(IEMobile)]>
        <script src="vendor/html5shiv.min.js"></script>
        <script src="vendor/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-s-12 col-m-12 col-l-12" style="background: red;
    height:100px">
                col-xs-12 col-s-12 col-m-8
            </div>

            <div class="col-xs-12 col-s-12 col-m-12 col-l-12" style="background: red;
    height: 100px;">
                col-xs-12 col-s-12 col-m-4
            </div>
        </div>
    </div>

    <!--[if IE 8]>
    <script src="vendor/jquery-1.11.0.min.js"></script>
    <![endif]-->
    <!--[if gt IE 8]><!-->
    <script src="vendor/jquery-2.1.0.min.js"></script>
    <!--<![endif]-->

    <script src="responsive.min.js"></script>
</body>
</html>

Renders like this:

The problem seems to be this style (and the similar ones for each column size listed above):

.row [class*="col-"] + [class*="col-s"] {
    margin-left: 2%;
}

takes precedence over this one:

.col-s-12 {
    width: 100%;
    margin-left: 0;
}

You can fix it changing the latter to this:

.row [class*="col-"] + [class*="col-s-12"],
.col-s-12 {
    width: 100%;
    margin-left: 0;
}

I would have done a pull request but you may know a better way to fix this.

Thanks!

Dealing with errors when loading modal content

Currently, if the user loses their network connection after loading the page but before activating a "Relatively loaded target"-type modal, the user is just shown an empty modal, with no indication that something has gone wrong.
I would suggest that some sort of error event be fired in such cases, so that an error message can be displayed to the user. It might also be good to include a simple default handler for the event.

Inline buttons should use ems

Switch btn-inline margin from -4px to-.27em to make consistent with base font size and improve behaviour across devices.

javascript dropdown can't target classes

This worked in V2, but in V3 it throws a JQuery error because of the href

Vendor folder not created when downloading a release zip

Instead of some files being included in a "vendor" folder, the filenames look like this:

vendor\html5shiv.min.js

Here's a screenshot:

I'm running Mac OS X 10.9.2. I hope it's not just me – can you repeat this issue?

Thanks!

any plan for sass (scss) version ?

thanks for sharing your work

any plan for sass (scss) version ?

Chrome uses XS grid when printing for US Letter or A4 paper

See twbs/bootstrap#12078
ResponsiveBP's grid is affected in the same way.
This is probably unintuitive enough to warrant being mentioned in the docs.
(Also possibly applies to IE11, but I don't have a Windows box to test with.)

Modal focus management issues

Clicking on a modal leaves the <a> that triggered the modal focused. For proper accessibility, the modal should become focused instead.
Closing a modal returns focus to the <body>. For better accessibility, the focus should be returned to the link that originally activated the modal.

Nuget support

Any plans for a nuget package of this?

Touch vertical scroll on carousel

Cant scroll page vertically when swiping over carousel on touch devices.

Dropdown show event is not namespaced.

Should be show.dropdown.responsive

form controls under a disabled fieldset don't visually look disabled

Compare with the "Disabled fieldsets" section of http://getbootstrap.com/css/#forms-control-disabled
See also: http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#attr-fieldset-disabled

Lightbox scrolling on win phone 8

On the Nokia Lumia 925 the lightbox can scroll outwith the range of the overlay.

.lightbox-on {
    -ms-touch-action: none;
    touch-action: none;
}

Will fix it whilst allowing child interaction to continue as normal.

Incorrect class name in horizontal forms

.no-edit-input should be .no-edit

Incorrect focus selector in forms.

.no-edit:focus textarea.focus,

should be

.no-edit:focus, textarea.focus,

PHP Includes

I'm trying to use php includes but can't get it to work.

Very simple markup.

Space key doesn't trigger un-grouped accordion items

Environment: Stable Chrome on OS X Yosemite

Open http://responsivebp.com/javascript/dropdown/
Tab into an item of the "Un-Grouped Accordion"
Press the space key
Observe that nothing happens.
Press the Enter key.
Observe that the accordion item toggles its collapsedness.
Tab into an item of the "Grouped Accordion"
Press the space key.
Observe that the accordion item toggles its collapsedness.

Scrolling on windows phone device

I just bumped into this issue when trying to use my site from a windows phone 8.

In the responsive.css this rule is set:

a[href],
button,
[type="submit"],
[type="button"],
[type="reset"],
[role="button"] {
    -ms-touch-action: none;
    touch-action: none;
}

Now, if I add a link to my page, with a display block, like this:

<a href="/" style="display: block; width: 150px; height: 150px;background-color: red;"></a>

If I then on my phone touch this red square, and try to scroll, then it won't do anything. It will ignore my attempt to scroll.

If I add this to my anchor element style:

-ms-touch-action: auto; touch-action: auto;

then I am able to scroll again, though it's a bit stuttery, probably because of the 300ms delay that responsive.css is trying to avoid.

I don't know if it is by design, or if there is a better solution to making anchor elements scrollable when they have display:block on them?

I should add, that it will scroll fine on an iPad without the "fix".

Adding dynamic number of columns and not using reset classes

First let me say that I love ResponsiveBP (i call it responsiveBP to avoid the ambiguity), I have used it on a number of projects in the last year and prefer it to many of the other frameworks I've tried by far.

One pain point I have encountered is the dreaded dynamic number of columns and inherit margin-left on subsequent columns breaking the layout.

Take the following:

<div class="row">
    <div class="col-xs-6 col-m-3"></div>
    <div class="col-xs-6 col-m-3"></div>
    <div class="col-xs-6 col-m-3"></div>
    <div class="col-xs-6 col-m-3"></div>
</div>

This layout will not render properly without a .reset-xs added to the 3rd div inside. You will run into this problem frequently soon as you start integrating into your cms or application code.

Right now I am overcoming this using javascript and matchmedia to check the breakpoint and add and remove the reset classes accordingly, something along the lines of:

if (window.matchMedia('(max-width:47.99em)').matches) { 
    $('.col-xs-6:nth-of-type(2nd+1)').addClass('reset-xs');
} 
else if (window.matchMedia('(min-width:48em)').matches) { 
    $('.col-xs-6:nth-of-type(2nd+1)').removeClass('reset-xs');
}

Is there a better way around this that I'm missing in ResponsiveBP? Furthermore, could you point me in the right direction of the code that one could adjust to overcome this?

I suspect this may require a great deal of re-work to the grid system itself but would love to hear what others think about having out of the box support for this.

Options in checkbox & radio examples need labels

On http://responsivebp.com/css/forms.html , the radio button examples and the checkbox examples where there are multiple checkboxes are lacking labels for each radio button / checkbox, which is not realistic (who uses radio buttons where the choices are unlabeled?!).
Labels should be added to each option to better demonstrate what the boilerplate looks like in action.

Build process is too complicated.

Improve the build process so it can be single click deploy or similar.

Menus

First of all...
Many thanks for this awesome framework!!!
Some CSS for Menus would be nice.
Horizontal, vertical, DropDown (without JavaScript) and a Off-Canvas-Mobile-Menu would complete your framework.

Bug when expanding collapsible widgets on Safari

Open http://responsivebp.com in Safari on iPhone
Tap the hamburger icon
The navbar expands, collapses, and then expands again. It should instead expand only once and remain expanded until interacted with further.

Grid renders slightly differently on Safari

Example: http://jsfiddle.net/wyrefkmg/4/

OS X Chrome (which is nearly identical to OS X Firefox):

Safari v7.0.5 on OS X 10.9.4:

Note how the 6 and the 7 aren't aligned, and how there's extra blue padding on the right edge of the first row.

Chrome: CTRL+click (or wheel-click) doesn't open new tab/window

I'm noticing in Chrome (v37) that the mouse-wheel click (or CTRL+click) isn't opening a link in a new tab (or window).

I've noticed this on the Responsive docs website: http://responsivebp.com/

I am unable to reproduce the issue on Firefox (v32) and IE10 - they work as expected.

(I've had a quick look at the Responsive JS source, but couldn't see anything obvious).

carousel pause on hover not working

The title says it all I think! I just used the standard mark up from the docs

Modal Grouping Not Working

It looks like there may be a problem with the modal grouping. I've implemented data-modal-group on each link but when one pops-up it has no arrow controls. When I use the keyboard to navigate the current image disappears leaving the muted background and you can't go forward or backwards. Escape doesn't work and I need to refresh the browser to clear it.

If I click the links as individual modals they work fine, escape will close them, but not if I try to navigate either direction.

I've tested this on the locally hosted project I am working on (Chrome and IE11), and also on the template file that comes with the download package. Have also tested on another project that's hosted on a live server.

Add ability to show visible local content in the lightbox.

Currently only hidden local content can be shown as lightbox adds class hidden when returning the item to it's current location.

v4 Feature List

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

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

JavaScript

Unit tests
Nav Widget.

UMD support?
Inherited widgets?

Lazy load carousel images

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.

Typos in comments in Modal JS

Couple instances of "model" instead of "modal"

Add websites using Responsive to the documentation

If you have a website or websites using Responsive that you would like us to put a link to in our docs please add it to the issue below.

The following format would be great.

Name: The name of the site
Url: The url to the site
Sector : What sector the site comes under. - e.g Banking, Arts, Hospitality

Thanks 😄

I'd like to add this to the docs website but I struggle at times with Jekyll. If anyone has any chops and could help with this that would be great!

[Question] Breakpoints

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.

Dismiss plugin does not fire close event.

Add line $target.trigger($.Event(closeEvent)); to responsive.dismiss.js

Invalid Markup

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?

Submitting Forms on Lightbox

I can't get lightbox popups that have forms to submit. Any known issues about that?

Modal option docs not clear on plaintext vs. HTML

e.g. The title option is described as "text" but is in fact used as raw HTML. Same thing goes for some of the other options.
Similarly, the closeHint option (among others) is vaguely described as "A hidden value" but again is used as raw HTML.

This can lead to unintended HTML injection!

I have not checked whether the docs for other plugins have similar issues.

html5shiv issue when installing with bower

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 ?

Docs typos

Just as it's not "Surfbort" but "Surfboard", it's not "Keybord" but "Keyboard".
The typo "Keybord" present in several places in the docs site.

Tabs requires section as pane to work.

    [data-tabs] > ul,
    [data-tabs] > section.tab-pane-active {
        display: block;
    }

Should be

    [data-tabs] > ul,
    [data-tabs] > .tab-pane-active {
        display: block;
    }

WP8 IE10 device-width bug?

It seems like ResponsiveBP is probably affected by (and doesn't currently seem to include or mention the workaround for) the WP8 IE10 viewport bug described on http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
(Admittedly, I don't have a Lumia device to actually test with.)

Media layout is incorrect

Media layout for youtube and vimeo is incorrect.

padding should be:

.media {
    padding: 30px 0 56.25%;
}

.media.vimeo {
    padding-top: 0;
}

Carousel external trigger do not bind.

Initialization code should query options not function.

[Question] How do I show Modal on Page Load?

Hi James,

I'm wondering if you can help at all. I'm looking to have a modal show once the page has loaded.

I assume this is really easy to do, but I'm not up on javascript so it's proving tricky for me.

Have just been using one of the demo scripts, which works fine when clicking the link. But I can't get it to appear on page load.

<a href="#" class="modal" data-modal-target="#modal" data-modal- modal="button">Launch modal overlay</a>

<div id="modal" class="hidden">
<p>Lorem ipsum dolor sit amet...</p>
<p><button role="button">Click to close.</button></p>
</div>

This looks like it's almost there. I get the modal overlay and loader but no sign of the modal itself.

<script>
$(window).load(function(){
    $('#modal').modal('show');
});
</script>

Any help would be much appreciated.

Cheers,
Iain

RTL (Right-to-Left) languages?

Do you have/plan to address RTL (Right-to-Left) languages? such as Hebrew, Persian, and Arabic?

Rogue console.log in responsive.carousel.js

Line 273

console.log($nextItem);

Breaks carousel in IE8

Autosize fires the start event incorrectly.

The start event is fired on each keyup instance rather than when the textarea is actually resizing.