Skip to content

Instantly share code, notes, and snippets.

View Gruntfile.js
module.exports = function(grunt) {
// Show elapsed time after tasks run
require('time-grunt')(grunt);
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
});
View Web-Safe-fonts-#1.markdown

Web Safe fonts #1

Gonna try and make some nice typographic things with websafe fonts. Started with the easiest and best

A Pen by matthew jackson on CodePen.

License.

View gist:461b95693fe810aea0ab
// more stuff
sass: {
dev: {
options: { // Target options
style: 'expanded'
},
},
prod: {
options: {
View gist:9dc4b1704249f636fd88
module.exports = function(grunt) {
var dev = {
deployConfiguration: grunt.file.readYAML("deployment.dev.yml"),
},
prod = {
deployConfiguration: grunt.file.readYAML("deployment.yml");
},
bucket = 'ember-build-dsh';
@matthewbeta
matthewbeta / nav.scss
Last active Aug 29, 2015
flexible, vertically centered navigation
View nav.scss
$color-nav-bg: grey
$color-nav-bg-active
$stretch: -100px; // taller/wider than your links would ever need to stretch
// 1. Set the nav ul to be table
.nav-list {
display: table;
width: 100%;
}
// 2. Set the nav items to be table-cell
@matthewbeta
matthewbeta / parent-selector-modifiers
Created Jan 16, 2015
nesting parent-selector modifiers
View parent-selector-modifiers
/* instead of this */
.mobile {
.my-module {
color: red;
}
}
.desktop {
.my-module {
color: blue;
}
View gist:0ee7b9a8bbbac4540c3c
/* This */
.my-module {
background: #DDD;
&-header {
padding: 10px;
}
&-link {
color: red;
}
}
@matthewbeta
matthewbeta / resize-debounce.js
Created Mar 24, 2015
Resize event debounce from CSS tricks
View resize-debounce.js
var resizeTimer;
$(window).on('resize', function(e) {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
// Run code here, resizing has "stopped"
}, 250);
@matthewbeta
matthewbeta / visuallyhidden.css
Last active Aug 29, 2015 — forked from sousk/gist:1280108
Hide Visually HTML5 BP style
View visuallyhidden.css
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;