| /*! Dependent Anchor Include Pattern */ | |
| /* | |
| * Copyright 2011, Scott Jehl (scottjehl.com), Emil Bjorklund (thatemil.com), | |
| * and Aaron Gustafson (aaron-gustafson.com) | |
| * | |
| * Dual licensed under the MIT | |
| * Idea from Scott Gonzalez | |
| * | |
| * to use, place attributes on an already-functional anchor pointing to content | |
| * that should either replace, or insert before or after that anchor |
generator-webapp has support for compass out of the box. However, in order to use one of my favorite features of it — sprites and the image_url helper — you have to make some adjustments to the Gruntfile.
Let's assume you use a SASS stylesheet like this one:
@import "design/*.png"
I've been finding this little meta[name='tmpl'] pattern useful lately when making template-based decisions in JS, such as when loading a particular file or set of files that are needed only on a particular page of a site.
First, in the HTML of a particular template, like say, a search result page:
<head>
...
<meta name="tmpl" content="searchresult">
</head>
| <figure class="quote"> | |
| <blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote> | |
| </figure> |
| (function(){ | |
| $('link[rel="stylesheet"]').each(function(i, elem) { | |
| // Make an anchor tag with the stylesheet's href -- this is a weird/handy way of | |
| // working with URLs in the browser. | |
| var anchorTag = $('a').attr('href', elem.getAttribute('href'))[0]; | |
| // Rewrite the URL to have a cache busting parameter. This assumes | |
| // that any query params weren't significant. | |
| anchorTag.search = "ts=" + (+new Date); | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> | |
| <script src="v2p.js"></script> | |
| <style type="text/css" media="all"> | |
| body { margin: 0; } | |
| div { | |
| background: #fa7098; | |
| } |
| @media (min--moz-device-pixel-ratio: 1.5), | |
| (-o-min-device-pixel-ratio: 3/2), | |
| (-webkit-min-device-pixel-ratio: 1.5), | |
| (min-device-pixel-ratio: 1.5), | |
| (min-resolution: 144dpi), | |
| (min-resolution: 1.5dppx) { | |
| /* Retina rules! */ | |
| } |
| module Sass::Script::Functions | |
| # Wrapper around Ruby's Array#include? method. | |
| # https://gist.github.com/4088394 | |
| # | |
| # value - Value to check for in the list. | |
| # list - List to look through. | |
| # | |
| # Examples | |
| # | |
| # $list: a b c; |
| // Using the Modular Scale plugin along with Compass Vertical Rhythms module. | |
| // The goal is to use MS to give us the values, | |
| // and use VR to apply those values to our typography. | |
| // --------------------------------------------------------------------------- | |
| // Defaults | |
| $base-size: 24px; | |
| $ratio: major-third() fifth(); |
| @mixin mobile_bg($file){ | |
| background-image: image-url('mobile/standard/#{$file}'); | |
| @media screen and (-webkit-min-device-pixel-ratio: 2) { | |
| background-image: image-url('mobile/retina/#{$file}'); | |
| background-size: image-width('mobile/standard/#{$file}') image-height('mobile/standard/#{$file}'); | |
| } | |
| } | |
| // Usage |
