Skip to content

Instantly share code, notes, and snippets.

Andrew Golightly magician11

View GitHub Profile
@magician11
magician11 / keyframes.scss
Created May 16, 2015
Keyframes for all vendor prefixes using SCSS
View keyframes.scss
/* Usage
@include keyframes(my-transition) {
from {opacity: 0;}
to {opacity: 1;}
}
*/
@mixin keyframes($animation-name) {
@-webkit-keyframes #{$animation-name} {
@magician11
magician11 / vendor-prefixes.scss
Created May 16, 2015
Mixin for vendor prefixes using SCSS
View vendor-prefixes.scss
/* Usage:
@include vendor-prefixes(transform, 'scale(0, 0)');
*/
@mixin vendor-prefixes($property, $values) {
-webkit-#{$property}: #{$values};
-moz-#{$property}: #{$values};
-ms-#{$property}: #{$values};
@magician11
magician11 / package.json
Created May 21, 2015
package.json for Andrew Golightly's landing page
View package.json
{
"name": "andrew-golightly",
"version": "0.1.3",
"author": "Andrew Golightly <support@andrewgolightly.com>",
"description": "Andrew Golightly's landingpage",
"homepage": "http://www.andrewgolightly.com",
"repository": {
"type": "git",
"url": "git://github.com/magician11/ag-landingpage.git"
},
@magician11
magician11 / gulpfile
Last active Aug 29, 2015
Using Autoprefixer with Gulp
View gulpfile
var autoprefix = require('gulp-autoprefixer');
gulp.task('scss', function() {
return gulp.src(appFiles.scss)
.pipe(scss({
errLogToConsole: true
}))
.pipe(autoprefix())
.pipe(minifyCSS())
@magician11
magician11 / someController.js
Created Jun 8, 2015
Using the WordPressFeedFactory
View someController.js
(function() {
"use strict";
var agApp = angular.module('agApp');
agApp.controller('MainCtrl', function(WordPressFeed) {
var vm = this;
@magician11
magician11 / wpArticleView.html
Created Jun 8, 2015
Iterating over WordPress articles in AngularJS
View wpArticleView.html
<!-- Recent articles (using Zurb's Foundation framework) -->
<section class="row">
<h3 class="ag-section-heading"><i class="fa fa-pencil"></i> Recent articles</h3>
<ul class="medium-block-grid-3">
<li ng-repeat="wpArticle in ag.wpFeed">
<h4>{{wpArticle.title}}</h4>
<p>{{wpArticle.contentSnippet}} <a ng-href="{{wpArticle.link}}">read more</a></p>
</li>
@magician11
magician11 / WordPressFeedFactory.js
Last active Aug 29, 2015
An AngularJS factory to fetch WordPress feeds
View WordPressFeedFactory.js
(function() {
"use strict";
var agApp = angular.module('agApp');
agApp.factory('WordPressFeed', function($http) {
function getLatestPosts(wpWebsite, numPosts, callback) {
@magician11
magician11 / reorder-button.html
Last active Aug 29, 2015
How to create a reorder button in Shopify's Liquid
View reorder-button.html
{% for order in customer.orders %}
{% assign reorder_url = "" %}
{% for line_item in order.line_items %}
{% capture reorder_url %}{{ reorder_url | append: line_item.variant_id | append: ':' | append: line_item.quantity | append: ',' }}{% endcapture %}
{% endfor %}
<a href="{{ '/cart/' | append: reorder_url }}" class="button tiny">reorder</a></td>
{% endfor %}
@magician11
magician11 / shopify-article-sort.html
Created Aug 21, 2015
How to alphabetically sort Shopify articles
View shopify-article-sort.html
<ul id="artists" class="medium-block-grid-4">
{% for artist in blog.articles %}
{% capture artist-name %}{{ artist.title | downcase }}{% endcapture %}
<li class="{{artist-name}}">
<a href="{{ artist.url }}">
<div class="artist-excerpt">{{ artist.excerpt }}</div>
<div class="artist-name">{{ artist.title }}</div>
<div class="country">{{ artist.metafields.global.country }}</div>
</a>
</li>
@magician11
magician11 / fallback-image.html
Created Sep 1, 2015
How to set a fallback image for a slider
View fallback-image.html
<section class="slider">
<img src="andrew-and-artist.jpg" onerror='this.src="./andrew-and-artist.jpg"' />
<nav class="slider-nav">
<ul>
<li class="arrow">
<a href="#"><i class="fa fa-long-arrow-left"></i></a>
</li>
<li class="arrow">
<a href="#"><i class="fa fa-long-arrow-right"></i></a>
</li>
You can’t perform that action at this time.