Skip to content

Instantly share code, notes, and snippets.

View hatefulcrawdad's full-sized avatar

Chris Michel hatefulcrawdad

View GitHub Profile
@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 / icon-html.html
Created August 10, 2012 19:41
Icon Implementation in HTML
<i class="foundicon-[icon]"></i>
@hatefulcrawdad
hatefulcrawdad / more-than-one.css
Created August 10, 2012 19:44
More Than One Font
[class*="social foundicon-"]:before {
font-family: "SocialFoundicons";
}
// Variables
$ratio: $golden;
$baseSize: 14px;
$importantModNum: 44px;
// Modular Scale SCSS Function Syntax
h6 { font-size: ms(0); } // First Number in Scale
h5 { font-size: ms(1); } // Second Number in Scale
h4 { font-size: ms(2); } // Third Number in Scale
<label>Input with a prefix character</label>
<div class="row">
<div class="five columns">
<div class="row collapse">
<div class="eight mobile-three columns">
<input type="text" />
</div>
<div class="four mobile-one columns">
<a href="#" class="postfix button expand">Search</a>
</div>
@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 / _settings.scss
Created August 22, 2012 07:38
BuzzApp | Settings File
Note: This settings file is used for the Scss version of Foundation. To get these same settings, visit www.foundation.zurb.com/download and customize to your hearts desires.
// Grid Settings
$rowWidth: 1000px;
$columnGutter: 16px;
$totalColumns: 16;
// Colors Settings
@hatefulcrawdad
hatefulcrawdad / buzz-dochead.html
Created August 22, 2012 07:39
BuzzApp | Dochead
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
@hatefulcrawdad
hatefulcrawdad / buzz-body.html
Created August 22, 2012 07:41
BuzzApp | Body Code
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
@hatefulcrawdad
hatefulcrawdad / buzz-global.css
Created August 22, 2012 07:44
BuzzApp | Global Style
/* Global Styles - CSS */
body {
background: #f1f0e8;
}
.button {
text-transform: uppercase;
font-family: "Cabin", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}