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 / ie8-grid-foundation-4.css
Last active September 9, 2021 18:47
/* The Grid ---------------------- */
.lt-ie9 .row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row.large-collapse .column,
.lt-ie9 .row.large-collapse .columns { padding: 0; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row .row.large-collapse { margin: 0; }
.lt-ie9 .column, .lt-ie9 .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
.lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; }
@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">
@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 / foundation4-semantic-grid.html
Last active October 18, 2023 13:27
Our mobile first grid mixins for Foundation 4.0. Comments welcome.
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Foundation Semantic Grid Testing</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>