Sample snippets from UIUX Seattle

anything_slider_reference.html

<link rel="stylesheet" type="text/css" href="http://s3.amazonaws.com/classcdn/slider/css/anythingslider.css"/>
<script src="http://s3.amazonaws.com/classcdn/slider/js/jquery.anythingslider.min.js"></script>

anythingslider.xsl

<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt ddwrt2 __designer asp SharePoint d x" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">

<!-- This XSL Stylesheet created by SharePoint Experts, Inc.    -->
<!-- http://sharepointexperience.com                            -->

    <xsl:output method="html" indent="yes"/>

    <!-- This template is the "wrapper" or "container" for the custom view. -->
    <xsl:template match="/">
        <!-- This is the actual wrapper element that will be emitted -->
        <ul id="slider">
            <!-- This will tell the data view to look for the actual content
                 and come back when it's done. -->
            <xsl:apply-templates/>
        </ul>
        <!-- end wrapper --> 

        <style>
            /* New in version 1.7+ */
             #slider {
              width: 500px;
              height: 400px;
              list-style: none;
             }
             /* images with caption */
             #slider img {
              width: 100%;
              height: 100%;
             }
             /* position the panels so the captions appear correctly */
             #slider .panel { position: relative; }
             /* captions */
             #slider .caption-top, #slider .caption-right,
             #slider .caption-bottom, #slider .caption-left {
              background: #000;
              color: #fff;
              padding: 10px;
              margin: 0;
              position: relative;
              z-index: 10;
              opacity: .8;
              filter: alpha(opacity=80);
             }
             /* Top caption - padding is included in the width (480px here, 500px in the script), same for height */
             #slider .caption-top {
              left: 0;
              top: 0;
              width: 480px;
              height: 30px;
             }
             /* Right caption - padding is included in the width (130px here, 150px in the script), same for height */
             #slider .caption-right {
              right: 0;
              bottom: 0;
              width: 130px;
              height: 180px;
             }
             /* Bottom caption - padding is included in the width (480px here, 500px in the script), same for height */
             #slider .caption-bottom {
              left: 0;
              bottom: 0;
              width: 480px;
              height: 30px;
             }
             /* Left caption - padding is included in the width (130px here, 150px in the script), same for height */
             #slider .caption-left {
              left: 0;
              bottom: 0;
              width: 130px;
              height: 180px;
             }
             /* Caption close button */
             .caption-top .close, .caption-right .close,
             .caption-bottom .close, .caption-left .close {
              font-size: 80%;
              cursor: pointer;
              float: right;
              display: inline-block;
             }
        </style>
        <script type="text/javascript">
            $('#slider').anythingSlider({
                autoPlay: true
            });
        </script>
    </xsl:template>

    <xsl:template match="/dsQueryResponse/Rows/Row">
        <!-- This markup is used for each item in the list -->
        <li>
            <div class="caption-top">
        		<xsl:value-of select="@Title"/>
        	</div>
        	<img src="{@FeaturedImage}" alt="{@FeaturedImage.desc}"/>
        </li>
    </xsl:template>

</xsl:stylesheet>

externalwarning.js

$('a[href^=http]')
    .attr('target','_blank')
    .on(
        'click',
        function() {
            return confirm('This link leaves. DANGER!!!!');
        }
    );

quicklaunch.css

.ql-opened:before {
 background: url("http://sp.sharepointexperience.com/_layouts/images/minus.gif") top left no-repeat;
}
.ql-closed:before {
 background: url("http://sp.sharepointexperience.com/_layouts/images/plus.gif") top left no-repeat;
}

.ql-closed:before, .ql-opened:before {
  content: ' ';
  float: left;
  display: block;
  height: 9px;
  width: 9px;
  padding-right: 3px;
}

.s4-ql ul.root > li > .menu-item.ql-closed:hover, .s4-ql ul.root > li > .menu-item.ql-opened:hover {
 text-decoration: none; 
  color: red;
}

quicklaunch.js

$('.s4-ql ul.root > li > .menu-item')
	.on(
		'click',
		function(e) {
			$(this)
				.toggleClass('ql-opened ql-closed')
				.next()
				.slideToggle();
			e.preventDefault();
		}
	).addClass('ql-opened');