Skip to content

Instantly share code, notes, and snippets.

💭
I may be slow to respond.

Chris Boakes chrisboakes

💭
I may be slow to respond.
Block or report user

Report or block chrisboakes

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@chrisboakes
chrisboakes / atomic-css.md
Last active May 14, 2019
A new approach to our CSS
View atomic-css.md

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
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 <https://www.instagram.com/developer/authentication/>
* @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
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
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';
You can’t perform that action at this time.