Skip to content

Instantly share code, notes, and snippets.

Mark Hayes mhayes

Block or report user

Report or block mhayes

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@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>
You can’t perform that action at this time.