Skip to content

Instantly share code, notes, and snippets.

@lstanard
lstanard / SASS-BEM style guide
Last active August 29, 2015 13:57
SASS-BEM style guide
/*------------------------------------------------------------------
SASS/BEM STYLE GUIDE (NOT IMPORTED)
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
Main section/element class name a.k.a. a "module"
-------------------------------------------------------------------*/
.primary-element {
// SASS @extend
@lstanard
lstanard / SASS-CodeKit project structure
Created April 1, 2014 13:59
SASS-CodeKit project structure
/*------------------------------------------------------------------
SASS/CODEKIT PROJECT STRUCTURE
--------------------------------------------------------------------
index.html
css.css
/images/
/js/
@lstanard
lstanard / SASS Mixin - Respond
Created April 6, 2014 16:44
SASS mixin for min/max media queries
$break-xs: 480px;
$break-sm: 768px;
$break-md: 992px;
$break-lg: 1200px;
@mixin respond($media, $type: "max") {
@if $media == "xs" {
@media ($type+"-width": $break-xs) {
@content;
}
@lstanard
lstanard / CSS3 Keyframe Animation Template
Created May 20, 2014 13:12
CSS3 keyframe animation template (with vendor prefixes)
$animation-speed: 1.2s;
$animation-name: pulsate;
$animation-ease: ease-out;
-webkit-animation: $animation-name $animation-speed $animation-ease infinite;
-moz-animation: $animation-name $animation-speed $animation-ease infinite;
-o-animation: $animation-name $animation-speed $animation-ease infinite;
animation: $animation-name $animation-speed $animation-ease infinite;
$scale-lrg: 1;
sub, sup {
/* Specified in % so that the sup/sup is the
right size relative to the surrounding text */
font-size: 75%;
/* Zero out the line-height so that it doesn't
interfere with the positioning that follows */
line-height: 0;
/* Where the magic happens: makes all browsers position
@lstanard
lstanard / SassMeister-input.scss
Created January 16, 2015 16:48
Generated by SassMeister.com.
// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----
@mixin respond($media, $type: "min") {
@if $media == "xs" {
@media ($type+"-width": $break-xs) {
@content;
}
@lstanard
lstanard / WordPress: Image path
Last active October 14, 2015 14:42
WordPress: Image from homeurl path
<img src="<?php echo get_template_directory_uri(); ?>/images/image.png" class=" " alt=" ">
@lstanard
lstanard / PHP: Pretty debug output
Created November 1, 2015 18:26
PHP readable debug output
echo "<pre>";
print_r($master_feed);
echo "</pre>";
@lstanard
lstanard / WordPress: Featured Image URL
Created December 10, 2015 18:01
WordPress get featured image URL
@lstanard
lstanard / JS: WordPress select menu filtering
Last active March 1, 2016 21:47
JavaScript select menu on change for WordPress post filtering
$('select[name="post_date"]').on('change', function() {
var postDate = this.options[this.selectedIndex].value,
dateRE = /\d{4}[-]\d{1,2}|\d{4}/g,
prevDate = dateRE.exec(url);
// Drop pagination when changing the post_date filter value
if (url.indexOf('page/') > 0)
url = url.split('page/')[0];