Chris Michel hatefulcrawdad
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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
/ vertical-align-mixin.scss
Created
January 24, 2014 23:18
Vertical Align all the things!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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
/ keydown.js
Created
January 18, 2014 00:29
Always forget how to program keystrokes in jquery, so I'm creating this to reference.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).keyup(function(e) { | |
| if (e.keyCode == 27) { <DO YOUR WORK HERE> } // esc | |
| }); |
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // -------------------------------------------------------------------------------------- | |
| // 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
/ href-css-styling.css
Last active
January 2, 2016 18:18
Copy/paste from CSS Tricks for styling links based on href.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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
/ foundation5-grid.css
Created
June 18, 2013 17:31
Sneak peek at what we're thinking about for the Foundation 5 Grid.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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
/ demo.html
Created
June 11, 2013 17:19
Running multiple Foundicon fonts with Vanilla CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [class*="foundicon-"]:before { | |
| font-family: "AccessibilityFoundicons"; | |
| } | |
| [class*="accessibility foundicon-"]:before { | |
| font-family: "AccessibilityFoundicons"; | |
| } | |
| [class*="social foundicon-"]:before { | |
| font-family: "SocialFoundicons"; |
hatefulcrawdad
/ medium-grid.css
Created
March 15, 2013 04:44
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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 { |