Skip to content

Instantly share code, notes, and snippets.

View plapier's full-sized avatar

Phil LaPier plapier

71 followers · 11 following
View GitHub Profile
@plapier
plapier / gist:939284
Created April 24, 2011 03:52
Style file-inputs in webkit browsers only.
// Style file-upload for webkit-based browsers
@media screen and (-webkit-min-device-pixel-ratio:0) {
input[type="file"] {
background: #fff;
border: 1px solid $tan;
@include border-radius(0 2px 2px 0);
@include box-sizing(border-box);
color: #666;
font-size: 14px;
height: 32px;
@plapier
plapier / SyntaxDefinition.xml
Created April 27, 2011 22:35
Coda Theme for SCSS / Sass. SyntaxDefinition.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE syntax SYSTEM "syntax.dtd">
<syntax>
<head>
<name>Sass</name>
<!-- The definitions title -->
<charsintokens>_0987654321abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-@$</charsintokens>
<charsincompletion>_0987654321abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-@$</charsincompletion>
</head>
@plapier
plapier / SCSS Progress Bar.scss
Created December 7, 2011 16:09
SCSS Progress Bar. Using Bourbon and Javascript.
//************************************************************************//
// Progress Bar on saucy.accounts-edit
//************************************************************************//
div.limit.meter {
float: left;
margin: 10px 40px 20px 0;
text-align: center;
width: 240px;
span.numbers {
@plapier
plapier / gist:2044437
Created March 15, 2012 14:22
CSS/Sass Modal Dialog
<!-- HTML -->
<div class="modal-dialog-background">
<div class="modal-dialog">
<h1>Submit</h1>
<div class="inner-wrapper">
<p>Press submit to record your answers.</p>
</div>
<div class="buttons">
<button type="button" class="cancel">Cancel</button>
<button type="button" class="submit">Submit</button>
@plapier
plapier / gist:3862407
Created October 10, 2012 00:29
tumblr theme starter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
{block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}">
</head>
<body>
@plapier
plapier / dabblet.css
Created October 10, 2012 14:52 — forked from daneden/dabblet.css
CSS Photo Album
/* CSS Photo Album */
/* Rebound of this shot by @daryl: http://drbl.in/fwwM */
* {
margin: 0;
padding: 0;
position: relative;
box-sizing: border-box;
}
@plapier
plapier / Typekit font mixin.scss
Created October 31, 2012 18:39
Sass Mixin for typekit variation-specific font-family names
Sass Mixin for typekit variation-specific font-family names
Typekit IE6-8 Support (http://help.typekit.com/customer/portal/articles/6855-Using-multiple-weights-and-styles)
$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
// Must include fallbacks for EACH typekit font — set them each as variables
//************************************************************************//
$typekit-fonts: "source-sans-pro", "ff-tisa-web-pro"; // index [1, 2]
@plapier
plapier / gist:4088995
Created November 16, 2012 17:02
Rails for Designers Cheat Sheet

#Rails

####Generate a controller and action

rails generate controller <controller name> <action>

####Change layout for entire Controller

class ProductsController < ApplicationController

layout "inventory"

@plapier
plapier / ms-gradient.scss
Last active December 10, 2015 00:28
@mixin my-linear-gradient($color1, $color2) {
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#{$color1}', endColorstr='#{$color1}');
@include linear-gradient($color1, $color2); // Bourbon.io linear-gradient
}
// Usage
@include my-linear-gradient(red, orange);
@plapier
plapier / _animation.scss
Created February 1, 2013 16:01
// Fadein
//************************************************************************//
%animation-fadein {
@include animation(fadein 0.1s);
}
@mixin fadein {
0% {
opacity: 0;
}
100% {