Colin Johnston Claim this profile

Current colinjohnston.com website

Personal website c2020

WordPress starter theme built upon Sage 8.4.2, using Foundation for Sites 6.2

Transitional colinjohnston.com website for 2025 built on Kirby 5

Product Management skills framework built on battle-tested methods for Claude Code, Cowork, Codex, and AI agents.

No description.

Minify JavaScript and CSS files in Atom with YUI and UglifyJS2

A django project template with HTML5 boilerplate, SASS, supporting Jinja2 and Django templates and more.

Foundation for WordPress, a Responsive Starter Theme.

Kirby 3 plugin for converting images to WebP on the fly, with support for file methods and Kirby tags!

Little demos to help me learn CSS Grid

✨ SPA with Vue 3 and Kirby: SEO-friendly, automatic routing, i18n and more!

No description.

kirby3 plugin to generate an xml-based sitemap

Material design theme for Bootstrap 3

Location of the API code examples

Kirby 3 Plugin for creating lazyloading image srcset

A fork of animate.css written in SASS with a few modifications.

Minimal blog with Eleventy and Sanity

Organizing and matching volunteers with COVID-19 projects

electronspin.com domain page

No description.

Webapp to visualize various stats about your css

Kirby Patterns Plugin

🔗 Your Own URL Shortener

Simple PHP URL shortener, as used on mths.be

:muscle: A Kirby CMS starter-kit with modern frontend tools

A Jekyll generator for automatically crossposting to Medium

[Archival] Simple starter kit for Middleman/Semantic UI prototypes

[Archival] Design Simulation of Hypothetical v2 Solano CI

Kirby's default theme is the easiest way to get started with Kirby.

Storyboarder makes it easy to visualize a story as fast you can draw stick figures.

Gatsby 1.0 starter with typescript and many cools dev tools

A demo of Gatsby and Storybook working alongside each other

No description.

HTML5 Blank is a powerful shell for rapidly deploying your WordPress projects. Get developing in minutes, with the robust, preloaded shell.

A simple Ionic Weather app

A plugin for WordPress that automatically uploads your blogs files and a SQL dump of its database to Dropbox. Giving you piece of mind that your entire blog including its precious posts, images and metadata regularly backed up.

Start your Jekyll (v3) project with Zurb Foundation for Sites (v6, sass).

React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync)

No description.

A tiny web application to invite a user into your slack team.

:wrench: .files, including ~/.osx — sensible hacker defaults for OS X

Getting Started with PHP on Heroku

Public Slack organizations made easy

Simple visual task board

Kirby CMS starter kit with Gulp

Generate interactive Specificity Graphs for your CSS

Better menu implementation for Wordpress using BEM syntax

No description.

Add a dash of pre-defined style to your Bourbon.

Middleman with Webpack for the asset pipeline.

A minimal Midduleman project template using ZURB Foundation 6

Kirby CMS with Vagrant

Documentation for Middleman

SASS Color Picker, an Arc90 Lab Experiment.

Bludit CMS

A WordPress plugin that lets you push, pull, and sync database tables between WordPress installations.

One command scaffold-er for Google's Web Starter Kit. No questions asked!

A HTML5 Boilerplate generator for Slush

Components and patterns built with Bourbon and Neat

A highly semantic WordPress Theme with HTML5 templates, responsive and seo optimized. SemPress supports most of the new HTML5 tags, the new HTML5 input-types, microformats, microformats v2 and microdata (Schema.org).

A beautiful reader-focused WordPress theme, for you.

Publish Theme for WordPress

A low-drama portfolio generator for your middleman site.

Semantic UI, converted to Sass and ready to drop into Rails & Compass.

Middleman Skeleton For Zurb Foundation

This is a Middleman web starter kit that I've made to help you speed up static site building. If you are new to Middleman be sure to read all the documentation before using the template.

Yeoman generator for Zurb Foundation 5

Hand-crafted frontend development

Product Design Sprint Material

flexbox playground, built on Knockout.js and Typescript

Zulip iOS app

iOS Demo App - designcode.io

Atom config for sharing between workstations

Basic layout of a WordPress Git repository. I use this as a base when creating a new repo.

