Skip to content

Instantly share code, notes, and snippets.

Avatar

Andy Bell hankchizljaw

View GitHub Profile
@hankchizljaw
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 https://ishadeed.com/article/button-label-alignment/
View _vertically-align-label.scss
/// VERTICALLY ALIGN LABEL
/// Adds a pseudo-element to help vertically align
/// text labels in buttons/block-like links without
/// using magic numbers
/// More: https://ishadeed.com/article/button-label-alignment/
@mixin vertically-align-label() {
&::before {
content: '';
display: inline-block;
vertical-align: middle;
@hankchizljaw
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
/**
* BASE SIZE
* 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;
/**
* SIZE SCALE
@hankchizljaw
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(
'https://11ty-from-scratch-content-feeds.piccalil.li/media.json'
);
const {items} = await res.json();
return items;
@hankchizljaw
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
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
hankchizljaw / blog.md
Last active May 1, 2020
Eleventy Paginationated Blog Collection
View blog.md
title layout pagination permalink
The Issue 33 Blog
layouts/feed.html
data size
collections.blog
5
blog{% if pagination.pageNumber > 0 %}/page/{{ pagination.pageNumber }}{% endif %}/index.html
@hankchizljaw
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
hankchizljaw / bash.txt
Created Apr 28, 2020
Eleventy in a tweet
View bash.txt
echo 'Hello world' > index.md
npx @11ty/eleventy --serve
@hankchizljaw
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) {