Skip to content

Instantly share code, notes, and snippets.

View EdwardIrby's full-sized avatar

Edward Irby EdwardIrby

14 followers · 6 following
View GitHub Profile
@EdwardIrby
EdwardIrby / Checkbox-Style.scss
Last active August 29, 2015 13:56
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.
// 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 June 6, 2014 21:51
Ractive Flex Input Component v 0.1
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"),
@EdwardIrby
EdwardIrby / _font-size.scss
Created February 7, 2015 22:47
Font size SASS mxin
//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 February 9, 2015 19:58
rework postcss gulp task
//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"),
@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>
@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 / 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 / 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 / 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 / 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;