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 / alok-test.html
Created January 9, 2013 01:28
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[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 -->
<meta name="viewport" content="width=device-width" />
@hatefulcrawdad
hatefulcrawdad / foundation4-grid.html
Created December 13, 2012 21:39
We've been going back and forth on how to best approach our grid for Foundation 4.0. We had a lot to consider since we're moving towards mobile-first with this release. After about 4 iterations, we wanted to post what we've got to get feedback from our beloved Scss community. This is the Scss version. From here we'll be building new semantic gri…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Foundation 4 Grid Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Disregard these styles, they are for giving rows and columns a temporary BG color for better visibility -->
@hatefulcrawdad
hatefulcrawdad / jackie.scss
Created November 28, 2012 23:16
Jackie
.row { width: $rowWidth; max-width: 100%; min-width: $screenSmall; margin: 0 auto;
.row { width: auto; max-width: none; min-width: 0; margin: 0 (-($columnGutter/2)); }
&.collapse {
.column, .columns { padding: 0; }
}
.row { width: auto; max-width: none; min-width: 0; margin: 0 (-($columnGutter/2));
&.collapse { margin: 0; }
}
}
@hatefulcrawdad
hatefulcrawdad / placeholders.scss
Created November 9, 2012 00:35
Placeholder Classes
// SCSS for placeholder classes
%fancy-container {
@include box-shadow(0 0 10px rgba(0,0,0,0.2));
@include border-radius(4px);
background: #eee;
border: solid 1px #ddd;
}
%fancier-container {
@include box-shadow(0 0 10px rgba(20,20,150,0.1));
@hatefulcrawdad
hatefulcrawdad / workspace-template.html
Created October 25, 2012 23:37
Foundation Template: Workspace
<div class="row">
<div class="twelve columns">
<!-- Navigation -->
<nav class="top-bar contain-to-grid">
<ul>
<li class="name"><h1><a href="#">Title</a></h1></li>
<li class="toggle-topbar"><a href="#"></a></li>
</ul>
@hatefulcrawdad
hatefulcrawdad / store-template.html
Created October 25, 2012 23:36
Foundation Template: Store
<div class="row">
<div class="twelve columns">
<!-- Navigation -->
<div class="row">
<div class="twelve columns">
<ul class="top-bar">
@hatefulcrawdad
hatefulcrawdad / boxy-template.html
Created October 25, 2012 23:36
Foundation Template: So Bosy
<div class="row">
<div class="twelve columns">
<!-- Navigation -->
<ul class="nav-bar">
<li class="active"><a href="#">Nav Item 1</a></li>
<li><a href="#">Nav Item 2</a></li>
<li><a href="#">Nav Item 3</a></li>
</ul>
@hatefulcrawdad
hatefulcrawdad / realty-template.html
Created October 25, 2012 23:35
Foundation Template: Realty
<!-- Navigation -->
<nav class="top-bar fixed">
<ul>
<li class="name"><h1><a href="#">Title</a></h1></li>
<li class="toggle-topbar"><a href="#"></a></li>
</ul>
<section>
<ul class="left">
@hatefulcrawdad
hatefulcrawdad / marketing-template.html
Created October 25, 2012 23:33
Foundation Template: Marketing
<nav class="top-bar">
<ul>
<li class="name"><h1><a href="#">Title</a></h1></li>
<li class="toggle-topbar"><a href="#"></a></li>
</ul>
<section>
<ul class="left">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
@hatefulcrawdad
hatefulcrawdad / pricing-table.html
Created October 11, 2012 04:57
Pricing Table
<ul class="pricing-table">
<li class="title">Standard</li>
<li class="price">$99.99</li>
<li class="description">Content...</li>
<li class="bullet-item">1 Database</li>
<li class="bullet-item">5GB Storage</li>
<li class="bullet-item">20 Users</li>
<li class="cta-button"><a class="button" href="#">Buy it Now &raquo;</a></li>
</ul>