Skip to content

Instantly share code, notes, and snippets.

View bryanstedman's full-sized avatar

Bryan Stedman bryanstedman

21 followers · 20 following
View GitHub Profile
@bryanstedman
bryanstedman / _media_queries.sass
Last active December 10, 2015 18:48
Named Media Queries
@-ms-viewport
width: device-width
=breakpoint($point)
@if $point == babybear
@media only screen and (min-width : 33em)
@content
@if $point == mamabear
@bryanstedman
bryanstedman / quick local server
Created January 7, 2013 19:18
Quick local server
Four ways to serve files from the current directory at localhost under port 8000:
http://localhost:8000/
# Python 2.x
python -m SimpleHTTPServer
# Python 3.x
python -m http.server
# Ruby
@bryanstedman
bryanstedman / view-source.txt
Created January 7, 2013 19:55
View source bookmarklet Copy the text into a bookmark to view source on an iPhone or iPad. Maybe there are other phones and tablets too :)
javascript:(function(){var a=window.open('about:blank').document;a.write('<!DOCTYPE html><html><head><title>Source of '+location.href+'</title><meta name="viewport" content="width=device-width" /></head><body></body></html>');a.close();var b=a.body.appendChild(a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace='pre-wrap';b.appendChild(a.createTextNode(document.documentElement.innerHTML))})();
@bryanstedman
bryanstedman / Preferences.sublime-settings
Last active December 10, 2015 22:38
Sublime Text 2 user settings
{
"color_scheme": "Packages/Color Scheme - Default/Solarized (Light).tmTheme",
"font_size": 11.0,
"ignored_packages":[],
"tab_size": 2,
"theme": "Soda Light.sublime-theme",
"translate_tabs_to_spaces": true,
"detect_slow_plugins": false,
"caret_style": "phase",
"highlight_line": true,
@bryanstedman
bryanstedman / detect_retina.js
Created January 11, 2013 05:25
Detect retina display with javascript
var retina = window.devicePixelRatio > 1;
if (retina) {
// the user has a retina display
}
else {
// the user has a non-retina display
}
@bryanstedman
bryanstedman / _caret.scss
Created February 10, 2013 04:52
Caret Scss mixin
@mixin caret($point, $border-width, $color) {
$opposite: opposite-position($point);
border: $border-width solid transparent;
border-#{$opposite}: $border-width solid $color;
border-#{$point}: 0;
height: 0;
width: 0;
}
@bryanstedman
bryanstedman / .zshrc
Created March 14, 2013 04:16 — forked from SlexAxton/.zshrc
gifify() {
if [[ -n "$1" ]]; then
if [[ $2 == '--good' ]]; then
ffmpeg -i $1 -r 10 -vcodec png out-static-%05d.png
time convert -verbose +dither -layers Optimize -resize 600x600\> out-static*.png GIF:- | gifsicle --colors 128 --delay=5 --loop --optimize=3 --multifile - > $1.gif
rm out-static*.png
else
ffmpeg -i $1 -s 600x400 -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=3 --delay=3 > $1.gif
fi
else
@bryanstedman
bryanstedman / _media_queries2.scss
Created April 2, 2013 16:59
_media_queries2.scss
// Define some screen sizes for media queries
$phone: 320px;
$phone-wide: 500px;
$tablet: 600px;
$large-screen: 992px;
@mixin at-least($device-width) {
@media screen and (min-width: $device-width) {
@content
}
@bryanstedman
bryanstedman / ems-v-px.md
Last active December 16, 2015 13:59
A quick article on the merits of using em based media queries over px

Quick Tip: Em based media queries

Using pxs in your media queries assumes a set font-size. This means that, in some browsers, things can break pretty quickly if the user has set a larger default font-size or manually increases the font on your site. (It is worth noting that some browsers will require a refresh to render properly if the font-size is increased after the page has already loaded.)

The way to avoid this is to use ems instead of pxs. Ems are based on the font-size of their parent container and so when the font increases so does the container it lives in.

Another option similar to ems is to use rems (which stands for "root ems"). Rems, like ems, are based on font-size, but instead of using the font-size of the parent container, rems are calculated based on the root font-size - that is the font-size of the html tag.

Whether you use ems or rems, by creating a fluid system of proportions rather than rigid (px) layout, things keep working and are rea

@bryanstedman
bryanstedman / markdown.xml
Created April 28, 2013 02:27 — forked from lg0/markdown.xml
<!-- copy this to YOUR_THEME.tmTheme-->
<dict>
<key>name</key>
<string>diff: deleted</string>
<key>scope</key>
<string>markup.deleted</string>
<key>settings</key>
<dict>
<key>background</key>
<string>#EAE3CA</string>