Skip to content

Instantly share code, notes, and snippets.


Andy Bell hankchizljaw

View GitHub Profile
hankchizljaw / _vertically-align-label.scss
Last active Sep 8, 2021
Adds a pseudo-element to help vertically align text labels in buttons/block-like links without using magic numbers
View _vertically-align-label.scss
/// Adds a pseudo-element to help vertically align
/// text labels in buttons/block-like links without
/// using magic numbers
/// More:
@mixin vertically-align-label() {
&::before {
content: '';
display: inline-block;
vertical-align: middle;
hankchizljaw / helpers.js
Created Nov 30, 2020
Dynamic date in 11ty
View helpers.js
// Put this in _data/helpers.js
module.exports = {
currentYear() {
const today = new Date();
return today.getFullYear();
View _config.scss
* All calculations are based on this. It’s recommended that
* you keep it at 1rem because that is the root font size. You
* can set it to whatever you like and whatever unit you like.
$gorko-base-size: 1rem;
hankchizljaw / media.js
Created Jun 17, 2020
JavaScript Data File Example
View media.js
const fetch = require('node-fetch');
module.exports = async () => {
try {
const res = await fetch(
const {items} = await res.json();
return items;
hankchizljaw / list.txt
Created May 22, 2020
A list of stuff from a tweet
View list.txt
A quick recappermalink
Here’s a list of stuff we have learned over the last 9 lessons:
1. What Eleventy is and how it works
2. How to create a “Hello, world” with Eleventy
3. What Nunjucks is and how it works
4. What Front Matter is and how it works
5. How to copy assets over to your dist folder with Passthrough copy
6. How to create partials with Nunjucks
hankchizljaw / sass-extends.scss
Created May 8, 2020
Sass extends on skip link
View sass-extends.scss
.skip-link {
&:not(:focus) {
@extend .visually-hidden;
hankchizljaw /
Last active May 1, 2020
Eleventy Paginationated Blog Collection
title layout pagination permalink
The Issue 33 Blog
data size
blog{% if pagination.pageNumber > 0 %}/page/{{ pagination.pageNumber }}{% endif %}/index.html
hankchizljaw / auto-collapse.css
Created Apr 29, 2020
Auto collapse with flex and gap
View auto-collapse.css
.auto-collapse {
display: flex;
flex-wrap: wrap;
gap: 1rem;
hankchizljaw / bash.txt
Created Apr 28, 2020
Eleventy in a tweet
View bash.txt
echo 'Hello world' >
npx @11ty/eleventy --serve
hankchizljaw / split-array-into-chunks.js
Created Mar 2, 2020
Split an array into sized chunks
View split-array-into-chunks.js
* Takes an array and splits it into sized chunks
* that are <= the passed chunkSize param
* @param {Array} source Source array
* @param {Number} chunkSize The max size of each chunk
* @returns {Array} A 2d array of chunks
const splitArrayIntoChunks = (source, chunkSize) => {
if (!source.length) {