Skip to content

Instantly share code, notes, and snippets.

View souporserious's full-sized avatar

Travis Arnold souporserious

View GitHub Profile
@souporserious
souporserious / SassMeister-input.scss
Created January 29, 2016 10:58
Generated by SassMeister.com.
// ----
// libsass (v3.3.2)
// ----
@mixin link($initial-state, $hover: $initial-state, $active: $initial-state, $focus: $initial-state, $visited: $initial-state) {
$states: (
'hover': $hover,
'active': $active,
'focus': $focus,
'visited': $visited
@souporserious
souporserious / SassMeister-input.scss
Created February 21, 2016 08:28
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
$margin-base: 15;
$scale: 3;
@for $i from 1 through 3 {
$margin: $margin-base/$i;
.m-#{$i} {
import React, { Component, PropTypes, Children, cloneElement } from 'react'
import { findDOMNode } from 'react-dom'
import { Motion, spring, presets } from 'react-motion'
import Measure from '../src/react-measure'
class Slideable extends Component {
static propTypes = {
children: PropTypes.node.isRequired,
show: PropTypes.bool.isRequired,
springConfig: React.PropTypes.objectOf(React.PropTypes.number)
$breakpoints: (
sm: (0em, 40em),
md: (40.063em, 64em),
lg: (64.063em, 90em)
);
@function lower-bound($range){
@if length($range) <= 0 {
@return 0;
}
@souporserious
souporserious / polycolorScale
Created November 28, 2016 04:35
create a scale from multiple colors
// mashup
// https://gist.github.com/maxwells/8251275
// https://github.com/andrewbranch/Colorpolate
// convert 6-digit hex to rgb components;
// accepts with or without hash ("335577" or "#335577")
function hexToRgb(hex) {
const [r, g, b] = hex.replace(/#/,'').match(/.{1,2}/g)
return [
parseInt(r, 16),
@souporserious
souporserious / SassMeister-input-HTML.html
Last active September 7, 2022 19:28
Generated by SassMeister.com.
<div class="grid-block gutter">
<div class="grid-block md-12 lg-4"></div>
<div class="grid-block md-12 lg-4"></div>
<div class="grid-block md-12 lg-4"></div>
</div>
@souporserious
souporserious / react-scrollspy.js
Last active May 2, 2021 06:24
Two simple components to build a ScrollSpy in React
import React, { Component, PropTypes, createElement } from 'react'
import { findDOMNode } from 'react-dom'
// usage:
// import { ScrollSpy, Link } = './wherever-this-file-is'
//
// <ScrollSpy>
// <Link ref={c => this._firstLink = c} section="1">Section 1</Link>
// <Link section="2">Section 2</Link>
// <Link section="3">Section 3</Link>
@souporserious
souporserious / SassMeister-input.scss
Created February 6, 2017 07:10 — forked from csswizardry/SassMeister-input.scss
Generated by SassMeister.com.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
$spacing-unit: 24px;
$spacing-unit-tiny: round(0.25 * $spacing-unit);
$spacing-unit-small: round(0.5 * $spacing-unit);
$spacing-unit-large: round(2 * $spacing-unit);
function outy(nodes, types, eventHandler) {
nodes = Array.isArray(nodes) ? nodes : [nodes]
types = Array.isArray(types) ? types : [types]
function handleEvent(e) {
for (var i = nodes.length; i--; ) {
if (nodes[i].contains(e.target)) return
}
eventHandler(e)
}
@souporserious
souporserious / sketch-file-to-svg-json-file.js
Last active May 29, 2017 00:01
Turn a Sketch file into an SVG JSON file.
const { readdirSync, readFileSync, writeFileSync } = require('fs')
const { resolve } = require('path')
const del = require('del')
const svgson = require('svgson')
const SketchTool = require('sketch-tool')
const IN_PATH = resolve(__dirname, 'icons.sketch')
const OUT_PATH = resolve(__dirname, 'icons.js')
const Sketch = new SketchTool({