AJ Kovalainen Darep

## _breakpoints.scss
// Get value from a Sass list of key-value items (helper function)
@function match($collection, $key) {
  @each $item in $collection {
    $index: index($item, $key);
    @if $index {
      $return: if($index == 1, 2, $index);
      @return nth($item, $return);
    }
  }
  @return false;

## render_component.js
/**
  Helper for rendering a component dynamically by supplying a name.
  NOTE: Only works on Ember.js 1.9 and lower, does not work on 1.10+.
        Ember 1.11 will have this feature built-in.

  Usage: {{render-component widgetName someData=some.data}}
*/
Ember.Handlebars.registerHelper('render-component', function(context, options) {
  var componentName = Ember.Handlebars.get(this, context, options);
  var helper = Ember.Handlebars.resolveHelper(options.data.view.container, componentName);

## gist:3463637
    // fetch the menus, show the menus and init the touch UI
    var menuRequest = Application.Api.fetchMenus();
    menuRequest.success(function (data) {
        this.addMenus(data);
    }.bind(this));

...

    Application.Api.fetchMenus = function () {
        return $.ajax({

## dabblet.css
/* <i> Cloud
 * by Dan Eden (http://dabblet.com/gist/2945570)
 * I just made it scale via font-size on .cloud
 */

html {
	min-height: 100%;
	background: linear-gradient(#b4bcbf, #fff);
}

## application.adapter.js
import Ember from 'ember';

export default DS.ActiveModelAdapter.extend({
  host: 'https://output.jsbin.com',
  namespace: 'zufarix',

  buildURL: function (modelName, id, snapshot, requestType, query) {
    var url = this._super(modelName, id, snapshot, requestType, query);
    url = url.replace('colors/', '') + '.json';
    return url;

## _breakpoints.scss
// Breakpoints
$breakpoint-1: 320px;
$breakpoint-2: 601px;
$breakpoint-3: 801px;  // Desktop min-width. Stuff starts to look like it's in the PSDs
$breakpoint-4: 1000px;  // Typical desktop min-width
$breakpoint-5: 1201px;  // Maximum width. Nothing should be happening beyond this point
$breakpoint-1-max-width: 460px;
$breakpoint-2-max-width: 580px;
$breakpoint-3-max-width: 999px;
$breakpoint-4-max-width: 1200px;

## index.html
<!doctype html>
<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="jquery.parseParams.js"></script>
</head>
<body>

<script>

## _breakpoints.scss
// Breakpoints for responsive design ($cols are from Frameless Grid)
$breakpoint-1: $cols5;
$breakpoint-2: $cols7;
$breakpoint-3: $cols9;

@mixin breakpoint($point) {
    @if $point == wide {
        @media (min-width: $breakpoint-3) { @content; }
        .oldie & { @content; }
    }

## layout.html.erb
<!-- source/layouts/layout.html.erb -->
    <ul class="nav-float products">
        <% for cat in data.products.main_categories do %>
            <li>
                <h4>
                    <% link_to cat.url do %>
                        <%= cat.name %>
                    <% end %>
                </h4>
                <ul>

## someModule.js
buildData: function () {
  var newData, data = api.getSongs();

  // Fix paths
  var transformPath = this.transformPath.bind(this);

  newData = data.map(function (row) {
      row.path = transformSongPath(row.path);
      return row;
  });
	// Get value from a Sass list of key-value items (helper function)
	@function match($collection, $key) {
	@each $item in $collection {
	$index: index($item, $key);
	@if $index {
	$return: if($index == 1, 2, $index);
	@return nth($item, $return);
	}
	}
	@return false;
	/**
	Helper for rendering a component dynamically by supplying a name.
	NOTE: Only works on Ember.js 1.9 and lower, does not work on 1.10+.
	Ember 1.11 will have this feature built-in.

	Usage: {{render-component widgetName someData=some.data}}
	*/
	Ember.Handlebars.registerHelper('render-component', function(context, options) {
	var componentName = Ember.Handlebars.get(this, context, options);
	var helper = Ember.Handlebars.resolveHelper(options.data.view.container, componentName);
	// fetch the menus, show the menus and init the touch UI
	var menuRequest = Application.Api.fetchMenus();
	menuRequest.success(function (data) {
	this.addMenus(data);
	}.bind(this));

	...

	Application.Api.fetchMenus = function () {
	return $.ajax({
	/* <i> Cloud
	* by Dan Eden (http://dabblet.com/gist/2945570)
	* I just made it scale via font-size on .cloud
	*/

	html {
	min-height: 100%;
	background: linear-gradient(#b4bcbf, #fff);
	}
	import Ember from 'ember';

	export default DS.ActiveModelAdapter.extend({
	host: 'https://output.jsbin.com',
	namespace: 'zufarix',

	buildURL: function (modelName, id, snapshot, requestType, query) {
	var url = this._super(modelName, id, snapshot, requestType, query);
	url = url.replace('colors/', '') + '.json';
	return url;
	// Breakpoints
	$breakpoint-1: 320px;
	$breakpoint-2: 601px;
	$breakpoint-3: 801px; // Desktop min-width. Stuff starts to look like it's in the PSDs
	$breakpoint-4: 1000px; // Typical desktop min-width
	$breakpoint-5: 1201px; // Maximum width. Nothing should be happening beyond this point
	$breakpoint-1-max-width: 460px;
	$breakpoint-2-max-width: 580px;
	$breakpoint-3-max-width: 999px;
	$breakpoint-4-max-width: 1200px;
	<!doctype html>
	<html>
	<head>
	<title></title>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="jquery.parseParams.js"></script>
	</head>
	<body>

	<script>
	// Breakpoints for responsive design ($cols are from Frameless Grid)
	$breakpoint-1: $cols5;
	$breakpoint-2: $cols7;
	$breakpoint-3: $cols9;

	@mixin breakpoint($point) {
	@if $point == wide {
	@media (min-width: $breakpoint-3) { @content; }
	.oldie & { @content; }
	}
	<!-- source/layouts/layout.html.erb -->
	<ul class="nav-float products">
	<% for cat in data.products.main_categories do %>
	<li>
	<h4>
	<% link_to cat.url do %>
	<%= cat.name %>
	<% end %>
	</h4>
	<ul>
	buildData: function () {
	var newData, data = api.getSongs();

	// Fix paths
	var transformPath = this.transformPath.bind(this);

	newData = data.map(function (row) {
	row.path = transformSongPath(row.path);
	return row;
	});