chriseppstein

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

// Transform a value into rem
// Assuming baseline is set to 10px on :root/html
@function rem($value, $baseline: 10px) {
    @if type-of($value) == list {
        $result: ();

olafk

Liferay.on('initLayout', function(event) {
  Liferay.once(function() {
    Liferay.Layout.on([ 'drag:end', 'drag:start' ], function(event) {
      console.log('event type', event.type, event);
      AUI().one("#main-content").toggleClass('dragging', event.type == 'drag:start');
    });
  }, Liferay.Layout, 'bindDragDropListeners');
});

joshmatz

/**
 * Supports lists as a parameter for use when you want to select multiple media queries.
 * @include respond-to(palm, phablet, lap) { .sub-nav { display: none; }}
 */

@mixin respond-to($media...) {
	$response-count: 0;
	$query: '';

	@each $medium in $media {

jareware

⇐ back to the gist-blog at jrw.fi

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

trek

https://twitter.com/dagda1/status/231016636847648769
https://twitter.com/garybernhardt/status/227881347346219008/
http://ianstormtaylor.com/rendering-views-in-backbonejs-isnt-always-simple/

backbone: what you'd normally use jquery plugins for, but with an inverted rendering process (js -> DOM instead of DOM -> js)
"islands of richness", jquery data callbacks main pattern.

other frameworks are building out from jQuery's central pattern of DOM selection and event callbacks.
fantastic pattern for adding behavior to documents, but we aren't writing documents.

chriscoyier

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),

christianhanvey

Snippet: 		[[SnippetName]]
Chunk: 			[[$ChunkName]]
System Setting: 	[[++SettingName]]
TV: 			[[*fieldName/TvName]]
Link tag:		[[~PageId? &paramName=`value`]]
Placeholder:		[[+PlaceholderName]]


<?php

natecavanaugh

//replace LINK_ID

//Add this to your theme vm
<div id="LINK_ID">
	<a href="javascript:;" data-customCssClass="red">Red</a>
	<a href="javascript:;" data-customCssClass="blue">Blue</a>
	<a href="javascript:;" data-customCssClass="green">Green</a>
</div>

//Add this to your JS somewhere

scottjehl

/*
  * anchor-include pattern for already-functional links that work as a client-side include
  * Copyright 2011, Scott Jehl, scottjehl.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
    * after the page has loaded
    * Replace:	<a href="..." data-replace="articles/latest/fragment">Latest Articles</a>
    * Before:	<a href="..." data-before="articles/latest/fragment">Latest Articles</a>