Skip to content

Instantly share code, notes, and snippets.

View EdwardIrby's full-sized avatar

Edward Irby EdwardIrby

16 followers · 6 following
View GitHub Profile
@EdwardIrby
EdwardIrby / ShadowDom.js
Created March 5, 2018 00:53
A little Web Component in my React
import React, { Component, Fragment, Children } from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import PropTypes from 'prop-types';
export class ShadowDom extends Component {
constructor(props){
super(props)
this.getTargetRef = this.getTargetRef.bind(this);
}
componentDidMount() {
@EdwardIrby
EdwardIrby / javascript.yaml
Created November 13, 2017 03:22
Syntax highlighting es6 micro text editor
filetype: javascript
detect:
filename: "(\\.js$|\\.es[5678]?$)"
header: "^#!.*/(env +)?node( |$)"
rules:
- constant.number: "\\b[-+]?([1-9][0-9]*|0[0-7]*|0x[0-9a-fA-F]+)([uU][lL]?|[lL][uU]?)?\\b"
- constant.number: "\\b[-+]?([0-9]+\\.[0-9]*|[0-9]*\\.[0-9]+)([EePp][+-]?[0-9]+)?[fFlL]?"
- constant.number: "\\b[-+]?([0-9]+[EePp][+-]?[0-9]+)[fFlL]?"
@EdwardIrby
EdwardIrby / flex-cell.js
Last active January 5, 2016 23:49
Flex Grid Mixins Postcss
module.exports = function(mixin, value){
switch(value){
case "full":
var rule = {flex: "0 0 100%"};
break;
case "1of2":
var rule = {flex: "0 0 50%"};
break;
case "1of3":
var rule = {flex: "0 0 33.3333%"};
@EdwardIrby
EdwardIrby / zIndex.scss
Created August 20, 2015 15:50
zIndex
//z-depth
$z-1: 0px 1px 1.5px rgba(0, 0, 0, 0.12), 0px 1px 1px rgba(0, 0, 0, 0.24);
$z-2: 0px 3px 3px rgba(0, 0, 0, 0.16), 0px 3px 3px rgba(0, 0, 0, 0.23);
$z-3: 0px 10px 10px rgba(0, 0, 0, 0.19), 0px 6px 3px rgba(0, 0, 0, 0.23);
$z-4: 0px 14px 14px rgba(0, 0, 0, 0.25), 0px 10px 5px rgba(0, 0, 0, 0.22);
$z-5: 0px 19px 19px rgba(0, 0, 0, 0.30), 0px 15px 6px rgba(0, 0, 0, 0.22);
$zIndex-1:9;
$zIndex-2:19;
$zIndex-3:199;
@EdwardIrby
EdwardIrby / typography.scss
Last active August 29, 2015 14:27
Vertical Rythm and Typography
@function calculateRem($size) {
$remSize: $size / 16px;
@return $remSize * 1rem;
}
@mixin font-size($size) {
font-size: $size; /* ie8 fallback */
font-size: calculateRem($size);
@EdwardIrby
EdwardIrby / Reset.scss
Last active August 29, 2015 14:27
/**
* Resets
* --------------------------------------------------
* Adapted from normalize.css and some reset.css. We don't care even one
* bit about old IE, so we don't need any hacks for that in here.
*
* There are probably other things we could remove here, as well.
*
* normalize.css v2.1.2 | MIT License | git.io/normalize
@EdwardIrby
EdwardIrby / Media-Query-wMaps.scss
Last active August 29, 2015 14:27
Media Query Mixins with maps
@import "StyleVars.json";
@mixin max-media($breakpoint) {
@if map-has-key($breakpoints, $breakpoint){
@media(max-width:(map-get($breakpoints, $breakpoint) - 1) + px){
@content
}
}
@else if round($breakpoint) == $breakpoint{
@media(max-width:$breakpoint - 1px){
@EdwardIrby
EdwardIrby / flex-grid.scss
Last active January 5, 2016 19:18
Flex Grid SCSS
//This grid is based http://philipwalton.github.io/solved-by-flexbox/
//Mixins are inefficient in terms of code duplication but when post Processed
//By csso duplication can be removed. The point is not everything needs to happen
//at the preprocess stage.
//FLEX
@mixin flex {
display: flex;
flex-wrap: wrap;
}
@EdwardIrby
EdwardIrby / Table-ColumWidth-input.scss
Last active August 29, 2015 14:25
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
@mixin table-column-width($column-widths, $cell-padding:null){
@if $cell-padding == null{
$padding: 8px;
}@else{
$padding: $cell-padding;
}
@EdwardIrby
EdwardIrby / How_to_use.html
Last active August 29, 2015 14:22 — forked from jcgregorio/How_to_use.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="templating.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<template id=t>