Skip to content

Instantly share code, notes, and snippets.

@davidtheclark
davidtheclark / scss-extendable-icon-template.css
Created August 15, 2013 20:33
A template for grunt-webfont that utilizes the SCSS @extend functionality to limit code duplication without requiring two classes in the markup. Also, automatically hides the text of <b> tags within the icon element.
/* Generated by grunt-webfont */
<% if (fontfaceStyles) { %>@font-face {
font-family:"<%= fontBaseName %>";<% if (eot) { %>
src:<%= fontSrc1 %>;<% }%>
src:<%= fontSrc2 %>;
font-weight:normal;
font-style:normal;
}
<% } %>
@davidtheclark
davidtheclark / defancifyBootstrap.js
Last active December 16, 2015 15:08
De-Fancify Bootstrap with Grunt, using the grunt-text-replace plugin. After installing grunt-text-replace, incorporate this code into your own grunt.initConfig object. The goal is to remove box-shadows, text-shadows, border-radii, gradients, and gradientBars from Bootstrap's standard UI elements -- outputting a version of Bootstrap's LESS (or SC…
/*
Grunt is here: http://gruntjs.com/
The plugin grunt-text-replace is here: https://github.com/yoniholmes/grunt-text-replace
After reading those instructions, it should be clear how to use the following.
*/
module.exports = function(grunt) {
grunt.initConfig({
'use strict';
var fs = require('graceful-fs');
var Promise = require('pinkie-promise');
var yaml = require('js-yaml');
var parseJson = require('parse-json');
var requireFromString = require('require-from-string');
module.exports = function(configPath, configFormat) {
return new Promise(function(resolve) {
fs = require 'fs'
pathutil = require 'path'
jade = require 'jade'
parseFiles = (dirname) ->
filenames = fs.readdirSync dirname
for file in filenames
continue if file.slice(0,1) is '.'
path = pathutil.join dirname, file
stats = fs.statSync pathutil.join dirname, path
var pathmodify = require('pathmodify')
var browserify = require('browserify')
browserify('./index.js')
.plugin(pathmodify(), {
mods: [
pathmodify.mod.dir('foo', './test/foo')
]
})
.bundle();
@davidtheclark
davidtheclark / idea.md
Last active August 29, 2015 14:15
available browser info module idea

There are several modules that do the following:

  1. locate available browsers on the current machine;
  2. do something with that information.

Usually #2 is "launch the browser with some specific content", but not always.

The modules I have in mind (of course there may be more!) are:

@davidtheclark
davidtheclark / SassMeister-input.scss
Created August 2, 2014 18:01
Generated by SassMeister.com.
// ----
// libsass (v2.0.0)
// ----
@mixin first {
/* first mixin was included */
body {
font-size: 100px;
}
}
@davidtheclark
davidtheclark / test-extends.scss
Created April 5, 2014 23:04
for comparing gzipping of Sass extends and mixins
@import "../bower_components/scut/dist/scut";
@for $i from 1 through 200 {
.test-#{$i} {
@extend %scut-hide-visually;
@extend %scut-image-replace;
@extend %scut-triangle;
@extend %scut-clearfix;
@extend %scut-fill;
@extend %scut-list-unstyled;