Skip to content

Instantly share code, notes, and snippets.

View superfine's full-sized avatar
🥳
"my github account is full of empty repositories with good intentions" (@kvlly)

Patrick Laubner superfine

🥳
"my github account is full of empty repositories with good intentions" (@kvlly)
View GitHub Profile
@superfine
superfine / _FF.scss
Created August 18, 2016 10:01
CSS Hacks Targeting Firefox
// FF+ Scss styles go here
@-moz-document url-prefix() {
body::before {
@include border-radius(3px);
content: 'According to the media query hack this is FF+';
display: block;
padding: 10px;
position: absolute;
top: 10px;
@superfine
superfine / msieversion.js
Created September 19, 2016 11:56
How to determine browser version from scripthttp://stackoverflow.com/questions/19999388/check-if-user-is-using-ie-with-jquery
'use strict';
var §projectName§ = window.§projectName§ || {};
§projectName§.msieversion = {
init: function() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
// SVG Grunt Workflow
// https://www.npmjs.com/package/grunt-svg-sprite
// ./config/svg_sprite.js
'use strict';
module.exports = function(grunt) {
grunt.config.set('svg_sprite', {
sprites: {
expand: true,
@superfine
superfine / class-slug.scss
Created March 16, 2017 16:42
Class slug generator
// Create height spacer classes
// ========================================================================= */
$class-slug: cwt-gen !default;
@for $i from 0 through 50 {
.#{$class-slug}-#{$i} {
height: (1pt - 2) + $i;
}
}
@superfine
superfine / README-Template.md
Created March 29, 2017 20:31 — forked from PurpleBooth/README-Template.md
A template to make good README.md

Project Title

One Paragraph of project description goes here

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

@superfine
superfine / printOnReload.js
Created April 24, 2017 13:57
CSS Print Sytylesheet helper
'use strict';
var PRJ = window.PRJ || {};
PRJ.printOnReload = {
init: function () {
window.print();
}
};
@superfine
superfine / _plus-minus-animation.scss
Created May 7, 2017 17:11
non IE11 Plus Minus Animation
// Plus Minus Animation
// will not function in IE11 http://caniuse.com/#search=flex
// ========================================================================= */
@mixin plus-minus {
@include flexbox();
@include align-items(center);
@include justify-content(center);
&:before,
&:after {
@superfine
superfine / nuke.scss
Created October 21, 2017 05:27 — forked from JamieMason/nuke.scss
nuke.scss
a, abbr, acronym, address, applet, area, article, aside, audio, b, base,
basefont, bdi, bdo, bgsound, big, blink, blockquote, body, br, button, canvas,
caption, center, cite, code, col, colgroup, content, data, datalist, dd, del,
details, dfn, dir, div, dl, dt, em, embed, fieldset, figcaption, figure, font,
footer, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr,
html, i, iframe, img, input, ins, isindex, kbd, keygen, label, legend, li, link,
listing, main, map, mark, marquee, menu, menuitem, meta, meter, nav, nobr,
noframes, noscript, object, ol, optgroup, option, output, p, param, plaintext,
pre, progress, q, rp, rt, ruby, s, samp, script, section, select, shadow, small,
source, spacer, span, strike, strong, style, sub, summary, sup, table, tbody,
@superfine
superfine / README.md
Created October 26, 2017 21:49 — forked from addyosmani/README.md
108 byte CSS Layout Debugger

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

@superfine
superfine / build.js
Last active December 5, 2017 08:51
Grunt build task with force options
/**
*
* Grunt build task with force options via stackoverflow
*
*/
module.exports = function(grunt) {
const previous_force_state = grunt.option('force');