Skip to content

Instantly share code, notes, and snippets.

View stowball's full-sized avatar

Matt Stow stowball

View GitHub Profile
@stowball
stowball / scss_maps.template.mustache
Created February 20, 2015 05:26
Grunt Spritesmith SCSS Maps Moustache template
{
// Default options
'functions': true
}
/*
SCSS variables are information about icon's compiled state, stored under its original file name
.icon-home {
width: map-get($icon-home, 'width');
@stowball
stowball / SassMeister-input.scss
Created February 20, 2015 05:50
Generated by SassMeister.com.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
$camp-prog-co1-snapshot: (
name: 'camp-prog-co1-snapshot',
x: 0px,
y: 40px,
@stowball
stowball / SassMeister-input.scss
Created February 22, 2015 23:46
Generated by SassMeister.com.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
$camp-prog-co1-snapshot: (
name: 'camp-prog-co1-snapshot',
x: 0px,
y: 40px,
offset_x: 0px,
@stowball
stowball / Gruntfile.js
Last active August 29, 2015 14:17
How to grunt watch sass then autoprefix css?
sass: {
dev: {
files: [{
expand: true,
cwd: 'css/lib',
src: ['**/*.scss'],
dest: 'css/stage',
ext: '.css'
}]
}
@stowball
stowball / tabs.html
Last active August 29, 2015 14:18
How I'd build a tab function
<div class="js-tabs">
<ul role="tablist" class="u-list-inline">
<li role="presentation"><a role="tab" href="#pane-curl" aria-controls="pane-curl" class="pill">cURL</a></li>
<li role="presentation"><a role="tab" href="#pane-ruby" aria-controls="pane-ruby">Ruby</a></li>
<li role="presentation"><a role="tab" href="#pane-python" aria-controls="pane-python">Python</a></li>
<li role="presentation"><a role="tab" href="#pane-php" aria-controls="pane-php">PHP</a></li>
<li role="presentation"><a role="tab" href="#pane-java" aria-controls="pane-java">Java</a></li>
<li role="presentation"><a role="tab" href="#pane-dotnet" aria-controls="pane-dotnet">.NET</a></li>
</ul>
@stowball
stowball / SassMeister-input.scss
Last active August 29, 2015 14:19
Generated by SassMeister.com.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
@mixin to-em-or-rem($unit, $properties, $sizes, $context, $sledgehammer) {
$values: ();
$sublists: false;
$unit: if($unit == "em", unquote("em"), unquote("rem"));
@stowball
stowball / SassMeister-input.scss
Last active August 29, 2015 14:19
Generated by SassMeister.com.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
@mixin to-em($properties, $sizes, $context: $font-size, $sledgehammer: false) {
$values: ();
$sublists: false;
$important: if($sledgehammer, "!important", "");
@stowball
stowball / SassMeister-input.scss
Created April 23, 2015 00:14
Generated by SassMeister.com.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
////
// I have written a lot of different `str-replace` Sass functions over
// the months yet none of my tries were succeeding in making the new substring
// able to contain the one to replace (e.g. `str-replace($str, "a", "ab")`).
// Thanks to Valérian Galliat (@valeriangalliat), I finally managed to build
@stowball
stowball / SassMeister-input.scss
Created April 27, 2015 07:20
Generated by SassMeister.com.
// ----
// libsass (v3.1.0)
// ----
$explicit-percentage-widths: (
9,
10,
12,
18,
20,