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 ie8-grid-foundation-4.css
/* The Grid ---------------------- */
.lt-ie9 .row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row.large-collapse .column,
.lt-ie9 .row.large-collapse .columns { padding: 0; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row .row.large-collapse { margin: 0; }
.lt-ie9 .column, .lt-ie9 .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
.lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; }
@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 / foundation4-semantic-grid.html
Last active May 29, 2019
Our mobile first grid mixins for Foundation 4.0. Comments welcome.
View foundation4-semantic-grid.html
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Foundation Semantic Grid Testing</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
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 / modular-scale.txt
Created Aug 22, 2012
BuzzApp | Modular Scale
View modular-scale.txt
// BuzzApp Modular Scale Table
//
// 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
// | | | | | | | | | | | | | | | | | |
// 16, 21, 26, 34, 42, 56, 68, 90, 110, 146, 177, 236, 287, 382, 464, 618, 752, 1000
Note: These numbers are rounded from the original scale, giving us a cleaner set of numbers to work with.
@hatefulcrawdad
hatefulcrawdad / orbit-hover.scss
Created Sep 18, 2012
Foundation Orbit Nav on Hover
View orbit-hover.scss
/* SCSS */
.orbit-wrapper {
.slider-nav span { @include opacity(0); @include single-transition(opacity, 400ms); }
&:hover .slider-nav span { @include opacity(1); }
}
/* CSS */
.orbit-wrapper .slider-nav span { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 400ms; -moz-transition: opacity 400ms; -o-transition: opacity 400ms; transition: opacity 400ms; }
View css-triangles.scss
.element {
@include cssTriangle(5px, #ff0000, [top, bottom, left, right]);
}
@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
});
@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 */
You can’t perform that action at this time.