Skip to content

Instantly share code, notes, and snippets.


Stewart Knapman stewartknapman

View GitHub Profile
View split_page.liquid
{% comment Note:
Takes a block of content, separates out the images from the text and then wraps
them in markup so that they can be displayed in columns side by side.
We split the content on tags and spaces then scan through it all looking for the things we want.
Why?! Because reasons!
%}{% endcomment %}
View browserify_uglifyify_gulp.js
gulp.task('browserify', function () {
return browserify('./src/js/app.js', {
debug: true, // with source maps
transform: ['brfs', 'uglifyify'] // include file system and uglify before bundle
.pipe(source('app.js')) // Pass desired output filename to vinyl-source-stream
.pipe(gulp.dest('./assets/js/')); // Start piping stream to tasks!
View shut_it_down.liquid
{% comment note:
We do not want certain products to be available as a standard product with the standard template so SHUT IT DOWN!
If the product has been given the 'bundle-only' template as its default then find its appropriate (or first) bundle collection
and redirect the user to go to there.
%}{% endcomment %}
{% assign redirect_url = false %}
{% assign bundle_templates = 'sixpack,bundles,planbuilder' | split: ',' %}
stewartknapman / number_to_letter.rb
Last active Dec 16, 2015
Turn a number into a letter. Useful for formatting the numbering for alpha lists. Uses Words notation so when it reaches z it will continue aa, bb, cc, etc.
View number_to_letter.rb
def number_to_letter(n=1)
nums = *'a'..'z'
nums[(n % 26) - 1] * ((n-1) / 26 + 1)
# Smart ass one line edition by @krolaw
# Doesn't use an array
def number_to_letter_revised(n=1)
('a'.ord+((n-1) % 26)).chr * ((n-1) / 26 + 1)
stewartknapman / PMCollapse.js
Last active Dec 22, 2015
jQuery plugin for expanding and collapsing an element
View PMCollapse.js
PM Collapse
Expand and collapse a target element but still show the first line of elements child content when its collapsed.
basic example:
<div class="example1">
<a href="#" data-collapse="example-1-target" class="collapse-action">Expand / Collapse</a>
<div id="example-1-target">
stewartknapman / jQuery.wordSearch.js
Last active Dec 23, 2015
jQuery plugin that searches for a given word or phrase inside a container element and wraps it in some markup.
View jQuery.wordSearch.js
$.fn.textNodes = function(){
return this.find(":not(iframe)").addBack().contents().filter(function(){
return this.nodeType === 3;
/* wordSearch jQuery plugin */
$.fn.wordSearch = function(searchTerm, options){
stewartknapman / _end_row.liquid
Created Nov 21, 2013
Shopify Liquid template that wraps looped items in a row on every third or fourth iteration.
View _end_row.liquid
{% assign thumbs_per_row = settings.thumbnails-per-row | times:1 %}
{% if forloop.length > thumbs_per_row %}
{% assign mod = forloop.index | modulo:thumbs_per_row %}
{% if mod == 0 %}</div><div class="row">{% endif %}
{% endif %}
stewartknapman / checkout.scss
Last active Jan 4, 2016
Pull web fonts into Shopify's checkout from the theme settings, through a sass file located outside the theme directory. Why? ... because its cool.
View checkout.scss
* Checkout.scss sits outside the Shopify theme folder so that we can pull in Boostrap and our checkout reset via scss imports.
* This will be compiled into checkout.css.liquid and saved in our theme assets folder.
* As this will be compiled into liquid we need to escape our liquid tags to prevent our compiler having a meltdown.
* You need to do this across two files otherwise you'll end up with an empty import rule at the top of your checkout.css.liquid
// import the compiled font_import.css.liquid from our assets folder.
// note the escaped liquid.
View Squarespace_Bedford_responsiveBanners.css
Responsive Banners and Homepage Carousel for Squarespaces Bedford Theme
The sizes are based on banners that are 2048px x 420px with a 1024px x 420px safe zone (won't be cut off on small screens)
To make a homepage carousel:
stewartknapman / swipe-events.js
Created May 24, 2016
Swipe events with `onswipe[Direction]` handlers on elements
View swipe-events.js
// To use add an `onswipeLeft`, `onswipeRight`, `onswipeUp` or `onswipeDown` function on any dom element
// i.e. document.querySelector('.my-ele').onswipeLeft = function () { ... };
module.exports = function (threshold) {
var Swipe = function () {
this.threshold = threshold || 5;
this.xDown = null;
this.yDown = null;