Skip to content

Instantly share code, notes, and snippets.

Edward Irby EdwardIrby

Block or report user

Report or block EdwardIrby

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@EdwardIrby
EdwardIrby / flex-cell.js
Last active Jan 5, 2016
Flex Grid Mixins Postcss
View flex-cell.js
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%"};
View zIndex.scss
//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 Aug 29, 2015
Vertical Rythm and Typography
View typography.scss
@function calculateRem($size) {
$remSize: $size / 16px;
@return $remSize * 1rem;
}
@mixin font-size($size) {
font-size: $size; /* ie8 fallback */
font-size: calculateRem($size);
View Reset.scss
/**
* 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 Aug 29, 2015
Media Query Mixins with maps
View Media-Query-wMaps.scss
@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){
View 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 Aug 29, 2015
Generated by SassMeister.com.
View Table-ColumWidth-input.scss
// ----
// libsass (v3.2.5)
// ----
@mixin table-column-width($column-widths, $cell-padding:null){
@if $cell-padding == null{
$padding: 8px;
}@else{
$padding: $cell-padding;
}
View 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>
@EdwardIrby
EdwardIrby / styles.js
Created Feb 9, 2015
rework postcss gulp task
View styles.js
//Rework Plugins
var plugins = {
calc:require("rework-calc"),
colorFunction: require("rework-color-function"),
customMedia:require("rework-custom-media"),
fontVariant:require("rework-font-variant"),
hexAlpha:require("rework-hex-alpha"),
import: require("rework-import"),
inherit:require("rework-inherit"),
View _font-size.scss
//REM Calc font size
@function calculateRem($size) {
$remSize: $size / 16px;
@return $remSize * 1rem;
}
@mixin font-size($size) {
font-size: $size; /* ie8 fallback */
font-size: calculateRem($size);
You can’t perform that action at this time.