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 / Checkbox-Style.scss
Last active Aug 29, 2015
Cross browser checkbox styling with label and no need for an "id" value on the input and "for" attribute on the label. There's also an example of using an encoded svg for the background image.
View Checkbox-Style.scss
// markup: <label class="css-label"><input type="checkbox" id="valueCheck" /><i class="css-checkbox"></i>Some Label</label>
.css-label{
padding-left:20px;
position:relative;
input[type=checkbox]{
position: absolute;
opacity: 0;
overflow: hidden;
clip: rect(0 0 0 0);
height:15px;
@EdwardIrby
EdwardIrby / FlexInput.js
Created Jun 6, 2014
Ractive Flex Input Component v 0.1
View FlexInput.js
Ractive.partials.selectbox= require("../selectbox/selectbox.html");
var flexinputs ={
Input:require("./layouts/Input.html"),
InputAnchor:require("./layouts/InputAnchor.html"),
InputButton:require("./layouts/InputButton.html"),
InputSlectbox:require("./layouts/InputSelect.html"),
InputSelectboxAnchor:require("./layouts/InputSelectAnchor.html"),
InputSelectboxButton:require("./layouts/InputSelectButton.html"),
Selectbox:require("./layouts/Select.html"),
TripleSelect:require("./layouts/TripleSelect.html"),
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);
@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 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 / 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;
}
@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 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 / 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 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;
You can’t perform that action at this time.