Skip to content

Instantly share code, notes, and snippets.

Chris Michel hatefulcrawdad

Block or report user

Report or block hatefulcrawdad

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
View boilerplate.html
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
@hatefulcrawdad
hatefulcrawdad / vertical-align-mixin.scss
Created Jan 24, 2014
Vertical Align all the things!
View vertical-align-mixin.scss
// Source Article: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
@hatefulcrawdad
hatefulcrawdad / keydown.js
Created Jan 18, 2014
Always forget how to program keystrokes in jquery, so I'm creating this to reference.
View keydown.js
$(document).keyup(function(e) {
if (e.keyCode == 27) { <DO YOUR WORK HERE> } // esc
});
View modern-scale.scss
// --------------------------------------------------------------------------------------
// A More Modern Scale for Web Typography
// Based on this article: http://typecast.com/blog/a-more-modern-scale-for-web-typography
// --------------------------------------------------------------------------------------
$body-font-size: 1em !default;
// Adjusts body typography to be default
// for each browser.
@mixin reset-body-font-size($font-size: 100%, $size-adjustment: 0.5) {
@hatefulcrawdad
hatefulcrawdad / href-css-styling.css
Last active Jan 2, 2016
Copy/paste from CSS Tricks for styling links based on href.
View href-css-styling.css
a[href^="http://"] {
/* fully valid URL, likely external link */
}
a[href="http://google.com"] {
/* link to specific website */
}
a[href^="/"], a[href^=".."] {
/* internal relative link */
@hatefulcrawdad
hatefulcrawdad / normalize.sass
Created Jan 7, 2014
A sass version of normailze.css
View normalize.sass
// normalize.css v2.1.3 | MIT License | git.io/normalize
// ==========================================================================
// HTML5 display definitions
// ==========================================================================
// Correct `block` display not defined in IE 8/9.
article,
aside,
details,
@hatefulcrawdad
hatefulcrawdad / foundation5-grid.css
Created Jun 18, 2013
Sneak peek at what we're thinking about for the Foundation 5 Grid.
View foundation5-grid.css
/* Row and Column defaults */
.row { margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; max-width: 62.5em; width: 100%; }
.row .row.collapse { margin-left: 0; margin-right: 0; max-width: none; width: auto; }
.row .row { margin-left: -0.9375em; margin-right: -0.9375em; max-width: none; width: auto; }
.row.collapse .column, .row.collapse .columns { padding-left: 0; padding-right: 0; float: left; }
.column, .columns { padding-left: 0.9375em; padding-right: 0.9375em; width: 100%; float: left; position: relative; }
/* Up to 640px */
@media only screen {
.small-1 { width: 8.33333% }
@hatefulcrawdad
hatefulcrawdad / demo.html
Created Jun 11, 2013
Running multiple Foundicon fonts with Vanilla CSS
View demo.html
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Multiple Founicon Fonts</title>
<link rel="stylesheet" href="stylesheets/style.css">
<!--[if lt IE 8]>
<link rel="stylesheet" href="stylesheets/style_ie7.css">
<![endif]-->
</style>
</head>
@hatefulcrawdad
hatefulcrawdad / gist:5752335
Created Jun 10, 2013
Foundation Icons for Multiple Fonts
View gist:5752335
[class*="foundicon-"]:before {
font-family: "AccessibilityFoundicons";
}
[class*="accessibility foundicon-"]:before {
font-family: "AccessibilityFoundicons";
}
[class*="social foundicon-"]:before {
font-family: "SocialFoundicons";
@hatefulcrawdad
hatefulcrawdad / medium-grid.css
Created Mar 15, 2013
This should get your close to creating a custom grid for foundation within whatever media query you want. Just change the word "class" to whatever you want to use. I haven't tested this, just copied in the large-# classes as a base, but it should work.
View medium-grid.css
@media only screen and (your-widths) {
.row .class-1 {
position: relative;
width: 8.33333%; }
.row .class-2 {
position: relative;
width: 16.66667%; }
.row .class-3 {
You can’t perform that action at this time.