Skip to content

Instantly share code, notes, and snippets.

View liamfiddler's full-sized avatar

Liam liamfiddler

17 followers · 2 following
View GitHub Profile
@liamfiddler
liamfiddler / style.11ty.js
Last active August 29, 2023 23:04
SCSS + PostCSS pipeline for 11ty
// sass dependencies: `npm i -D sass`
const util = require('util');
const sass = require('sass');
const renderSass = util.promisify(sass.render);
// postcss dependencies: `npm i -D autoprefixer postcss precss`
const autoprefixer = require('autoprefixer');
const postcss = require('postcss');
const precss = require('precss');
const postcssProcessor = postcss([precss, autoprefixer]);
@liamfiddler
liamfiddler / style.11ty.js
Last active April 7, 2022 20:24
Simple SCSS pipeline for 11ty
const util = require('util');
const sass = require('sass'); // `npm i -D sass`
const renderSass = util.promisify(sass.render);
const inputFile = '_includes/style.scss'; // the path to your main SCSS file
const outputFile = 'style.css'; // the filename you want this template to be saved as
module.exports = class {
data() {
return {
permalink: outputFile,
@liamfiddler
liamfiddler / my-listfilter.html
Created September 29, 2016 01:24
Creating a Web Component with Polymer - Part 1 - 05 Observer
<link rel="import" href="../polymer/polymer.html">
<!--
`my-listfilter`
A filterable list component
@demo demo/index.html
-->
<dom-module id="my-listfilter">
<template>
<style>
@liamfiddler
liamfiddler / my-listfilter.html
Created September 29, 2016 01:21
Creating a Web Component with Polymer - Part 1 - 04 Function
<link rel="import" href="../polymer/polymer.html">
<!--
`my-listfilter`
A filterable list component
@demo demo/index.html
-->
<dom-module id="my-listfilter">
<template>
<style>
@liamfiddler
liamfiddler / my-listfilter.html
Created September 29, 2016 01:18
Creating a Web Component with Polymer - Part 1 - 03 List
<link rel="import" href="../polymer/polymer.html">
<!--
`my-listfilter`
A filterable list component
@demo demo/index.html
-->
<dom-module id="my-listfilter">
<template>
<style>
@liamfiddler
liamfiddler / my-listfilter.html
Last active September 29, 2016 01:17
Creating a Web Component with Polymer - Part 1 - 02 Input
<link rel="import" href="../polymer/polymer.html">
<!--
`my-listfilter`
A filterable list component
@demo demo/index.html
-->
<dom-module id="my-listfilter">
<template>
<style>
@liamfiddler
liamfiddler / my-listfilter.html
Last active September 29, 2016 01:16
Creating a Web Component with Polymer - Part 1 - 01 Skeleton
<link rel="import" href="../polymer/polymer.html">
<!--
`my-listfilter`
A filterable list component
@demo demo/index.html
-->
<dom-module id="my-listfilter">
<template>
<style>
@liamfiddler
liamfiddler / 01-skeleton.html
Created September 9, 2016 05:47
Creating a Web Component with Polymer
<link rel="import" href="../polymer/polymer.html">
<!--
`my-listfilter`
A filterable list component
@demo demo/index.html
-->
<dom-module id="my-listfilter">
<template>
<style>