Skip to content

Instantly share code, notes, and snippets.

@robweychert
robweychert / ap-style-month-strftime-liquid.md
Last active Feb 18, 2020
AP style month abbreviations with strftime in Liquid
View ap-style-month-strftime-liquid.md

AP style month abbreviations with strftime in Liquid

AP style is particular about how dates are formatted in various circumstances. strftime uses %b for month abbreviations, but its format (the first three letters of the month: Jan, Feb, etc) differs from AP style’s preferred abbreviations for some months. This Liquid snippet converts strftime’s month abbreviations to AP style:

{{ object | date: '%b. %e, %Y' | replace: 'Mar.', 'March' | replace: 'Apr.', 'April' | replace: 'May.', 'May' | replace: 'Jun.', 'June' | replace: 'Jul.', 'July' | replace: 'Sep.', 'Sept.' }}

For example, this Liquid code…

@robweychert
robweychert / typographic-scale-generator.md
Last active Feb 20, 2020
Sass typographic scale generator
View typographic-scale-generator.md

Sass typographic scale generator

Generate a typographic scale of CSS variables with any interval (fixed or proportional) and any number of sizes. Just edit $interval, $body-text, $scale-min, and $scale-max:

:root {
  $interval: 1.5;    // Unitless for proportional, unit for fixed
  $body-text: 1rem;  // Must have a unit
  $scale-min: -2;    // Unitless negative integer
  $scale-max: 2;     // Unitless positive integer
@robweychert
robweychert / frame-based-animation.md
Last active Jan 2, 2020
A simple Sass function for frame-based CSS animation
View frame-based-animation.md

A simple Sass function for frame-based CSS animation

If you have experience with animation in other media, CSS animation’s percentage-based keyframe syntax can feel pretty alien, especially if you want to be very precise about timing. This Sass function lets you forget about percentages and express keyframes in terms of actual frames:

@function f($frame) {
  @return percentage( $frame / $totalframes )
}
You can’t perform that action at this time.