A markdown based documentation system for style guides.

Mobile App Framework powered by React

React.js UI components for the TouchstoneJS platform http://touchstonejs.io

Gulp tasks for TouchstoneJS Projects

Reference Touchstone App with examples of all UI components

Hacker News Reader demo app built on Reapp http://hn.reapp.io

No description.

A Sketch 3 plugin that allows you to use CSS on layers.

No description.

Basic Segment.io loader snippet Meteor package

Build and edit SVGs in the browser

Obsessive cheat sheet to favicon sizes/types. Please contribute! (Note: this may be in flux as I learn new things about favicon best practices.)

A Flexible, Responsive CSS Framework - Powered by Sass

Screenshots with JavaScript

Tether is an interactive web application created by @jonobr1 in collaboration with Plaid (http://plaid.co.uk). The track is accompanied by a series of graphic shapes that gradually evolve as the music progresses.

A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.

An open API server, data import tools, and sample apps to help small businesses search for opportunities to work with the U.S. government.

Generating styled markup from a folder of markup snippets.

WordPress starter theme that uses gulp, Bower, and Bootstrap

A Neutron-inpsired UI for Atom.

A monokai syntax theme for Atom to work with Proton UI.

A base template for starting and executing your web development workflow.

The starting point for my projects

A Node prototyping starter kit

A Jekyll prototyping starter kit

A Middleman prototyping starter kit

No description.

No description.

Delightful, performance-focused pure css loading animations.

Sass UIKit for moovweb style UI elements across all of our sites

Sass Website

Modern, Crazy Fast, Ridiculously Easy and Amazingly Powerful Flat-File CMS

The PHP version of Pattern Lab

Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions

An implementation of Pattern Lab (http://patternlab.io) for middleman.

Foundation 5, SCSS, HAML and Coffee Script. Modular structure for css/scss files. Rails like assets structure.

Easily create front-end style guides with Markdown and Sass/SCSS.

A WordPress Development Environment With Vagrant/Puppet

An example of using grunt-uncss on a Sass project

the last carousel you'll ever need

Octopress 3.0 – A Ruby Command-Line Interface shipped as a Gem

Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love).

Stellar.js - Parallax scrolling made easy

Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin

Used to recreate the Nike Better World parallax effect

Kippt's Firefox add-on

JavaScript Style Guide

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

A general workflow checklist for visual designers working within a team setting where they'll be sharing visual exploration and comps with a developer.

Website style analizer for designers. This is the service part that does the analization etc.

The Pagekit CMS

fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

JS library for Mobile Web

JavaScript Library for creating random pleasing colors and color schemes

ish. is yet another viewport resizer

Shortcode plugin to create columns according to the grid of Foundation in the required+ Foundation theme.

Initial directory setup, style guide and pattern primer. Intended as a starting point for my own projects, available for others to clone and adapt for theirs.

No description.

A set of common UI Components using the power of CSS and without Javascript.

No description.

popular tourist locations on the wild and exciting quest to make web maps in fewer tries

A Responsive Images approach that you can use today!

Template for quick wireframe mockups.

No description.

Reverie is a versatile HTML5 responsive WordPress framework based on ZURB's Foundation.

The exceptionally handsome dashboard framework in Ruby and Coffeescript.

It's a mail test tool, to test your mails before send them

Website for viewing and sharing how web pages look at different screen sizes

Expand and Collapse HTML content

simple jQuery plug-in to expand/collapse elements

Tool for sorting CSS properties in specific order

A set of custom HTML snippets for Sublime Text 2

A collection of front end developer snippets for Sublime Text

Dark & Light custom UI themes with colors variations for Sublime Text 2

FC Webicons is a set of resolution-independent social icons for use on your website. They use feature-detected SVG graphics (with PNG fallbacks) to display the icons over their appropriate negatively indented anchor titles.

A lightweight CSS3 image gallery that is pretty to look and and easy to use

Create HTML and CSS Style Tiles with Sass & Compass

A Mobile-First, Responsive WordPress starter theme based off 320 and Up & HTML5 Boilerplate.

A Device Agnostic Approach to Complex Site Navigation

A simple HTML page to test out your responsive web design