Skip to content

Instantly share code, notes, and snippets.

View AllThingsSmitty's full-sized avatar

Matt Smith AllThingsSmitty

2.1k followers · 6 following
View GitHub Profile
@AllThingsSmitty
AllThingsSmitty / live-code.css
Created August 27, 2015 13:08
Making an entire live-code-enabled presentation
<style contenteditable>
* {
display: block;
}
</style>
@AllThingsSmitty
AllThingsSmitty / ie7-border-box-mixin.scss
Last active August 29, 2015 13:55
Border-box mixin for IE7
/* Thank god no ones uses IE7 anymore, amirite */
@mixin IE7Padding($width: null, $unit: 1px, $paddingLeft: 0, $paddingRight: 0) {
@if $padding == 0 and $paddingRight != 0 {
padding-right: $paddingRight * $unit;
width: $width * $unit;
.lt-ie8 & {
padding-right: $paddingRight + $unit;
width: ($width = $paddingRight) * $unit;
}
}
@AllThingsSmitty
AllThingsSmitty / index.html
Last active August 29, 2015 13:56
Animated spinning loader
<div class="spinner bar">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
@AllThingsSmitty
AllThingsSmitty / picture-element.htm
Last active August 29, 2015 13:56
An example of how to implement the <picture> element
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Picture Element</title>
<style>
@media all {
#pictureElement {
background-image: image-set(small-1.jpg 1x, small-2.jpg 2x);
}
@AllThingsSmitty
AllThingsSmitty / README.md
Last active August 29, 2015 13:56
Implementing the Geolocation API with Google Maps API

Once you've called the GoogleMap function, you can set ID, height, and width of the map (mapcanvas.id, mapcanvas.style.height and mapcanvas.style.width). You can set map default functionality like zoom, position, and control under var myOptions:

var myOptions = {
  zoom: 15,
  center: latlng,
  mapTypeControl: false,
  navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
@AllThingsSmitty
AllThingsSmitty / box-sizing-grid.htm
Last active August 29, 2015 13:56
Creating a grid using box-sizing in CSS3
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Box-Sizing Grid</title>
<style>
.row:after {
clear: both;
content: "";
display: block;
@AllThingsSmitty
AllThingsSmitty / index.htm
Last active August 29, 2015 13:57
Experimenting with AngularJS filters
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>AngularJS application template</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open\+Sans">
</head>
<body ng-controller="MyAppController">
@AllThingsSmitty
AllThingsSmitty / README.md
Created March 28, 2014 14:45
How to get the Google Translate API free

I'm looking to use the Google Translate API but that service isn't free. I need to find a way of utilizing it or some alternative.

@AllThingsSmitty
AllThingsSmitty / README.md
Last active August 29, 2015 13:58
Getting old weather data

I'm looking into a way to obtain old weather data. This may work for API's.

@AllThingsSmitty
AllThingsSmitty / inside-border.scss
Last active August 29, 2015 14:02
A way to add an border/outline to an element without affecting its final dimensions
// default values:
$ibThickness: 2px !default;
$ibColor: black !default;
$ibAlpha: .1 !default;
// use a "variable argument" to accept any number of values.
@mixin ib($values...) {
$borderThickness: $ibThickness;
$borderColor: $ibColor;
$borderAlpha: $ibAlpha;