Pinstripe

A simple JQuery tool to show you responsive breakpoints. Based off of UXPin's "Responsive Web Design Cheat Sheet" >> http://tinyurl.com/hc5rw8x

by Pete Fecteau

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.1/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="pinstripe"></div>
<div id="wrapper"></div>

JavaScript

function pinstripe (){
	var liveWidth = $(window).width(),
      liveHeight = $(window).height(),
      pinWidth = liveWidth + "px",
      pinHeight = liveHeight + "px",
      pinStyle = {
        paddingTop : "2px",
        paddingBottom : "2px",
        paddingLeft : "10px",
        backgroundColor : "#ccc",
        color: "#fff",
        fontSize : "10px",
        height : "20px",
        whiteSpace: "nowrap"
      },
      leftStyle = {
        float : "left",
        paddingRight : "10px",
        marginRight : "10px",
        borderRight : "1px solid #FFF"
      },
      rightStyle = {float : "left"};

  $( document ).ready(function() {
    $('#pinstripe').append( "<div class=\"measure\"></div>");
    $('#pinstripe').append( "<div class=\"string\"></div>");
    $('#pinstripe .measure').text(pinWidth);
    $('#pinstripe .measure').css(leftStyle);
    $('#pinstripe').css(pinStyle);
  });
  $(window).resize(function() {
    var newWidth = $(window).width();
    var newPinWidth = newWidth + "px";
    var pinString;
    if (newWidth <= 240) {
      pinString = "Older low resolution phones";
      $('#pinstripe').css({"backgroundColor": "#91c4eb","color": "#FFF"})
      $('#pinstripe .measure').css("borderRight", "1px solid #FFF")
    } else if (newWidth > 240 & newWidth <= 320) {
      pinString = "Many generic feature phones";
      $('#pinstripe').css({"backgroundColor": "#9ac9a7","color": "#FFF"})
      $('#pinstripe .measure').css("borderRight", "1px solid #FFF")
    } else if (newWidth > 320 & newWidth <= 480) {
      pinString = "iPhone, many Android and Blackberry phones";
      $('#pinstripe').css({"backgroundColor": "#9ac9a7","color": "#FFF"})
      $('#pinstripe .measure').css("borderRight", "1px solid #FFF")
    } else if (newWidth > 480 & newWidth <= 600) {
      pinString = "iPhone \(landscape\), many Android and Blackberry phones";
      $('#pinstripe').css({"backgroundColor": "#87c095","color": "#FFF"})
      $('#pinstripe...