Skip to content

Instantly share code, notes, and snippets.

View smileyj68's full-sized avatar

Jonathan Smiley smileyj68

View GitHub Profile
<div class="small-8 group">
<div class="small-6 block">
<!-- Content goes here -->
</div>
<div class="small-6 block">
<!-- Content goes here -->
</div>
<div class="small-6 block">
<!-- Content goes here -->
</div>
<div class="small-8 group">
<!-- Blocks go here -->
</div>
<div class="small-4 group">
<!-- Blocks go here -->
</div>
<div class="group">
<div class="block">
<!-- Content goes here -->
</div>
<div class="block">
<!-- Content goes here -->
</div>
</div>
<div class="group">
<!-- Groups or blocks go here -->
</div>
@smileyj68
smileyj68 / f3-form-errors.html
Created July 6, 2012 15:47
Foundation 3 Form Errors
<div class="row">
<div class="five columns">
<label class="error">Field with Error</label>
<input type="text" class="error" />
<small class="error">Invalid entry</small>
</div>
<div class="five columns end error">
<label>Another Error</label>
<input type="text" />
@smileyj68
smileyj68 / f3-flex-video.html
Created July 5, 2012 19:33
Foundation 3 Flex Video
<div class="flex-video">
<iframe width="420" height="315" src="http://www.youtube.com/embed/9otNWTHOJi8" frameborder="0" allowfullscreen></iframe>
</div>
<div class="flex-video widescreen">
<iframe width="560" height="315" src="http://www.youtube.com/embed/N966cATFWjI" frameborder="0" allowfullscreen></iframe>
</div>
<div class="flex-video widescreen vimeo">
<iframe src="http://player.vimeo.com/video/21762736?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
@smileyj68
smileyj68 / f3-mobile-grid.html
Created June 28, 2012 06:06
Foundation 3 Mobile Grid
<div class="row display">
<div class="three mobile-one columns">
.three.mobile-one.columns
</div>
<div class="nine mobile-three columns">
.nine.mobile-three.columns
</div>
</div>
@smileyj68
smileyj68 / f3-migrate-forms.html
Created June 27, 2012 03:47
Foundation 2 vs Foundation 3 Forms
<!-- Foundation 2 Forms -->
<form>
<label>Form Input</label>
<input type="text" class="input-text medium" />
</form>
<!-- Foundation 3 Forms -->
<form class="row">
<div class="six columns">
<label>Form Input</label>
@smileyj68
smileyj68 / f3-migrate-buttons.html
Created June 27, 2012 03:29
Foundation 2 vs Foundation 3 Buttons
<!-- Foundation 2 Buttons -->
<a href="#" class="large nice blue radius button">Fancy Button</a>
<a href="#" class="small nice green rounded button">Fancy Button</a>
<!-- Foundation 3 Buttons -->
<a href="#" class="large radius button">Fancy Button</a>
<a href="#" class="small success rounded button">Fancy Button</a>
@smileyj68
smileyj68 / f3-migrate-grid.html
Created June 27, 2012 03:21
Foundation 2 vs Foundation 3 Grid
<!-- Foundation 2 Structure -->
<div class="container">
<div class="row">
<div class="six columns">
<div class="six columns">
</div>
</div>
<!-- Foundation 3 Structure -->
<div class="row">