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 / href-css-styling.css
Last active January 2, 2016 18:18
Copy/paste from CSS Tricks for styling links based on href.
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 January 7, 2014 03:58
A sass version of normailze.css
// 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 / demo.html
Created June 11, 2013 17:19
Running multiple Foundicon fonts with Vanilla CSS
<!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 June 10, 2013 21:11
Foundation Icons for Multiple Fonts
[class*="foundicon-"]:before {
font-family: "AccessibilityFoundicons";
}
[class*="accessibility foundicon-"]:before {
font-family: "AccessibilityFoundicons";
}
[class*="social foundicon-"]:before {
font-family: "SocialFoundicons";
@hatefulcrawdad
hatefulcrawdad / SassMeister-input.scss
Last active December 16, 2015 17:46
Topic Color Idea
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// Bourbon (v4.2.3)
// ----
@import "bourbon/bourbon";
$topics: (
html: #39ADD1,
@hatefulcrawdad
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.
@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 {
@hatefulcrawdad
hatefulcrawdad / switch-migration4.html
Created February 28, 2013 15:56
<!-- Using class options -->
<div class="switch large round">
<input id="z" name="switch-z" type="radio" checked>
<label for="z" onclick="">Off</label>
<input id="z1" name="switch-z" type="radio">
<label for="z1" onclick="">On</label>
<span></span>
</div>
@hatefulcrawdad
hatefulcrawdad / custom-forms-migration4.html
Created February 28, 2013 15:51
<!-- Radio Inputs -->
<form class="custom">
<label for="radio1">
<input name="radio1" type="radio" id="radio1" style="display:none;">
<span class="custom radio"></span> Radio Button 1
</label>
</form>
<!-- Checkboxes -->
<form class="custom">
@hatefulcrawdad
hatefulcrawdad / dropdown-migration4.html
Created February 28, 2013 15:46
<!-- Element that will have Dropdown -->
<a href="#" data-dropdown="drop1">Has Dropdown</a>
<!-- The Dropdown that our JS will attach to the above element -->
<ul id="drop1" class="f-dropdown">
<li><a href="#">This is a link</a></li>
<li><a href="#">This is another</a></li>
<li><a href="#">Yet another</a></li>
</ul
@hatefulcrawdad
hatefulcrawdad / button-group-migration4.html
Created February 28, 2013 15:41
<!-- Button groups in Foundation 4 -->
<ul class="button-group">
<li><a href="#" class="small button">Button 1</a></li>
<li><a href="#" class="small button">Button 2</a></li>
<li><a href="#" class="small button">Button 3</a></li>
</ul>
<!-- Nav Bar Example -->
<div class="your-class">
<ul class="button-group">