Skip to content

Instantly share code, notes, and snippets.

@briansteeleca
briansteeleca / functions.php
Last active August 29, 2015 14:06
A WordPress shortcode for adding a div wrapper with attributes id and class. You can use this in the Visual Editor so that it can be seen and won't accidentally get stripped out by someone editing the entry. #wordpress #shortcode #wrap
<?php
//* Do NOT include the opening php tag
function bsca_divwrapbegin ( $atts ) {
$a = shortcode_atts(
array(
'id' => '',
'class' => '',
),
$atts );
@briansteeleca
briansteeleca / smooth-scrolling.js
Created September 10, 2014 20:41
Smooth Scrolling #stickynav #onepage #scroll
// http://css-tricks.com/snippets/jquery/smooth-scrolling
// From WordPress: Building a One-Page Style Site with Morten Rand-Hendriksen
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
@briansteeleca
briansteeleca / _mixins.scss
Last active August 29, 2015 14:06
My own mixins #mixins #sass
/* My own mixins
--------------------------------------------- */
/* make columns display at equal heights within a row */
@mixin col-equal-height {
overflow: hidden !important;
.col-equal-height {
margin-bottom: -99999px !important;
padding-bottom: 99999px !important;
}
@briansteeleca
briansteeleca / README
Last active August 29, 2015 14:06
Susy Grid - 2 columns for tablet, 3 columns for laptop #susy #grid
##Example:
`nth-of-type(3n+1)`
In that expression, the number `b` represents the ordinal position of the first element that we want to match, and the number `a` represents the ordinal number of every element we want to match after that. So our example expression `3n+1` will match the first element, and every third element after that.
For IE8 see:
http://stackoverflow.com/questions/8492121/ie8-nth-child-and-before
@briansteeleca
briansteeleca / script.js
Created October 1, 2014 13:40
Pinned menu with smooth scrolling (uses ScrollMagic for pin) #pin #nav #smoothscroll
$(function() {
var topOffset = $('#nav').height();
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
@briansteeleca
briansteeleca / README.md
Last active August 29, 2015 14:07
Generated by SassMeister.com: Susy Grid - 2 columns for tablet, 3 columns for laptop with gutter-position:after #susy #grid #sassmeister

##IMPORTANT: This example uses gutter-position:after

##Example: nth-of-type(an+b) nth-of-type(3n+1)

In that expression, the number b represents the ordinal position of the first element that we want to match, and the number a represents the ordinal number of every element we want to match after that. So our example expression, 3n+1 will match the first element, and every third element after that.

For IE8 see: http://stackoverflow.com/questions/8492121/ie8-nth-child-and-before

@briansteeleca
briansteeleca / README.md
Last active August 29, 2015 14:07
Generated by SassMeister.com: Susy Grid - 2 columns for tablet, 3 columns for laptop with gutter-position:inside #susy #grid #sassmeister

##IMPORTANT: This example uses gutter-position: inside

##Example: nth-of-type(an+b) nth-of-type(3n+1)

In that expression, the number b represents the ordinal position of the first element that we want to match, and the number a represents the ordinal number of every element we want to match after that. So our example expression, 3n+1 will match the first element, and every third element after that.

For IE8 see: http://stackoverflow.com/questions/8492121/ie8-nth-child-and-before

@briansteeleca
briansteeleca / validate.js
Created October 22, 2014 19:15
Accessible form error focus solution with jQuery Validation (from Katie) #jquery #validation #accessibility #errors #katie
// http://stackoverflow.com/questions/1218118/overriding-a-function-within-the-jquery-validation-plugin
$("form#user-register").validate({
// focus will normally go to the last error
// but this will make it go to the first!
invalidHandler: function(form, validator){
$(validator.invalidElements()[0]).focus();
},
focusInvalid:false
});
@briansteeleca
briansteeleca / .htaccess
Last active August 29, 2015 14:13
Handy .htaccess mod_rewrite rules
# This tag ensures the rewrite module is loaded
<IfModule mod_rewrite.c>
# enable the rewrite engine
RewriteEngine On
# Set your root directory
RewriteBase /
# remove the .html extension
RewriteCond %{THE_REQUEST} ^GET\ (.*)\.html\ HTTP
RewriteRule (.*)\.html$ $1 [R=301]
@briansteeleca
briansteeleca / page.list-collections.liquid
Last active March 8, 2018 15:19
Shopify Narrative Theme: Page template for "Feature a subset of collections on a page". https://help.shopify.com/themes/customization/collections/featuring-collections-using-link-lists
<div class="shopify-section">
<div class="list-collections-template" data-section-id="" data-section-type="list-collections-template">
<div class="page-width">
<div class="grid text-center">
<div class="grid__item medium-up--ten-twelfths medium-up--push-one-twelfth">
<header class="section-header text-center">
<h1 class="section-header__title h2">{{ page.title }}</h1>
</header>
<div class="rte">