Skip to content

Instantly share code, notes, and snippets.

View ijy's full-sized avatar

Ian Young ijy

14 followers · 22 following
View GitHub Profile
@ijy
ijy / Compass px to em
Created December 7, 2011 08:18
A Compass function to convert pixel font-sizes to em's
@function em($target, $context: $base-font-size) {
@if $target == 0 { @return 0 }
@return $target / $context + 0em;
}
$base-font-size: 15px;
h1 {
font-size: em(21px, 15px); // Outputs 1.4em
}
@ijy
ijy / twig.php
Created December 29, 2011 12:23 — forked from patcoll/twig.php
Command-line script to process YAML frontmatter with Twig templates.
<?php
/**
* twig.php
*
* Command-line script to process YAML frontmatter with Twig templates.
* Inspired by Mustache <http://github.com/defunkt/mustache>.
*
* Example template file (test.html):
* ---
* people: [ {name: scott}, {name: laura} ]
@ijy
ijy / lunchtogo
Created January 25, 2012 10:52
EE Custom Category URLs with Pagination
{!-- Global Variables --}
{preload_replace:template_group="food-wine"}
{preload_replace:template="lunchtogo"}
{embed="_partials/_head" body_id="lunchtogo"
{if segment_3 == ""} {!-- Lunch Home --}
body_class="l-lunch lunch-home"
{if:elseif segment_3 != "" AND segment_4== ""} {!-- Lunch Category View --}
body_class="l-lunch lunch-cat"
{if:elseif segment_4 != ""} {!-- Lunch Product View --}
@ijy
ijy / gist:2017411
Created March 11, 2012 17:55
Sublime Text 2 - Useful Shortcuts

Sublime Text 2 – Useful Shortcuts (PC)

Loosely ordered with the commands I use most towards the top. Sublime also offer full documentation.

Editing

Ctrl+C copy current line (if no selection)
Ctrl+X cut current line (if no selection)
Ctrl+⇧+K delete line
Ctrl+↩ insert line after
@ijy
ijy / 0_selector_hacks.scss
Created March 28, 2012 15:37 — forked from chriseppstein/0_selector_hacks.scss
This gist demonstrates some uses of the new sass feature: Passing content blocks to mixins.
@mixin ie6 { * html & { @content } }
#logo {
background-image: url("/images/logo.png");
@include ie6 { background-image: url("/images/logo.gif"); }
}
@ijy
ijy / index.html
Created May 21, 2012 09:42
Backbone Todos with jQuery drag & drop
<!DOCTYPE html>
<html>
<head>
<title>Todos</title>
<link href="stylesheets/screen.css" media="all" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="javascripts/json2.js"></script>
<script src="javascripts/underscore.js"></script>
<script src="javascripts/backbone.js"></script>
@ijy
ijy / osx_lion_rail_setup.md
Created July 11, 2012 11:59 — forked from jpantuso/osx_lion_rail_setup.md
Setup OS X 10.7 w/ homebrew, oh-my-zsh, rvm, rails, and MySQL
@ijy
ijy / grunt-1.js
Created August 13, 2012 11:41
grunt.js file used purely for JS concatenation & minification with a watch to automate the process. Includes multiple build targets.
/* global module:false */
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// Project metadata, used by some directives, helpers and tasks.
meta: {
project: '<Project Name>',
author: "<Author>",
url: '<URL>',
@ijy
ijy / susy-baseline.scss
Created September 22, 2012 16:48 — forked from mirisuzanne/susy-baseline.scss
Show susy grid and basline on the same element
@include show-susy-with-baseline($baseline: rhythm(1)) {
@include grid-background($total-columns, column(), gutter(), $baseline, 0%);
@include background-size(100% $baseline, auto);
@include background-origin(border-box, content-box);
@include background-clip(border-box, content-box);
}
@ijy
ijy / 01-variable-respond-to-mixin.md
Created September 22, 2012 17:10 — forked from Snugug/01-variable-respond-to-mixin.md
Variable-driven respond-to mixin

What if controlling your media queries was as easy as adding on to a Sass list? What if I told you it now is?

This snippet comes from a modified version of mixins in the Aura Responsive Framework and came from me hijacking the respond-to mixin namespace but still wanting to use it for custom media queries. It's a little ugly and requires Sass 3.2+ (for now, (sudo) gem install sass --pre), but it works a charm.

There are two fairly mundane caveats to this method. First, every media query needs to be named. Second, every media query needs a size and assumes min-width and screen. If you want to change min-width, simply add your operator as another option, but if you want to change screen, you need to also include your operator even if you want it to be min-width.

Also, I haven't built in warnings yet for when you do bad things, so bear that in mind.

Without further adue, tada.