This category contains posts about any of my own open source projects.

A Sass micro-library for working with named colours

This week I published another one of my small projects, a Sass micro-library by the name of sass-named-colors. The purpose of this is simple: provide an easy interface to a standardized list of 1,500+ named colours originally compiled by Chirag Mehta and converted to Sass by James Pearson. No need to puzzle out hex values; just use k-colour(emerald), k-colour(monsoon), k-colour(cloud), and so on. The library also features aliased functions and variable names for those who prefer to work with colours (the non-American spelling), admittedly a bit of a pedantic flourish. Plain old “colors” is the default, though personally I stick with the spelling I am used to in my own work (and in this post).

Installation is a breeze via Bower: bower install sass-named-colors -D. This library has no dependencies but requires Sass 3.3+ due to reliance on the map-get() function and an approach outlined by Erskine Design.

This library ships with one function: k-colour($colour, $fallback, $library). Only $colour is required; the remaining arguments are mainly for internal use. Example:

@import "sass-named-colors/named_colours";

.element {
  color: k-colour(red);
  &:hover {
    color: rgba(k-colour(orange), .9);

To extend the built-in colours on a per-project basis:

$k-colours: map-merge($k-colours, (
  norse-blue:     #5cb6cc,
  suomi-blue:     #559dd1,
  steel-sky:      #444547,
  jove:           #24221E

Need a tool to browse the options? Try the colour picker on the original Name That Color project page.

A Sass micro-library for web-safe font stacks

Sass Font Stacker is a small library of web-safe font stacks bundled with some utility functions and a simple mixin to make font-family declarations a breeze. The syntax is similar to what you’d be writing anyway. For example:

@include k-font-family("Open Sans", helvetica);

This will output:

font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, "Nimbus Sans L", "Liberation Sans", Arimo, sans-serif;

The mixin (and related utility function k-font-stack() accepts an arbitrary list of fonts but requires the last (or only) argument to match one of the pre-defined font stacks. This way you can specify naming variations or even entirely different fonts at the head of a custom font stack.

I won’t list all the font stacks included in this project (as this information is likely to change) but will cite a few of the more commonly used fonts in web design:

  • Andale Mono
  • Arial
  • Baskerville
  • Book Antiqua
  • Calibri
  • Cambria
  • Century Gothic
  • Constantia
  • Courier
  • Garamond
  • Helvetica
  • Helvetica Neue Light
  • Hoefler Text
  • Lucida Grande
  • Palatino
  • Segoe
  • Times New Roman
  • Trebuchet MS
  • Verdana

All of these stacks contain a liberal sprinkling of Croscore, DejaVu, Liberation, and URW++ fonts for those viewers who lack the proprietary fonts common on the big two operating systems.

Crafting web-safe font stacks is more an art than a science these days. Usage data is neither current nor of a sufficient quality to make anything better than an educated guess in my estimation. But hey, a good guess is better than nothing—and the use of a Sass library allows for those good guesses to be formalized and consistent across projects. If anyone out there has expect knowledge to contribute please consider opening an issue or sending a pull request. Here’s that GitHub link again: Sass Font Stacker.

An AJAX page loading script for WordPress

I have been experimenting with a custom AJAX page loader for my WordPress blog in recent months. Today I broke this project out into its own repo, available here: WP AJAX Page Loader. It is readily installed via Bower: bower install wp-ajax-page-loader. Some additional work is required to integrate and configure this script for your own projects.

I starting working on this project after learning about some of the many problems associated with history.js, a polyfill that many infinite scrolling implementations rely on to this very day. After having a look at some of the options I decided to adapt one of my own scripts to achieve pretty much the same effect with a much smaller payload size and a bit of a smoother user experience (or one that suits my needs anyway).

This script requires jQuery (already included in WordPress), HTML5 History API, and spin.js. Without jQuery (but with the other dependencies) it clocks in at about 15.5 Kb minified (comparable to the 21 Kb of Paul Irish’s Infinite Scroll).

Read the documentation or peruse the source code for more information or have a look at Pendrell for an example of integration and configuration. This script is currently active on this site so you should be able to demo it by browsing around any of the archives and clicking on “next” (or simply positioning the viewport near—but not at—the bottom of the page, for I am running the script in “footer safe” mode).