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 / visibility-migration4.css
Created February 28, 2013 15:25
/* The show classes */
.show-for-small /* Visible up to 768px */
.show-for-medium-down /* Visible from 1280px down */
.show-for-medium /* Visible between 768px and 1280px */
.show-for-medium-up /* Visible from 1280px up */
.show-for-large-down /* Visible from 1440px down */
.show-for-large /* Visible between 1280px and 1440px */
.show-for-large-up /* Visible from 1440px up */
/* The hide classes */
@hatefulcrawdad
hatefulcrawdad / section-migration4.html
Created February 28, 2013 15:23
<!-- Sections Markup in Foundation 4 -->
<div class="section-container vertical-nav" data-section>
<section class="section">
<p class="title"><a href="#panel1">Section 1</a></p>
<div class="content" data-slug="panel1">
<ul class="side-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li class="divider"></li>
@hatefulcrawdad
hatefulcrawdad / block-grid-migration4.html
Created February 28, 2013 15:15
<!-- Block grid syntax for Foundation 4 -->
<ul class="small-block-grid-2 large-block-grid-4">
<li><img src="path/to/image"></li>
<li><img src="path/to/image"></li>
<li><img src="path/to/image"></li>
<li><img src="path/to/image"></li>
</ul>
@hatefulcrawdad
hatefulcrawdad / grid-migration-4.html
Last active December 14, 2015 08:19
<!-- Foundation 4 Grid -->
<div class="row">
<div class="small-2 large-4 columns">...</div>
<div class="small-4 large-4 columns">...</div>
<div class="small-6 large-4 columns">...</div>
</div>
<!-- Offsets in 4 -->
<div class="row">
<div class="small-2 columns">...</div>
@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 / boilerplate.html
Last active October 25, 2015 16:13
HTML5 Boilerplate
<!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
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 / 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>