Skip to content

Instantly share code, notes, and snippets.


Chris Boakes chrisboakes

View GitHub Profile

Oh My Zsh

My favourite iTerm2 profile configured to perfection

💾 Install Oh My Zsh

Follow the basic installation:

sh -c "$(curl -fsSL"
View colours.itermcolors
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "">
<plist version="1.0">
<key>Ansi 0 Color</key>
<key>Alpha Component</key>
<key>Blue Component</key>
chrisboakes /
Last active May 14, 2019
A new approach to our CSS

Atomic CSS

There are many different variations to 'Atomic' CSS. While we could consider the programmatic approach, it's not good for readablity (e.g. Pos(a) Bgc(brandColor) W(columnWidth) H(90px)).

I suggest the following approach because of its readability and scalablity:

  1. Atoms
  2. Molecules
  3. Organisms
  4. Templates
chrisboakes / instagram-feed.js
Last active Oct 4, 2018
A very basic example of retrieving a feed of Instagram posts and appending it to a DOM Element
View instagram-feed.js
* A very basic example of retrieving a feed of Instagram posts and appending it to a container
* @param {String} accessToken - Access token from Instagram <>
* @param {String} containerSelector - The id or classs of the DOM Element we're append our feed into
* @param {String} rootClass - The class we'll use for each Instagram DOM Element
* @param {String} totalImages - How many images we're fetching from the API
* @version 0.1
* @author Chris Boakes
export default class InstagramFeed {
chrisboakes / cookie-consent-bar.js
Last active May 23, 2018
Basic Cookie Consent Bar
View cookie-consent-bar.js
View custom-google-map.js
/* global google */
* Custom Google Maps class with custom colours
* @param String container - the selector for the map to appear in
* @param Object center - the lat/lng of the center of the map
* @param INT zoom - how zoomed in do we want the map to be
* @param Object markerLocation - the lat/lng of the marker
* @param String markerSVG - optimised SVG of marker
* @param INT markerSVGWidth - the height of our custom marker
* @param INT markerSVGHeight - the height of our custom marker
chrisboakes / object-fit-polyfill.js
Last active Jan 24, 2018
Polyfill for browsers that do not support 'object-fit'
View object-fit-polyfill.js
* Polyfill for browsers that do not support 'object-fit'
* Replaces any image with a 'data-object-fit' attribute with a div with a background-image
* @author Chris Boakes & Gemma Black
export class ObjectFitPolyfill {
constructor() {
this.dataSelector = '[data-object-fit]';
this.backgroundSize = 'cover';
this.cssClass = 'u-fill-image';