View placeholder-image.jade
//- Generate a placeholder image from placehold.it
//- ----------------------------------
//- Parameters:
//- width: image width in pixels
//- height: image height in pixels
//- text (optional): text inside image
//- ----------------------------------
//- Usage:
//- +image(200, 120, 'Example')
//- ----------------------------------
View breakpoints.coffee
# Breakpoint class
# provides a way to manage and access breakpoint values for use in media queries
# read in more detail about this at https://medium.com/@caleb.pierce/coffeescript-for-responsive-websites-3398abd5e2bd
class Breakpoint
constructor: (@lower_bound, @upper_bound = "") ->
@screen = "only screen"
# returns a min-width style media query breakpoint
up: ->
View .bowerrc
{
"directory": "bower_components"
}
View zepto-yepnope_with-fallback.coffee
yepnope [
{
# if IE, we need jQuery. Otherwise, Zepto will do just fine
test: '__proto__' of {}
yep: '//cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js'
nope: '//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js'
complete: ->
# use local jQuery fallback if neither Zepto nor jQuery loaded
!Zepto? and !window.jQuery? and yepnope('js/libs/jquery-1.9.1.min.js')
}
View kill_compatibility_mode.html
<!DOCTYPE html>
<html lang='en' class='no-js'>
<head>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<!-- title, other meta, style, and script tags follow here -->
<!-- if you need detection for >= IE10, use my script here: https://gist.github.com/ridgehkr/5985810 -->
</head>
<!--[if IE 7]> <body class="ie7 lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <body class="ie8 lt-ie9"> <![endif]-->
View text_legibility.css
body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/*
if text looks weak, use this as well:
-webkit-text-stroke: 0.35px;
*/
}
View fix_iOS_rotation.coffee
((doc)->
addEvent = 'addEventListener'
type = 'gesturestart'
qsa = 'querySelectorAll'
scales = [1, 1]
meta = if qsa of doc then doc[qsa]('meta[name=viewport]') else []
fix = ->
meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1]
doc.removeEventListener(type, fix, true)
View ios_scale_fix.css
/* Make sure this is last - helps correct for an orientation scale bug in iOS */
@media screen and (orientation:landscape) and (device-width:320px) and (device-height: 480px) {
body {
width: 480px;
}
}
View responsive_video_embed.scss
.video-embed {
position: relative;
padding-bottom: 56.25%; // a 16x9 video's height is 56.25% of its width
height: 0;
object, embed, iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
View spaced_grid.scss
// container for evenly-spaced grid items
.l-spaced-grid {
text-align: justify;
font-size: 0;
&:after {
content: '';
display: inline-block;
width: 100%;
}
}