Skip to content

Instantly share code, notes, and snippets.

@matthewbeta
matthewbeta / gulpfile.js
Created September 8, 2014 11:18
example gulpfile for jekyll and sass
var gulp = require('gulp');
var gutil = require('gulp-util');
var sass = require('gulp-ruby-sass') ;
var prefix = require('gulp-autoprefixer');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var filter = require('gulp-filter');
var sourcemaps = require('gulp-sourcemaps');
var minifycss = require('gulp-minify-css');
var browserSync = require('browser-sync');
module.exports = function(grunt) {
var dev = {
deployConfiguration: grunt.file.readYAML("deployment.dev.yml"),
},
prod = {
deployConfiguration: grunt.file.readYAML("deployment.yml");
},
bucket = 'ember-build-dsh';
// more stuff
sass: {
dev: {
options: { // Target options
style: 'expanded'
},
},
prod: {
options: {
@matthewbeta
matthewbeta / nav.scss
Last active August 29, 2015 14:08
flexible, vertically centered navigation
$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 January 16, 2015 09:32
nesting parent-selector modifiers
/* instead of this */
.mobile {
.my-module {
color: red;
}
}
.desktop {
.my-module {
color: blue;
}
/* This */
.my-module {
background: #DDD;
&-header {
padding: 10px;
}
&-link {
color: red;
}
}
@matthewbeta
matthewbeta / resize-debounce.js
Created March 24, 2015 11:24
Resize event debounce from CSS tricks
var resizeTimer;
$(window).on('resize', function(e) {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
// Run code here, resizing has "stopped"
}, 250);
@matthewbeta
matthewbeta / mediaquery.less
Created April 27, 2015 15:39
Mixin for media queries with .no-mq fallback (for <IE9)
@sml-bp: 480px;
@med-bp: 720px;
@lrg-bp: 970px;
.phablet(@rules) {
@media screen and (min-width: @sml-bp) {
@rules();
}
};
@matthewbeta
matthewbeta / visuallyhidden.css
Last active August 29, 2015 14:25 — forked from sousk/gist:1280108
Hide Visually HTML5 BP style
/* 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;
# Your init script
#
# Atom will evaluate this file each time a new window is opened. It is run
# after packages are loaded/activated and after the previous editor state
# has been restored.
#
# An example hack to log to the console when each text editor is saved.
#
# atom.workspace.observeTextEditors (editor) ->
# editor.onDidSave ->