mhayes

<div class="chart under-half"></div>

mhayes

<div class="pie-timer deg-350">
  <div class="before"></div>
  <div class="after"></div>
</div>

mhayes

Requirements

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

• Ruby 1.9.3+
• Node.js
• bower: [sudo] npm install bower -g

Setup a new project

mhayes

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

// 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

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

# 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

.container{
  @include grid-row();
  .div1 {
      @include grid-column(12);
      @media #{$small} {
        @include grid-column(4);
      }
  }
  .div2 {
      @include grid-column(12);

mhayes

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

Quickstart

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

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