Skip to content

Instantly share code, notes, and snippets.

@mhayes
mhayes / SassMeister-input-HTML.html
Created Jan 7, 2014
Generated by SassMeister.com.
View SassMeister-input-HTML.html
<div class="chart under-half"></div>
@mhayes
mhayes / SassMeister-input-HTML.html
Created Jan 7, 2014
Generated by SassMeister.com.
View SassMeister-input-HTML.html
<div class="pie-timer deg-350">
<div class="before"></div>
<div class="after"></div>
</div>
@mhayes
mhayes / README.md
Last active Dec 31, 2015
Foundation w/Sass standalone
View README.md

Requirements

Make sure Ruby, Node.js, and bower are setup on your system before continuing.

Setup a new project

@mhayes
mhayes / README.md
Created Dec 4, 2013
Make elements sticky on a page
View README.md

Quickstart

  1. Add jquery.makeitsticky.js to your page
  2. Decide which element you want to make sticky, and initiliaze like so: $('#myElement').makeItSticky()

Options

  • threshold: Number of pixels from the top of the page when an element should become sticky (default: 20)
  • stickyClass: The fixed position class to apply to an element (default: fixed)
@mhayes
mhayes / _settings.scss
Created Nov 21, 2013
Foundation 5 | Sass Variables
View _settings.scss
// abide
// Accordion
$include-html-accordion-classes: $include-html-classes;
$accordion-navigation-padding: rem-calc(16);
$accordion-navigation-bg-color: #efefef  ;
$accordion-navigation-hover-bg-color: darken($accordion-navigation-bg-color, 5%);
$accordion-navigation-active-bg-color: darken($accordion-navigation-bg-color, 3%);
@mhayes
mhayes / README.md
Created Oct 4, 2013
Start a simple web server from the current directory by running `s` in terminal!
View README.md

Quickstart

Setup

  1. Place s in /usr/local/bin/s
  2. Run chmod +x /usr/local/bin/s

Usage

Let's assume you have a static site setup in ~/Sites/awesomeapp. Open up terminal and run the following commands:

@mhayes
mhayes / font_icon_html_generator.rb
Last active Dec 24, 2015
Font Icon Sample Page Generator
View font_icon_html_generator.rb
# Generate font icon page for reference
FONT = /^\.(sportisaicon[^:]+):before {/
paths = [
"fonts/custom_font_1.css",
"fonts/custom_font_2.css"
]
paths.each do |pth|
@mhayes
mhayes / semantic-grid-v1.scss
Last active Dec 20, 2015
Semantic grids in Foundation
View semantic-grid-v1.scss
.container{
@include grid-row();
.div1 {
@include grid-column(12);
@media #{$small} {
@include grid-column(4);
}
}
.div2 {
@include grid-column(12);
@mhayes
mhayes / README.md
Last active Dec 20, 2015
Using jQuery noConflict mode
View README.md

Enabling noConflict mode

Using a default Foundation 5 download you'll see some code like this in your index.html file:

<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
@mhayes
mhayes / README.md
Last active Dec 20, 2015
Equal Height Panels
View README.md

Quickstart

This code should go AFTER foundation has been initialized, i.e.

<script>
$(document).foundation();
// equal-height.js code can go here
</script>