Skip to content

Instantly share code, notes, and snippets.

View jameswquinn's full-sized avatar

jameswquinn

5 followers · 13 following
  • london
View GitHub Profile
@jameswquinn
jameswquinn / index.html
Created November 12, 2017 17:49
Siema - slide multiple slides on next() and prev()
<div class="siema">
<div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
<div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
<div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
<div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
<div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
<div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
<div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
<div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
</div>
@jameswquinn
jameswquinn / index.html
Created November 13, 2017 01:06
Instafeed.js - Instagram user feed example with load more button
<div id="instafeed-gallery-feed" class="gallery row no-gutter">
<!-- instagram feed will load here - markup below was used to structure images before loading them through instafeed -->
<!-- <div class="col-xs-12 col-sm-4">
<a href="{{image}}" data-caption="{{model.user.username}}, {{likes}} likes">
<div class="img-featured-container">
<div class="img-backdrop"></div>
<div class="description-container">
<p>{{caption}}</p>
@jameswquinn
jameswquinn / index.html
Created November 13, 2017 17:11
Siema - add pagination to prototype
<div class="siema">
<div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
<div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
<div><img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" /></div>
<div><img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" /></div>
</div>
@jameswquinn
jameswquinn / index.html
Created November 14, 2017 19:09
Yet Another Menu Animation
<html>
<body>
<div class="nav-trigger">
<span class="line-one"></span>
<span class="line-two"></span>
<span class="line-three"></span>
</div>
<p>Yet Another Menu Animation</p>
</body>
@jameswquinn
jameswquinn / index.html
Created November 14, 2017 20:15
Siema #73
<div class="siema">
<img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" />
<img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" />
<img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" />
<img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" />
</div>
@jameswquinn
jameswquinn / grid-by-example-12-no-clearing-required.markdown
Created November 18, 2017 19:17
Grid by Example 12: No clearing required
@jameswquinn
jameswquinn / hide-header-on-scroll-down-show-on-scroll-up.markdown
Last active November 19, 2017 17:55
Hide header on scroll down, show on scroll up
@jameswquinn
jameswquinn / golden-ratio-layout-using-css-grids.markdown
Created December 18, 2017 10:31
Golden Ratio Layout using CSS Grids

Golden Ratio Layout using CSS Grids

A golden ration layout using CSS Grids, variables, vw units, calc, flexbox, hyphenation and Sass.

A Pen by Dudley Storey on CodePen.

License.

@jameswquinn
jameswquinn / gulp-pdf-snippet.js
Created January 4, 2018 22:03
gulp recipe for html to pdf including icon font and images in base 64
var pdf = require('gulp-html-pdf');
var replace = require('gulp-replace');
var inlineimg = require('gulp-inline-image-html');
var cssfont64 = require('gulp-cssfont64');
gulp.task('pdf',['font64'], function () {
return gulp.src('HTML/Pages/*.html')
.pipe(replace(/<link\b.+href="(?!http)([^"]*)".*>/g, function(s, filename) {
var filepath = path.relative(__dirname , path.resolve(__dirname + '/HTML/css', filename))
var style = fs.readFileSync(filepath, 'utf8');
@jameswquinn
jameswquinn / ripple.js
Created February 4, 2018 16:36 — forked from MattHsiung/ripple.js
Ripple Button
/**
* Created by matt on 3/8/17.
*/
import React, { PropTypes } from 'react';
import './button.scss';
function ripple (e) {
const midX = e.offsetX;
const midY = e.offsetY;
const { width, height } = e.target.getBoundingClientRect();