Heads Up!
Looking for the legacy v3 documentation? You can find it here.
Download Responsive
The simplest and fastest way to get Responsive is to download the precompiled and minified versions of our CSS, and JavaScript. No documentation or original source code files are included.
Download ResponsiveYou can also install Responsive with Bower:
bower install responsive
If you are feeling more adventurous and want to tweak Responsive before use you can download the full Sass and JavaScript source directly from Github. This will require the use of gulp.js to build.
Download Source- GitHub project
- Version 4.1.4
Setting up your HTML
Inside the zip file you will also find a HTML file containing the default template for including
Responsive in your webpage.
Set up your layout as follows.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Your Page Description." />
<title>Your Page Title</title>
<link href="responsive.min.css" rel="stylesheet" />
</head>
<body>
Your Body Content
<!-- Scripts at the bottom for improved performance. -->
<!-- jQuery, required for all responsive plugins. -->
<script src="vendor/jquery-2.1.4.min.js"></script>
<script src="responsive.min.js"></script>
</body>
</html>
Browser Support
Responsive is built to work best in the latest desktop and mobile browsers. Everything though has been built with progressive enhancement in mind, meaning older browsers might display differently styled, though fully functional, renderings of certain components.
Supported browsers
Specifically, latest versions of the following browsers are supported:
- Chrome (Mac, Windows, iOS, and Android)
- Internet Explorer (Windows - Latest plus IE9, IE10, WP7/8)
- Firefox (Mac, Windows)
- Opera (Mac, Windows)
- Safari (Mac and iOS only, as the Windows version is being abandoned)
Safari
Safari prior to v7.1 for OS X and Safari for iOS v8.0 do not calculate percentages properly and will render 12 individual columns defined using the
col-{range}-1
classes slightly narrower than they should be. See #40.
Unfortunately other than upgrading your browser there is not much that can be done about this without resorting to hacks to tweak the percentages using JavaScript or by using the
push-{range}
or push-{range}-only
classes to offset the last column.
Internet Explorer 9
Internet Explorer 9 has no support for CSS Transitions and as such all JavaScript plugins that utilize transitions will operate without animation.
Accessibility
Responsive is built using common web standards and has been designed to support Assistive Technology. All the default colors have been chosen to conform to the recommended ratio of 4.5:1 to ensure that users with low vision or who are color blind are catered for appropriately.
All Responsive's plugins have been built from the ground up to be mouse, touch and keyboard accessible. They also add the appropriate ARIA attribution where necessary to ensure that screenreaders can follow each plugin's functionality.
Right-to-Left Languages
Responsive has built in support for right-to-left languages such as Hebrew or Arabic. All aspects of the framework from grid columns to swiping directional behaviour have right-to-left counterparts.
To enable right-to-left language support add the attribute dir="rtl"
to the html
tag.