Skip to content

Instantly share code, notes, and snippets.

View hatefulcrawdad's full-sized avatar

Chris Michel hatefulcrawdad

110 followers · 7 following
View GitHub Profile
@hatefulcrawdad
hatefulcrawdad / modern-scale.scss
Last active February 26, 2024 07:02
SCSS version of http://typecast.com/blog/a-more-modern-scale-for-web-typography
// --------------------------------------------------------------------------------------
// 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 / foundation4-semantic-grid.html
Last active October 18, 2023 13:27
Our mobile first grid mixins for Foundation 4.0. Comments welcome.
<!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>
@hatefulcrawdad
hatefulcrawdad / ie8-grid-foundation-4.css
Last active September 9, 2021 18:47
/* 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 / foundation-icon-template.css
Created August 10, 2012 19:39
Foundation Icon CSS
@font-face {
font-family: '[set]Foundicons';
src: url('fonts/[set]_foundicons.eot');
src: url('fonts/[set]_foundicons.eot?#iefix') format('embedded-opentype'),
url('fonts/[set]_foundicons.woff') format('woff'),
url('fonts/[set]_foundicons.ttf') format('truetype'),
url('fonts/[set]_foundicons.svg#[set]Foundicons') format('svg');
font-weight: normal;
font-style: normal;
}
@hatefulcrawdad
hatefulcrawdad / foundation5-grid.css
Created June 18, 2013 17:31
Sneak peek at what we're thinking about for the Foundation 5 Grid.
/* 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 / modular-scale.txt
Created August 22, 2012 07:34
BuzzApp | Modular Scale
// 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 September 18, 2012 17:20
Foundation Orbit Nav on Hover
/* 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; }
@hatefulcrawdad
hatefulcrawdad / css-triangles.scss
Created June 28, 2012 04:42
CSS Triangles
.element {
@include cssTriangle(5px, #ff0000, [top, bottom, left, right]);
}
@hatefulcrawdad
hatefulcrawdad / vertical-align-mixin.scss
Created January 24, 2014 23:18
Vertical Align all the things!
// 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 January 18, 2014 00:29
Always forget how to program keystrokes in jquery, so I'm creating this to reference.
$(document).keyup(function(e) {
if (e.keyCode == 27) { <DO YOUR WORK HERE> } // esc
});