Skip to content

Instantly share code, notes, and snippets.

View marcelosomers's full-sized avatar

Marcelo Somers marcelosomers

View GitHub Profile
@marcelosomers
marcelosomers / challenging-class-order-01.html
Last active October 4, 2016 16:21
Code Snippets for Functional CSS post on slalom.com
<div class="flex m0 p0 md-m2 md-p2">
The breakpoints are grouped
</div>
@marcelosomers
marcelosomers / index.js
Last active September 7, 2016 14:17
Get variables from file name and rename files
var fs = require('fs')
var filepath = require('filepath')
fs.readdir('./logos', function(err, files) {
var path = filepath.newPath()
files.forEach(function(file) {
// remove the extension
var splitFile = file.split('.')
@marcelosomers
marcelosomers / SassMeister-input-HTML.html
Created November 13, 2015 02:59 — forked from csswizardry/SassMeister-input-HTML.html
Alert users about using a deprecated selector
<h1 class="foo">Lorem ipsum dolor sit amet.</h1>
<p class="error">Lorem ipsum dolor sit amet.</p>
#! /usr/bin/env bash
if [ -z "$1" ]; then
echo "Please specify a directory as the first argument."
exit 1
fi
if [ ! -d "$1" ]; then
echo "Not a valid directory."
exit 1
fi
/* bling.js */
window.$ = document.querySelectorAll.bind(document)
Node.prototype.on = window.on = function (name, fn) {
this.addEventListener(name, fn)
}
NodeList.prototype.__proto__ = Array.prototype
@marcelosomers
marcelosomers / gist:07e7e472e7b589ba0081
Created October 15, 2014 16:05
2 Variable Width side by side divs
/*
The wider content that should fill all remaining width - this one will resize
*/
.fluid {
width: 99%;
display: table-cell;
}
/*
The narrower content that should take up all necessary space - this one will not resize
@marcelosomers
marcelosomers / responsive.scss
Created September 28, 2014 18:28
Responsive Breakpoint Handler
/**
* Responsive breakpoint, to be used as @include breakpoint(name) {}
*/
@mixin breakpoint($name) {
@if map-has-key($breakpoints, $name) { // 1
@media #{inspect(map-get($breakpoints, $name))} { // 2
@content;
}
}
@else { // 3
@marcelosomers
marcelosomers / Module.js
Created September 10, 2014 15:30
JavaScript Module Pattern
var App = App || {};
App.Section = App.Section || {};
App.Section.Script = function () {
// Initialize global functions
function initalizeDomElements() {
}
@marcelosomers
marcelosomers / alpha-channel.scss
Last active August 29, 2015 14:04
Supporting Alpha Channels in old versions of IE without CSS bloat
/**
* The goal here is to simplify implementing alpha channels when requiring support of
* old versions of IE that do not support rgba values. For modern browsers, it'll only output
* the rgba value of a color, but for <IE9, it'll first output the solid version of the color
* with no opacity.
*/
/**
// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----
$base-path: "assets/" !default;
/**
* Asset handler
*