Skip to content

Instantly share code, notes, and snippets.

View magician11's full-sized avatar

A magician11

  • Golightly+
  • New Zealand
View GitHub Profile
@magician11
magician11 / flyin.scss
Created May 16, 2015 21:30
CSS3 flyIn demo
.profile-pic-transition.ng-hide-remove.ng-hide-remove-active {
@include vendor-prefixes(animation, 'flyIn 3s');
}
@include keyframes(flyIn) {
0% {
opacity: 0;
@include vendor-prefixes(transform, 'scale(0, 0)');
}
@magician11
magician11 / gulpfile.js
Last active August 29, 2015 14:21
Basic setup for Gulp with Sass, Bourbon, JSHint and a local webserver
// get gulp and the plugins we need for it
var gulp = require('gulp');
var scss = require('gulp-sass');
var bourbon = require('node-bourbon').includePaths;
var webserver = require('gulp-webserver');
var jshint = require('gulp-jshint');
// setup our Sass compilation task
gulp.task('scss', function() {
return gulp.src('styles/ag.scss')
@magician11
magician11 / bourbon-flyin.scss
Created May 16, 2015 23:34
Creating flyIn animation using mixins from Bourbon
@import "bourbon";
.profile-pic-transition.ng-hide-remove.ng-hide-remove-active {
@include animation(flyIn 3s);
}
@include keyframes(flyIn) {
0% {
opacity: 0;
@magician11
magician11 / package.json
Created May 21, 2015 00:18
package.json for Andrew Golightly's landing page
{
"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 August 29, 2015 14:21
Using Autoprefixer with Gulp
var autoprefix = require('gulp-autoprefixer');
gulp.task('scss', function() {
return gulp.src(appFiles.scss)
.pipe(scss({
errLogToConsole: true
}))
.pipe(autoprefix())
.pipe(minifyCSS())
@magician11
magician11 / WordPressFeedFactory.js
Last active August 29, 2015 14:22
An AngularJS factory to fetch WordPress feeds
(function() {
"use strict";
var agApp = angular.module('agApp');
agApp.factory('WordPressFeed', function($http) {
function getLatestPosts(wpWebsite, numPosts, callback) {
@magician11
magician11 / someController.js
Created June 8, 2015 23:17
Using the WordPressFeedFactory
(function() {
"use strict";
var agApp = angular.module('agApp');
agApp.controller('MainCtrl', function(WordPressFeed) {
var vm = this;
@magician11
magician11 / wpArticleView.html
Created June 8, 2015 23:20
Iterating over WordPress articles in AngularJS
<!-- 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 / reorder-button.html
Last active August 31, 2023 06:12
How to create a reorder button in Shopify's Liquid
{% 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>
{% endfor %}
@magician11
magician11 / shopify-article-sort.html
Created August 21, 2015 11:02
How to alphabetically sort Shopify articles
<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>