Getting Started An introduction to Responsive, how to use it, with basic templates and examples.


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 Responsive

You 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

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,chrome=1">
        <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" />
        <!-- 
             HTML5 Shiv and Respond.js IE8 support of HTML5 elements 
             and media queries 
             WARNING: Respond.js doesn't work if you view the 
             page via file:// 
        -->
        <!--[if lt IE 9 &!(IEMobile)]>
            <script src="vendor/html5shiv.min.js"></script>
            <script src="vendor/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        Your Body Content
    
        <!-- Scripts at the bottom for improved performance. -->
        <!-- jQuery, required for all responsive plugins. -->
        <!--[if IE 8]>     
            <script src="vendor/jquery-1.11.1.min.js"></script>
        <![endif]-->
        <!--[if gt IE 8]><!-->
            <script src="vendor/jquery-2.1.1.min.js"></script>
        <!--<![endif]-->
        <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, WP7/8)
  • Firefox (Mac, Windows)
  • Opera (Mac, Windows)
  • Safari (Mac and iOS only, as the Windows version is being abandoned)

Safari 7

Safari 7 up to and including v7.0.5 on Mac and iOS 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 there is not much that can be done about this at the moment 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. Hopefully Apple will fix this in upcoming releases.

Internet Explorer 8

Internet Explorer 8 is also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by this browser. In addition, Internet Explorer 8 requires the use of html5shiv to correctly display those elements and Respond.js to enable media query support.