Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@jacobarriola
jacobarriola / Hamburger menu demo
Last active August 29, 2015 14:07
A Pen by Jacob Arriola.
BuHFl
-----
A [Pen](http://codepen.io/jacobarriola/pen/BuHFl) by [Jacob Arriola](http://codepen.io/jacobarriola) on [CodePen](http://codepen.io/).
[License](http://codepen.io/jacobarriola/pen/BuHFl/license).
@jacobarriola
jacobarriola / Child theme php snippet
Created November 7, 2014 21:20
Snippet for loading parent stylesheet in WordPress when creating child theme. Sits in functions.php of child directory.
<?php
// Load parent style sheet
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
@jacobarriola
jacobarriola / SassMeister-input.scss
Created April 8, 2015 19:12
Generated by SassMeister.com.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
@mixin breakpoint( $breakpoint, $size: min ) {
@media only screen and (#{$size}-width : $breakpoint) {
@content;
}
}
@jacobarriola
jacobarriola / SassMeister-input.scss
Created August 31, 2015 23:46
Generated by SassMeister.com.
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
@mixin bgimage($name,$ext:png) {
$url:"../../images/#{$name}.#{$ext}";
background: url($url);
}
@jacobarriola
jacobarriola / SassMeister-input-HTML.html
Created September 4, 2015 20:44
Generated by SassMeister.com.
<section class="tier1-event">
This is content
</section>
<section class="tier1-event">
This is content
</section>
<section class="tier1-event">
This is content
</section>
<p>I'm text</p>
@jacobarriola
jacobarriola / SassMeister-input.scss
Created September 4, 2015 20:46
Generated by SassMeister.com.
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
.property-transactions {
padding: rem-calc(10) 30px/2;
&__item {
display: flex;
@jacobarriola
jacobarriola / gist:622831bbd3fe90394412
Created September 15, 2015 14:08
Gulp file using sourcemaps
gulp.task('styles', function() {
gulp.src('assets/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'compressed'
})
.on('error', notify.onError(function(error) {
return "Error: " + error.message;
}))
)
@jacobarriola
jacobarriola / gist:076803c0c99db1d41b81216c0fc0e87c
Created June 13, 2016 14:32
Facebook Instant Articles custom transform rules
{
"rules" :
[
{
"class": "HeaderSubTitleRule",
"selector" : "header .subheadline"
},
{
"class": "SocialEmbedRule",
"selector" : ".entry-media figure iframe",
<html>
<head>
<link rel="canonical" href="http://freebeacon.com/politics/cuomo-american-people-find-clintons-answers-war-terror-unsatisfying/"/>
<meta charset="utf-8"/>
<meta property="op:generator" content="facebook-instant-articles-sdk-php"/>
<meta property="op:generator:version" content="1.1.0"/>
<meta property="op:generator:application" content="facebook-instant-articles-wp"/>
<meta property="op:generator:application:version" content="2.11"/>
<meta property="op:generator:transformer" content="facebook-instant-articles-sdk-php"/>
<meta property="op:generator:transformer:version" content="1.1.0"/>
@jacobarriola
jacobarriola / markup.html
Created October 31, 2016 15:49
Blurry to awesome images
<figure class="placeholder" data-large="{path to large image}">
<img src="{path to small image}" class="img-small loaded" alt="{alt}" /> <!-- small image about 50px wide and height to match ratio; keep to less than 3k -->
<div style="padding-bottom: {image ratio}%;"></div> <!-- ratio is height-in-px/width-in-px * 100 -->
</figure>