Skip to content

Instantly share code, notes, and snippets.

/* ---------------------------------------------------------- */
/* */
/* A media query that captures: */
/* */
/* - Retina iOS devices */
/* - Retina Macs running Safari */
/* - High DPI Windows PCs running IE 8 and above */
/* - Low DPI Windows PCs running IE, zoomed in */
/* - Low DPI Windows PCs and Macs running Firefox, zoomed in */
/* - Android hdpi devices and above */
<table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Dept, Title</th>
<th scope="col">Phone</th>
</tr>
</thead>
<tbody>
// Standard device screen widths
$iphone-portrait: 320px
$iphone-landscape: 480px
$ipad-portrait: 767px
$ipad-landscape: 980px
$desktop: 1224px
$desktop-large: 1824px
// General device targeting
// Use: Only use if you want the style to apply to many devices
<div class="myvideo">
<iframe src="http://www.youtube.com/embed/MY-VIDEO" frameborder="0" allowfullscreen></iframe>
</div>

Sublime Text 2 – Useful Shortcuts (Mac OS X)

General

⌘T go to file
⌘⌃P go to project
⌘R go to methods
⌃G go to line
⌘KB toggle side bar
⌘⇧P command prompt
img {
height: 250px;
left: 50%;
margin-top: -50%;
margin-left: -50%;
position: absolute;
top: 50%;
width: 250px;
}
@b4z81
b4z81 / geolocation.html
Created September 19, 2013 08:13
html5 geolocation demo
<!DOCTYPE html> <html> <head> <title>Sample Map</title> <style> #mapdiv {     margin: 0;     padding: 0;     width: 500px;     height: 500px; } </style>   <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script> <script>     var watchId = null;     function geoloc() {     if (navigator.geolocation) {         var optn = {                 enableHighAccuracy : true,                 timeout : Infinity,                 maximumAge : 0         };     watchId = navigator.geolocation.watchPosition(showPosition, showError, optn);     } else {             alert('Geolocation is not supported in your browser');     }     }   function showPosition(position) {         var googlePos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);         var mapOptions = {             zoom : 12,             center : googlePos,             mapTypeId : google.maps.MapTypeId.ROADMAP         };         var mapObj = document.getElementById('mapdiv');         var googleMap = new google.maps
/* ---------------------------------------------------------- */
/* */
/* A media query that captures: */
/* */
/* - Retina iOS devices */
/* - Retina Macs running Safari */
/* - High DPI Windows PCs running IE 8 and above */
/* - Low DPI Windows PCs running IE, zoomed in */
/* - Low DPI Windows PCs and Macs running Firefox, zoomed in */
/* - Android hdpi devices and above */
@b4z81
b4z81 / Homescreen.html
Created October 4, 2013 12:27
chrome Homescreen
<!doctype html>
<html>
<head>
<title>Awesome app</title>
<meta name=”viewport” content=”width=device-width”>
<meta name=”mobile-web-app-capable” content=”yes”>
<link rel=”shortcut icon” sizes=”1024x1024” href=”/icon.png”>
</head>
<body></body>
</html>
@b4z81
b4z81 / webfont-ie.html
Created October 14, 2013 14:02
Using a conditional comment for webfont on IE
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic" rel="stylesheet" type="text/css">
<!--[if IE]>
<link href="http://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Droid+Serif:700italic" rel="stylesheet" type="text/css">
<![endif]-->